我如何给我的网站一个iPhone的图标?

如何为我创build的网站设置iPhone上显示的图标?

为了完整起见,请链接到Scott Hanselman的post,其中还包含一些其他提示:

添加主屏幕iPhone图标并调整ViewPort

从Apple开发人员连接Safari网页内容指南(iPhone版) 指定Web剪辑的网页图标 …

用户可以添加一个Web应用程序或网页链接到主屏幕。 这些由图标表示的链接称为Web剪辑。 按照这些简单的步骤指定一个图标来表示您的Web应用程序或iPhone上的网页。

要为整个网站(网站上的每个页面)指定一个图标,请在名为apple-touch-icon.png的根文档文件夹中放置一个PNG格式的图标文件。

要为单个网页指定图标,或者将网站图标replace为特定于网页的图标,请在网页中添加链接元素,如下所示:

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

在上面的例子中,用你的图标文件名replacecustom_icon.png。

请参阅iPhone人机界面指南中的“为您的Web应用程序或网页创build图标”。

注意:Web剪辑function在iPhone 1.1.3及更高版本中可用。

请参阅Safari参考库中“ Safari Web内容指南”的“ configurationWeb应用程序”页面上的“ 为Web Clip指定Web页面图标”部分…

指定Web剪辑的网页图标

iPhone OS注意: Web剪辑function在iPhone OS 1.1.3及更高版本中可用。 apple-touch-icon-precomposed.png文件名在iPhone OS 2.0及更高版本中可用。

您可能希望用户能够将您的Web应用程序或网页链接添加到主屏幕。 这些由图标表示的链接称为Web剪辑。 按照这些简单的步骤指定一个图标来表示您的Web应用程序或iPhone OS上的网页。

  • 要为整个网站(网站上的每个页面)指定一个图标,请将PNG格式的图标文件放在名为apple-touch-icon.pngapple-touch-icon-precomposed.png的根文档文件夹中。 如果您使用apple-touch-icon-precomposed.png作为文件名,则iPhone OS上的Safari不会为该图标添加任何效果。

  • 要为单个网页指定一个图标或者将网站图标replace为网页特定的图标,请向该网页添加一个链接元素,如下所示:
    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    在上面的例子中,用你的图标文件名replacecustom_icon.png 。 如果您不希望iPhone OS上的Safari向该图标添加任何效果,请将apple-touch-iconreplace为apple-touch-icon-precomposed

请参阅iPhone用于网页图标指标的Web应用程序人机界面指南中的 “为您的Web应用程序或网页创build图标” 。

在你的头部添加这个: <link rel="icon" href="/your-icon-url"/>

我提出了一个build议,堆栈溢出实现一个苹果触摸图标:

在iPhone上为Safari添加一个苹果触摸图标