专栏首页小狼的世界自定义地址栏与收藏夹中的图标

自定义地址栏与收藏夹中的图标

关于Favicon

favicon 在英文中有几个别名,叫做 shortcut icon,website icon,tab icon,URL icon,bookmark icon,对应中文来说也叫作网页小图标、网站缩略图或收藏夹图标、书签图标。这实际上就是与某个网站或地址关联的图标文件。如果网站上传了这个图标文件,用户使用浏览器(仅限于支持这个功能的浏览器)浏览时,就可以把图标显示在浏览器的地址栏中(有时也会显示在历史记录中),如果添加了收藏则收藏夹中也可以看到图标。现在支持标签页的浏览器,会将图标显示在标签上。对于移动终端,如果在系统中建立了网站的快捷方式,则可以使用图标来作为系统桌面的图标。

Favicon的历史

1999年三月,微软发布了Internet Explorer 5,是首款支持 favicon 的浏览器。最初,favicon 就是一个放在网站根目录下的名为 favicon.ico 的文件。主要使用在 Internet Explorer 的收藏夹中,如果网站被添加到收藏夹中,那么在地址栏中也会被显示出来。这么做还有一个用意就是统计有多少用户收藏了这个网站(可以在日志中看 favicon 请求的次数)。现代浏览器则不管用户是否收藏该网站,都会把图标显示在地址栏或页签中。参考资料中 Favicon诞生记 有关于 Favicon 产生之初的有趣故事,大家可以看一看。

Word Wide Consortium W3C在HTML 4.01(1999年)中将favicon定为标准,并且在稍后2000年1月份定为 XHTML 1.0的标准。与IE中限制了存放位置和文件类型不同,标准仅是规定了应当使用一个带有 rel 属性的链接元素在 head 区域指定favicon的文件和类型。

2003年,.ico 被第三方组织 Internet Assigned Numbers Authority IANA 注册在 MIME type image/vnd.microsoft.icon 中。

RFC5988 ,在2010年的HTML5标准中,明确了 rel="icon"的使用方法。<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 这种流行的用法明确了两个关系,一个作为 shortcut 快捷图标和 icon 图标。但是 shortcut 并非标准。在2011年的HTML标准中对此进行了解释

使用方法及浏览器支持

基本的 favicon 使用方法如下:

<link rel="shortcut icon" href="http://example.com/myicon.ico" />

也可以使用其他类型的文件格式,这需要对应的浏览器支持。如下:

<link rel="icon" type="image/png" href="http://example.com/myicon.ico" />

浏览器对于图片格式的支持

浏览器

ico

png

gif

jpeg

Edge

支持

支持

支持

Firefox

支持

支持

支持

支持

Chrome

支持

支持

支持

支持

IE

>5.0

>11.0

>11.0

不支持

Safari

支持

支持

支持

支持

设备支持

对于使用iOS的苹果(Apple)设备,以及部分安卓(Android)设备,可以使用 添加到主屏幕 Add to Home Screen(Web Clip) 功能在手机的主屏幕上添加一个自定义的图标。这个功能通过以下代码实现 <link rel="apple-touch-icon" ... > 。如果对应的 ico 文件没有找到,则会将网页的截屏显示在桌面上。图标的推荐尺寸随着显示设备的分辨率越来越高,已经从6060主键增加到了256256,对于iPad上的图标尺寸,也从7676一直增加。现在,移动端平台变得越来越庞杂,例如 Google TV 使用 9696 的尺寸、Chrome 网上商店需要 128*128 的图标。所以在定制尺寸的时候,我们需要考虑到底要支持哪些平台。

下面的声明就考虑了iPhone的不同版本:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

iOS系统会对icon文件进行优化,增加圆角、阴影,如果不希望系统做这些优化,则可以使用 <link rel="apple-touch-icon-precomposed" href="somepath/image.png" />

HTML5 规范

现在的HTML5规范推荐为图标指定不同的尺寸,使用方法为 rel="icon" sizes="空格分割的图标尺寸"。通过 type="file content-type"也可以指定多种文件类型,包括微软的 .ico 以及苹果的 .icns

动画图标

目前有Chrome、Firefox、Opera支持动画图标。

遭受的批评

由于总是需要到一个固定位置查找文件,favicon 有时会导致奇怪的页面加载缓慢问题以及日志中不必要的404错误。W3C并没有对rel属性进行标准化,所以诸如shortcut icon等关键词仍然被浏览器接收。

Favicons 经常会在针对HTTPS网站的 网络钓鱼(phishing) 或者 网络窃听(eavesdropping) 攻击中被使用。许多浏览器都会将 favicons 显示在浏览器地址栏的左边,而这里经常是用来显示在 HTTPS 网站的证书是否可信,通过使用一个类似的图片来欺骗用户让用户认为这是一个可信站点。一些如 SSLStrip 的中间人攻击工具也使用这种伎俩。为了识别这种伎俩,有的浏览器在Tab页签中显示 favicon ,在地址栏的最左边显示协议的安全状态。

在线制作的工具

鉴于所有浏览器都对 ico 支持良好,所以目前大部分的 favicon 还都是 ico 格式的。但是它的局限性越来越明显,对于新的浏览器而言,现在都倾向于用 png 图片。不管怎么样,如果想手工制作出满足这么多平台的图标来非常费时间,但是通过 Real Favicon Generator 网站,我们只需要上传一个至少70*70尺寸的图片上去,就可以生成种类丰富的图标。

参考资料:

  1. Favicon
  2. 教你制作完美的Favicon
  3. Real Favicon Generator
  4. Favicon诞生记
  5. 弄懂Favicon

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Bing Video 来了

    当中文的 MSN Video 还处于 beta 版的时候,美国的 MSN Video 已经开始向 Bing 融合了。看来微软真的是想要不断地加强 Bing 这个...

    大江小浪
  • 工作了这么久,文档管理这样做才最有效率

    今年以来,因为疫情的原因经常远程在家办公,很多工作中的文档无可避免的就保存在了家中的电脑上。在恢复现场办公后,又需要将家中电脑的文档与工作电脑中的文档合并起来。...

    大江小浪
  • Google File System 阅读笔记

    今天终于拜读了著名GFS的论文,大体上的设计思路是明白了,复杂的系统,其实用了很多简单的逻辑在里面,下面是记录的一些笔记:

    大江小浪
  • UWP 分享用那个图标

    在 UWP ,选的是第一个。很多用户不知道这就是分享,他们会想,这个按钮是其它的。

    林德熙
  • 如何快速提升PPT品质感?

    续上两期无聊的理论课后,这期开始我们的实践课。我们今天要学习的是,如何快速的提高幻灯片的品质感?话不多说,直接上两张图。

    卤代烃
  • 空心图标VS实心图标,你好哪一口?

    最近工作中遇到的一个问题引发了大家的讨论,就是在UI设计中,空心图标和实心图标应该在什么场景下使用?

    腾讯大讲堂
  • 从iOS 11看怎样设计APP图标

    苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相。新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了...

    奔跑的小鹿
  • 硬盘图标怎么改 修改本地磁盘图标的方法

    沈唁
  • iOS 图标图像 (官方翻译版)

    GuangdongQi
  • 干货!7个设计师必知的图标设计原理,收藏了!

    创建高质量的图标套组需要合适的方法,训练有素的眼睛,一些迭代和大量实践。下面,我将通过7个原则和大量实际示例来说明。最终目标是让你了解设计出优质图标的关键细节。...

    用户5009027

扫码关注云+社区

领取腾讯云代金券