我找不到如何让 Android 使用自定义图标（例如 iOS 使用的 favicon 或 app-touch 图像）作为网站快捷方式。
你能给我一个提示吗？
问问题
26623 次
4 回答
8
Android 使用主屏幕图像和“快捷方式图标”（如网站图标）。如果您只指定主屏幕图标，则网页不会在 Web 浏览器中的 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 及更早的版本只识别“预组合”图像链接，但如果您包含预组合图标，那么每个能够“幻想”图标的设备都会跳过它们的过程，而只使用预组合的。我测试的机器人可以做自己的幻想，所以我不使用预先组合的图标链接。这将取决于您的兼容性需求。
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
有关使用主屏幕图标的更多信息...
于 2013-02-21T19:52:50.880 回答
7
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+ 无法识别该空间。你最好的选择是使用这三个。如果空间有限，请仅使用前两个。
对于尺寸：
iPad Retina 显示屏为 144 × 144 像素。
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
于 2012-08-12T23:17:46.113 回答
0
如果您放置：
<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
在书签页面的 HTML 中，它会自动出现在桌面上。
于 2012-08-06T03:15:38.643 回答
0
此Android 和 iPhone 图标页面建议Android 的绝对 URL。
所以只需将 KenY-N 的标签修改为
<link rel="apple-touch-icon" href="http://yourdomain.com/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
于 2012-08-12T17:14:16.647 回答