Android 如何定义网站屏幕快捷方式图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11761864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to define the website screen shortcut icon?
提问by Toni Michel Caubet
I can't find how to make Android use a custom icon (e.g. the favicon or the app-touch image that iOS uses) for a website shortcut.
我找不到如何让 Android 使用自定义图标（例如，iOS 使用的图标或应用程序触摸图像）作为网站快捷方式。
Can you give me a hint?
你能给我一个提示吗？
采纳答案by Carter Medlin
Android uses a home screen image AND a "Shortcut icon" (like favicon). If you only specify the home screen icon, the web page will not display an icon next to the URL in the web browser.
Android 使用主屏幕图像和“快捷方式图标”（如 favicon）。如果您只指定主屏幕图标，网页将不会在 Web 浏览器中的 URL 旁边显示图标。
The "shortcut icon" must be listed separately, even though it can be the same file.
“快捷方式图标”必须单独列出，即使它可以是同一个文件。
<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" />
Relative URLs will work for many devices, but most sources say you need to use absolute URLs.
相对 URL 可用于许多设备，但大多数消息来源表示您需要使用绝对 URL。
Listing the sizes separately allows the device to download only the smallest image that meets it's needs. For the "shortcut icon", you can't list different sizes, but you can use an ICO file which may contain multiple sizes encoded in the file. Many image programs like GIMPcan save ICO files with multiple sizes.
单独列出尺寸允许设备仅下载满足其需要的最小图像。对于“ shortcut icon”，您不能列出不同的尺寸，但您可以使用 ICO 文件，该文件可能包含在文件中编码的多种尺寸。许多图像程序如GIMP可以保存多种大小的 ICO 文件。
Note that if you want the shortcut icon to display in IE, it must be a real ico file.
请注意，如果您希望快捷方式图标在 IE 中显示，则必须是真实的 ico 文件。
Apparently, Android versions 2.1 and earlier only recognize the "precomposed" image link, but if you include the precomposed icon, every device that is capable of "fancifying" icons will skip their process and just use the precomposed ones. The Androids I tested can do their own fancifying, so I don't use precomposed icon links. It will depend on your compatibility needs.
显然，Android 2.1 及更早版本仅识别“预合成”图像链接，但如果您包含预合成图标，则每个能够“幻想”图标的设备都将跳过其过程并仅使用预合成的。我测试的 Android 可以自己进行幻想，所以我不使用预先组合的图标链接。这将取决于您的兼容性需求。
<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>
For more information about using home screen icons...
有关使用主屏幕图标的更多信息...
回答by Tgwizman
Android and iOS seem to use the same references for the icons on the home screen.
Android 和 iOS 似乎对主屏幕上的图标使用相同的引用。
For the HTML link icons:
对于 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">
The difference between the two types are that the top two don't have a space. The bottom one includes both with a space in between. The space is not recognized by iOS 4.2+. Your best bet is to use all three. If you are limited on space, use only the top two.
两种类型的区别在于前两种没有空格。底部包括两者，中间有一个空格。iOS 4.2+ 无法识别该空间。最好的办法是使用所有三个。如果空间有限，请仅使用前两个。
For Sizes:
对于尺寸：
144 × 144 pixels for an iPad Retina display.
144 × 144 像素，适用于 iPad Retina 显示屏。
114 × 114 pixels for an iPhone Retina display.
114 × 114 像素，适用于 iPhone Retina 显示屏。
57 × 57 pixels for almost anything else
57 × 57 像素几乎适用于任何其他事物
One thing to watch out foris that iOS 4.2+ will simply ignore the size attribute, so you can just link them with out it. I'd suggest putting the size within the icon's file name just for organizational purposes.
需要注意的一件事是，iOS 4.2+ 将简单地忽略 size 属性，因此您可以将它们与它联系起来。我建议仅出于组织目的将大小放在图标的文件名中。
Another thing to noteis that you don't even need to include the links for the "apple-touch-icon"s. If there is no icons defined in the html, iOS will search through the root folder for files named the following in order. Android DOESneed them defined, so put them in the code anyways.
另一件要注意的事情是，您甚至不需要包含“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
回答by Ken Y-N
This looks like a good explanation.
It would appear that if you place:
看起来，如果你放置：
<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
In the bookmarked page's HTML, it will appear on the desktop automagically.
在书签页面的 HTML 中，它会自动出现在桌面上。
回答by alex
This Android and iPhone iconpage suggests absolute URLsfor Android.
此Android 和 iPhone 图标页面建议Android 的绝对 URL。
So just amend KenY-N's tags to
所以只需将 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"/>
