如何为我的网站提供iPhone的图标?

html ios iphone favicon apple-touch-icon

7153 观看

5回复

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

作者: Zack Peterson 的来源 发布者: 2019 年 6 月 7 日

回应 (5)


8

为了完整起见,链接到Scott Hanselman的帖子,其中还包含一些额外的提示:

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

作者: Michael Stum 发布者: 04.08.2008 07:06

5

从Apple Developer Connection Safari Web Content Guide for iPhone页面指定Web Clip的网页图标 ...

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

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

要为单个网页指定图标,或用网页特定图标替换网站图标,请在网页中添加链接元素,如下所示:

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

在上面的示例中,将custom_icon.png替换为您的图标文件名。

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

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

作者: Zack Peterson 发布者: 04.08.2008 07:04

4

决定

请参阅指定的Web剪辑网页图标的部分配置Web应用程序的页面Safari网页内容指南的Safari参考库 ...

为Web Clip指定网页图标

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

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

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

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

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

作者: Zack Peterson 发布者: 17.08.2010 09:24

2

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

作者: Bragadeeswaran 发布者: 07.06.2017 12:32

1

我已经建议Stack Overflow实现一个苹果触摸图标:

在iPhone上为Safari添加Apple-touch-icon

作者: Zack Peterson 发布者: 04.08.2008 07:13
32x32