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

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