为应用程序添加图标 ios_为已添加书签的网站添加iOS图标-CSDN博客

本文介绍了如何为网站添加Apple Touch图标以在iOS主屏幕上显示，以及如何为Windows 8创建固定图标。详细阐述了不同设备所需的图标尺寸，并提到了使用Photoshop创建和编辑图标的技巧。

摘要由CSDN通过智能技术生成

自1999年引入Internet Explorer 5以来，书签图标或更常见的图标被称为favicon（收藏夹图标）。书签图标或favicon通常使用.ico （有时也使用.png格式）指定为16×16 px。并显示在Web浏览器的URL地址旁边或Tab界面的页面标题旁边，如下所示。

如今，随着移动设备的发展，书签图标或收藏夹图标也得到了发展。例如，您可能熟悉的iOS在屏幕上显示图标。

这些图标大多数都经过了精美的设计，在Apple引入了一个名为apple-touch-icon新元标记后，您现在可以在将站点添加为书签时在iOS主屏幕上显示网站图标。

添加Apple Touch图标

苹果触摸图标由<link>标签指定，如下所示。

<link rel="apple-touch-icon" href="icon.png"/>

默认情况下，此图标为57x57px。但是，对于iPad和Retina设备，我们需要提供更多尺寸。 iPad需要大小为72x72px的图标，而Retina设备需要大小为114x114px的图标。

因此，总而言之，我们需要在<head>提供以下规格的图标，以支持iPhone，iPad和Retina设备。

<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>

默认情况下，iOS会自动向图标添加糖果色效果。

如果您希望图标不影响此效果，则可以在rel名称的末尾添加-precomposed ，就像这样。

<link rel="apple-touch-icon-precomposed" href="icon.png"/>

刷新网页并重新保存到主屏幕。现在，效果未添加到图标。

使用Photoshop创建Apple Touch图标

在上一篇文章中，我们讨论了如何使用MacAppIcon创建苹果触摸图标。另外，这也是我的偏爱，我们可以使用AppIconTemplate中的 PSD模板来获得更大的自定义灵活性。

我真的很喜欢此PSD模板的另一个功能是，它还带有Photoshop Actions，可将图标自动保存为多种尺寸，包括iTunes Artwork的尺寸。

奖励：添加Windows 8固定图标

此外，Windows 8还提供了类似的方法，可以使用以下元标记在固定（带有书签）的网站上添加图标。

<meta name="msapplication-TileImage" content="/metro-tile.png"/>
<meta name="msapplication-TileColor" content="#015565"/>

有关在您的网站上实现这些标签的进一步讨论，您可以转到下面的MSDN帖子。

为应用程序添加图标 ios_为已添加书签的网站添加iOS图标

添加Apple Touch图标

使用Photoshop创建Apple Touch图标

奖励：添加Windows 8固定图标

更多资源