如何定义网站屏幕快捷图标？

Question

我找不到如何让 Android 使用自定义图标（例如 iOS 使用的图标或应用程序触摸图像）作为网站快捷方式。

你能给我一个提示吗？

原文由 Toni Michel Caubet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Android 使用主屏幕图像和“快捷方式图标”（如网站图标）。如果您只指定主屏幕图标，网页将不会在网络浏览器中的 URL 旁边显示图标。

“快捷方式图标”必须单独列出，即使它可以是同一个文件。

 <link rel="shortcut icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://yourdomain.com/path/icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://yourdomain.com/path/icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://yourdomain.com/path/icon144.png" />

相对 URL 适用于许多设备，但大多数消息来源表示您需要使用绝对 URL。

单独列出尺寸允许设备只下载满足其需要的最小图像。对于“ shortcut icon ”，您不能列出不同的尺寸，但您可以使用 ICO 文件，该文件可能包含在文件中编码的多种尺寸。许多图像程序（如 GIMP ）可以保存多种尺寸的 ICO 文件。

注意，如果要在IE中显示快捷方式图标，必须是真实的ico文件。

显然，Android 2.1 及更早版本仅识别“预制”图像链接，但如果包含预制图标，则每台能够“幻想”图标的设备都将跳过其过程并仅使用预制图标。我测试的 Android 可以做自己的幻想，所以我不使用预制图标链接。这将取决于您的兼容性需求。

 <link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>

有关使用主屏幕图标的更多信息…

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

原文由 Carter Medlin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Android 和 iOS 似乎对主屏幕上的图标使用相同的引用。

对于 HTML 链接图标：

 <!-- These two are what you want to use by default -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- This one works for anything below iOS 4.2 -->
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">

这两种类型的区别在于前两个没有空格。底部的包括两者之间有一个空间。 iOS 4.2+ 无法识别该空格。最好的办法是同时使用这三个。如果空间有限，请仅使用前两个。

对于尺码：

144 × 144 像素，适用于 iPad Retina 显示屏。

iPhone Retina 显示屏为 114 × 114 像素。

57 × 57 像素几乎适用于任何其他内容

需要注意的一件事 是 iOS 4.2+ 将简单地忽略 size 属性，因此您可以直接链接它们而不用它。我建议仅出于组织目的将大小放在图标的文件名中。

另一件需要注意 的事情是，您甚至不需要包含“apple-touch-icon”的链接。如果 html 中没有定义图标，iOS 将在根文件夹中按顺序搜索以下名称的文件。 Android 确实 需要定义它们，因此无论如何都将它们放在代码中。

 apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

原文由 Tgwizman 发布，翻译遵循 CC BY-SA 3.0 许可协议