[N20021801](Web - Front End)-Favorites icon & TileImage Note#Favicon.ico网页图标及(多平台)平铺图片应用笔记
A.Official Ducuments and Notes//（首先是很有必要阅读的）较为官方的文件
a.Html ‘msapplication-X’ meta for windows//为Windows设置的META标签"msapplication-X"
(From microsoft.com)
b.Html ‘apple-touch-icon’ meta for IOS & Safari//为IOS Safari设置的META标签"apple-touch-icon"
(From apple.com)
c.Size of all kinds of ico & pic in different platform//各个平台使用的图片尺寸
(Frome realfavicongenerator.net)
e.Multiply all these contents main from c.
//主要归纳自c.的内容
Files in root directory
//放置于根目录的相关图标文件及其尺寸
| Device | OS | Version | Browser | Version | Tab | Bookmark | Home screen |
|---|---|---|---|---|---|---|---|
| 设备 | 系统 | OS版本 | 浏览器 | 浏览器版本 | 浏览器标签 | 收藏夹 | 主屏桌面 |
| PC | Windows | 10 | Edge | 41.16299.15.0 | 32x32 PNG picture | 32x32 PNG picture | 150x150 Tile picture1 |
| PC | Windows | 10 | IE | 11.192 | 32x32 PNG picture | 32x32 PNG picture | 32x32 PNG picture2 |
| PC | Windows | 10 | Chrome | 64.3282 | 32x32 PNG picture | 32x32 PNG picture | 192x192 PNG picture |
| PC | Windows | 10 | Firefox | 58.0.1 | 16x16 PNG picture | 180x180 Apple Touch icon | 180x180 Apple Touch icon3 |
| PC | Windows | 10 | Opera | 50.0.2762 | 32x32 PNG picture | 32x32 PNG picture | No icon4 |
| PC | Windows | 10 | Yandex | 17.11.1 | 32x32 PNG picture5 | 32x32 PNG picture | N/A |
| Samsung Galaxy S7 | Android | 7 | Chrome | 64.3282 | 32x32 PNG picture6 | 32x32 PNG picture | 192x192 Android picture7 |
| Samsung Galaxy S7 | Android | 7 | Firefox | 58 | 180x180 Apple Touch icon | 180x180 Apple Touch icon | 180x180 Apple Touch icon |
| iPad Mini | iOS | 9.3.5 | Safari | 9 | N/A | 180x180 Apple Touch icon | 180x180 Apple Touch icon8 |
| Mac Mini | Mac OS X | 10.13.3 | Safari | 11.3 | Mask icon9 | 16x16 or 32x32 PNG picture | N/A |
| PC | Mac OS X | 10.11.6 | Chrome | 63.3239 | 32x32 PNG picture | 32x32 PNG picture | N/A |
Pictures not in root directory
//放置于根目录之外的相关图标文件及其尺寸
| Device | OS | Version | Browser | Version | Tab | Bookmark | Home screen |
|---|---|---|---|---|---|---|---|
| 设备 | 系统 | OS版本 | 浏览器 | 浏览器版本 | 浏览器标签 | 收藏夹 | 主屏桌面 |
| PC | Windows | 10 | Edge | 41.16299.15.0 | 32x32 PNG picture | 32x32 PNG picture | 150x150 Tile picture1 |
| PC | Windows | 10 | IE | 11.192 | 32x32 PNG picture | 32x32 PNG picture | 32x32 PNG picture2 |
| PC | Windows | 10 | Chrome | 64.3282 | 16x16 favicon.ico picture | 16x16 favicon.ico picture | 192x192 PNG picture |
| PC | Windows | 10 | Firefox | 58.0.1 | 16x16 PNG picture | 180x180 Apple Touch icon | 180x180 Apple Touch icon3 |
| PC | Windows | 10 | Opera | 50.0.2762 | 16x16 favicon.ico picture | 16x16 favicon.ico picture | No icon4 |
| PC | Windows | 10 | Yandex | 17.11.1 | 16x16 favicon.ico picture5 | 16x16 favicon.ico picture | N/A |
| Samsung Galaxy S7 | Android | 7 | Chrome | 64.3282 | 32x32 PNG picture6 | 32x32 PNG picture | 192x192 Android picture7 |
| Samsung Galaxy S7 | Android | 7 | Firefox | 58 | 180x180 Apple Touch icon | 180x180 Apple Touch icon | 180x180 Apple Touch icon |
| iPad Mini | iOS | 9.3.5 | Safari | 9 | N/A | 180x180 Apple Touch icon | 180x180 Apple Touch icon8 |
| Mac Mini | Mac OS X | 10.13.3 | Safari | 11.3 | Mask icon9 | 16x16 or 32x32 PNG picture | N/A |
| PC | Mac OS X | 10.11.6 | Chrome | 63.3239 | 32x32 favicon.ico picture | 32x32 favicon.ico picture | N/A |
Office & Personal Test Note//官方及作者测试脚注：
//后续将深入整理分析相关配置及测试内容。
When pinned to the Task Bar, Edge picks the Apple Touch icon and keeps its transparency, if any. When pinned to the Start Menu, Edge uses the 150x150 Tile icon and the color declared as msapplication-TileColor in the HTML (not the one in browserconfig.xml), see Issue #331.
//Apple Touch icon在添加固定到底部任务栏时，会保留原有的透明底色的IE图标，但如果在Html（非browserconfig.xml内）设置了150x150像素尺寸的Tile icon及msapplication-TileColor标签时，则会使用自定义设置。
（作者注：Meta标签msapplication-TileColor写于browserconfig.xml内时此注解则未生效，相关连接解释的即是此问题） ↩︎ ↩︎Actually, the icon is added to the Task bar, not to the desktop.
//图标实际上是添加到了任务栏，并没有保存到桌面。
（作者注：使用IE保存链接到桌面，其icon实际保存在任务栏（但是并没有固定在任务栏）） ↩︎ ↩︎When adding a shortcut to the desktop, Firefox creates an icon with huge margins, instead of using the icon in full size. Apparently, there is no way to work around this issue. Even adding mozilla.org to the desktop generates the same result.
(P:Ico file could include full size images, actually in my test i could not find this issue cause any problem at present)
//火狐浏览器在添加快捷方式到桌面时会生成大边距图标，而不是全尺寸图标，目前暂时没有办法解决这个问题，哪怕是把火狐的官网添加到桌面结果也是这样。
（作者注：ICO文件可以集成多种尺寸的图标即16X16 32X32两种或多种尺寸于一个文件，大边距图标即最大尺寸图标，但在测试时，暂未发现此问题造成的实际影响） ↩︎ ↩︎When adding a site to the homescreen, Opera creates a link with the icon similar to a local HTML file (eg. if Chrome is configured as the default application to open the HTML files, then the shortcut has the Chrome icon). There is probably no way to work around this issue.
//Opera在添加网页到浏览器主屏时，会创建关联链接此图标的类似本地静态HTML文件（例如将Chrome设为HTML文件的默认打开方式时，此HTML快捷方式是Chrome的图标）。这个问题可能无法解决。
（作者注：额外生成的HTML文件如被意外清理，则会导致图标显示异常） ↩︎ ↩︎Yandex also uses a particular color as the background of the active tab. It is not clear where this color comes from.
//Yandex打开的选项卡会使用特殊颜色背景，暂不清楚相关设置。
（作者注：Yandex属于俄罗斯主流浏览器，主要适用于俄语及Yandex搜索引擎） ↩︎ ↩︎The icon is visible when choosing among the open tabs. In addition, the address bar is the theme_color color of the manifest.
//在打开的选项卡中图标文件时可见的，此外，地址栏的颜色设置于manifest里的theme_color。
（作者注：可扩展的Web app等都有maifest.json配置文件，与Meta theme-color区别在此暂不说明） ↩︎ ↩︎At least on the tested device, all icons have rounded corners. Some padding is added to the icon in order to not crop its corners. In addition, when a link is added to the home screen and then the link is opened, Chrome shows a splash screen with the 512x512 icon and the background_color color of the manifest.
//在已测试的设备上，所有的图标都有圆角，部分图标为不剪裁圆角而进行了填充。并且当链接添加到浏览器主屏并打开，Chrome会显示一个512X512像素图标的启动动画，背景色为设置在manifest的background_color。 ↩︎ ↩︎iOS Safari applies a black background to the Touch icon when it is added to home screen.
//当添加到主屏时，iOS Safari浏览器会给图标设置一个黑色背景。 ↩︎ ↩︎This icon is displayed when the tab is pinned (ie. sent to far left of the window).
//图标当选项卡固定时就会显示（即发送到窗口的最左边）。 ↩︎ ↩︎