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

最新推荐文章于 2021-04-06 00:13:00 发布
最新推荐文章于 2021-04-06 00:13:00 发布
阅读量331 收藏
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010762731/article/details/104367920
版权

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).
    //图标当选项卡固定时就会显示（即发送到窗口的最左边）。 ↩︎ ↩︎

M3GAMIND
关注
专栏目录
ico的尺寸_Favicon.ico浏览器图标文件制作和正确使用
weixin_39796752的博客
10-25 1323
favicon图标介绍所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地...
给网站设置图标favicon.ico
Selience的博客
12-06 578
场景：网站做好后，放在测试服务器，控制台报错，但页面正常显示 favicon.ico是什么？ 所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 favicon.ico是一个网站必要的吗？ 不是必要的，但是web服务器在网站加载时都会请求favicon.ico这个文件，如果不存在就会报404错误...
前端渲染和后端渲染的区别
灵魂画师牧码
09-02 5577
在网上查找了很久的前端渲染和后端渲染的区别，最后总算在知乎上看到了一个比较清楚的解释，感谢万分！作者：iakul 链接：https://www.zhihu.com/question/28725977/answer/42077482 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。后端渲染（SSR、服务端渲染）后端渲染HTML的情况下，浏览器会直接接收到经过服务器
如何给网站设置favicon.ico图标
热门推荐
赵天铭的博客
06-28 5万+
favicon.ico是什么？ 所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 favicon.ico是一个网站必要的吗？ 不是必要的，但是web服务器在网站加载时都会请求favicon.ico这个文件，如果不存在就会报404错误，并且会记录到错误日志中，所以最好的设置。 favicon.ico怎么...
python运用ico图标,处理Django中的favicon.ico图标实例方法
weixin_42393245的博客
03-26 653
如何优雅地处理Django中的favicon.ico图标详解前言favicon.ico是网站的图标也是网站的头像，简单来说，就是让我们的网站更加好看。本文主要给大家介绍了关于优雅处理Django中favicon.ico图标的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧起步默认情况下，浏览器会访问网站 "/favicon.ico" 这个地址获取网站的图标。如果没有配置的话...
favicon.ico 介绍与使用 - 实践
"代码"的日常搬运
09-13 1874
1.应用场景 主要用于了解favicon.ico的作用以及使用，帮助更好地理解web系统与开发. 2.学习/操作 1.文档阅读 https://www.cnblogs.com/nyw1983/p/11222350.html //favicon.ico是什么？ https://blog.csdn.net/guzhao593/article/details/93972193 //如何给网站设置favicon.ico图标 2.个人整理输出： 简单说：...
php网站如何添加ico图标,如何添加favicon.ico图标？
weixin_35904873的博客
03-25 1004
在本站首页的活跃博客中经常看到有部分博客网站没有favicon.ico图标，所以今天打算普及一下相关知识，希望还没有favicon.ico图标的博主们，能够制作出自己独特的图标。那么到底什么是favicon.ico？好搜百科给出的解释：所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是F...
Favicon.ico的用法及意义--以及简介通过Favicon.ico来判断网页打开状况
weixin_30273501的博客
12-09 981
1、定义： 　　所谓favicon，即FavoritesIcon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 当然，这不是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和InternetExplorer(5.5及以上版本)中， favicon不仅在收藏夹中显示，还会同时出现在地址栏上...
php favicon.ico,简单谈谈favicon
weixin_42300525的博客
04-06 594
favicon.ico介绍favicon.ico是个什么东西呢，也许见得太多都习以为常了(我就是这样，直到写这篇文章之前才知道)，看看维基百科的解释：Favicon是favorites icon的缩写，亦被称为website icon(网页图标)、page icon(页面图标)或urlicon(URL图标)，下面是链接 http://zh.wikipedia.org/wiki/Favicon其实说...
favicon.ico 图标大全
10-14
【favicon.ico 图标大全】是为了解决网页标识问题而提供的资源集合，它包含了各种流行、个性化的图标设计，适用于不同网站的需求。Favicon（Favorites Icon）是网站的图标，通常显示在浏览器的地址栏、书签栏以及...
Django添加favicon.ico图标的示例代码
01-20
所谓favicon，即Favorites Icon的缩写，让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。 默认情况下，浏览器访问一个网站的时候，同时还会向服务器请求“/favicon.ico”这个URL，目的是获取...
python中paramiko插件
10-13
这是pjython中最重要的一个插件，所以我们要先下载到csdn中
fastcache-1.1.0-cp38-cp38-win_amd64.whl
10-13
fastcache-1.1.0-cp38-cp38-win_amd64.whl
【图像检索】基于matlab颜色特征图像检索（含直方图距离）【含Matlab源码 4145期】.md
10-13
CSDN Matlab武动乾坤上传的资料均有对应的代码，代码均可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 KNN图像检索、Hu不变矩图像检索、综合颜色和形状特征图像检索
【图像加密】基于matlab混沌结合小波变换图像加密【含Matlab源码 3223期】.md
10-13
CSDN Matlab武动乾坤上传的资料均有对应的代码，代码均可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 图像加密： DNA混沌图像加密、Arnold置乱图像加密解密、Logistic+Tent+Kent+Hent图像加密与解密、双随机相位编码光学图像加密解密 正交拉丁方置乱图像加密解密、RSA图像加密解密、小波变换DWT图像加密解密、混沌结合小波变换图像加密
基于Java的学生管理系统的实现与代码解析
10-13
本篇文章详细介绍了一个用 Java 开发的学生管理系统的设计方法与编码过程。系统包括添加、删除、查询以及列出所有学生的功能。具体讲述了从项目的建立配置开始，到定义存储基本属性和功能的 Student 类，然后实现业务处理核心——StudentManager 类的方法论，并介绍了作为程序入口的 Main 类中交互界面设计的思想与执行流程控制。 适用人群主要是具有基础编程经验，希望提高自己的软件工程素养或深入掌握面向对象思想的学生和开发者。 使用场景：①学校或其他教育机构需要维护并快速操作学生资料的应用环境中；②对于初次尝试项目管理和团队合作的学生和新人程序员来说这也是个极佳的教学工具和动手练平台。 其他说明：此外还包括 Maven 构建工具的运用与本地数据文件的操作演示，有助于提升代码打包发布效率并增强开发者对文件读写的实际操控技巧的学习体验，最终形成可执行程序。
xxhash-1.4.4-cp36-cp36m-win_amd64.whl
10-13
xxhash-1.4.4-cp36-cp36m-win_amd64.whl
crontablllllll
最新发布
10-13
crontablllllll
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值