Question

我无法找到如何让Android使用自定义图标（例如iOS使用的favicon或app-touch图像）作为网站快捷方式。

你能给我一个提示吗？

Answer 1

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 DOES 需要定义它们，所以无论如何都要将它们放入代码中。

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

Answer 2

Android使用主屏幕图像和“快捷方式图标”（如favicon）。如果您只指定主屏幕图标，则网页将不会在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"/>

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

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

Answer 3

This looks like a good explanation

如果你放置：

<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

在书签页面的HTML中，它会自动显示在桌面上。

Answer 4

此Android and iPhone icon页面为Android建议绝对网址。

所以只需将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"/>

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

4 个答案: