[N20021801](Web - Front End)-Favorites icon & TileImage Note#Favicon.ico网页图标及(多平台)平铺图片应用笔记

西门高歌
2023-12-01

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
//放置于根目录的相关图标文件及其尺寸

DeviceOSVersionBrowserVersionTabBookmarkHome screen
设备系统OS版本浏览器浏览器版本浏览器标签收藏夹主屏桌面
PCWindows10Edge41.16299.15.032x32 PNG picture32x32 PNG picture150x150 Tile picture1
PCWindows10IE11.19232x32 PNG picture32x32 PNG picture32x32 PNG picture2
PCWindows10Chrome64.328232x32 PNG picture32x32 PNG picture192x192 PNG picture
PCWindows10Firefox58.0.116x16 PNG picture180x180 Apple Touch icon180x180 Apple Touch icon3
PCWindows10Opera50.0.276232x32 PNG picture32x32 PNG pictureNo icon4
PCWindows10Yandex17.11.132x32 PNG picture532x32 PNG pictureN/A
Samsung Galaxy S7Android7Chrome64.328232x32 PNG picture632x32 PNG picture192x192 Android picture7
Samsung Galaxy S7Android7Firefox58180x180 Apple Touch icon180x180 Apple Touch icon180x180 Apple Touch icon
iPad MiniiOS9.3.5Safari9N/A180x180 Apple Touch icon180x180 Apple Touch icon8
Mac MiniMac OS X10.13.3Safari11.3Mask icon916x16 or 32x32 PNG pictureN/A
PCMac OS X10.11.6Chrome63.323932x32 PNG picture32x32 PNG pictureN/A

Pictures not in root directory
//放置于根目录之外的相关图标文件及其尺寸

DeviceOSVersionBrowserVersionTabBookmarkHome screen
设备系统OS版本浏览器浏览器版本浏览器标签收藏夹主屏桌面
PCWindows10Edge41.16299.15.032x32 PNG picture32x32 PNG picture150x150 Tile picture1
PCWindows10IE11.19232x32 PNG picture32x32 PNG picture32x32 PNG picture2
PCWindows10Chrome64.328216x16 favicon.ico picture16x16 favicon.ico picture192x192 PNG picture
PCWindows10Firefox58.0.116x16 PNG picture180x180 Apple Touch icon180x180 Apple Touch icon3
PCWindows10Opera50.0.276216x16 favicon.ico picture16x16 favicon.ico pictureNo icon4
PCWindows10Yandex17.11.116x16 favicon.ico picture516x16 favicon.ico pictureN/A
Samsung Galaxy S7Android7Chrome64.328232x32 PNG picture632x32 PNG picture192x192 Android picture7
Samsung Galaxy S7Android7Firefox58180x180 Apple Touch icon180x180 Apple Touch icon180x180 Apple Touch icon
iPad MiniiOS9.3.5Safari9N/A180x180 Apple Touch icon180x180 Apple Touch icon8
Mac MiniMac OS X10.13.3Safari11.3Mask icon916x16 or 32x32 PNG pictureN/A
PCMac OS X10.11.6Chrome63.323932x32 favicon.ico picture32x32 favicon.ico pictureN/A

Office & Personal Test Note//官方及作者测试脚注:

//后续将深入整理分析相关配置及测试内容。


  1. 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内时此注解则未生效,相关连接解释的即是此问题) ↩︎ ↩︎

  2. Actually, the icon is added to the Task bar, not to the desktop.
    //图标实际上是添加到了任务栏,并没有保存到桌面。
    (作者注:使用IE保存链接到桌面,其icon实际保存在任务栏(但是并没有固定在任务栏)) ↩︎ ↩︎

  3. 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两种或多种尺寸于一个文件,大边距图标即最大尺寸图标,但在测试时,暂未发现此问题造成的实际影响) ↩︎ ↩︎

  4. 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文件如被意外清理,则会导致图标显示异常) ↩︎ ↩︎

  5. 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搜索引擎) ↩︎ ↩︎

  6. 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区别在此暂不说明) ↩︎ ↩︎

  7. 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。 ↩︎ ↩︎

  8. iOS Safari applies a black background to the Touch icon when it is added to home screen.
    //当添加到主屏时,iOS Safari浏览器会给图标设置一个黑色背景。 ↩︎ ↩︎

  9. This icon is displayed when the tab is pinned (ie. sent to far left of the window).
    //图标当选项卡固定时就会显示(即发送到窗口的最左边)。 ↩︎ ↩︎

 类似资料: