网站图标 Favicon 的那些事

发表于 更新于 分类于 ， ， 本文字数： 2.4k 阅读时长 ≈ 2 分钟

Rain

自从用 Hexo 建站后，总想把 hexo-theme-next 的默认 Logo N换掉，直到今天才终于完成了它。
下午我花了点时间亲自做了个 H 的 Logo。在自制 Logo 的过程中才发现一个简简单单的网站 Logo 知识点也不少。特此记录下来，以做备忘。

  • 原来的图标N：
  • 现在的图标H：

起初一直纳闷 hexo-theme-next 的 Logo 尺寸为什么只有 16x16 和 32x32 的，我还自大的认为 Logo 的尺寸越大在浏览器中显示的越清楚，直至 Google 下，才发现大错特错。

原来 Logo 也是要尺寸和大小限制的。下面就从 Logo 是什么开始讲起。

一、图标介绍

Favicon 是 favorites icon 的缩写，亦被称为 website icon（网页图标）、page icon（页面图标）或 urlicon（URL图标）。Favicon 是与某个网站或网页相关联的图标。

Favicon 显示在浏览器的地址栏、标签或者收藏夹上，是展示网站个性的缩略 logo 标志，也可以说是网站头像,目前主流的浏览器都支持 favicon.ico 图标，如果要让网站看起来更专业、更美、更有个性，favicon.ico 是必不可少的。
现在的浏览器也支持 PNG（便携式网络图片）格式，少部分还支持 GIF（图形交换格式）动画图像格式（如 Firefox）。

Firefox 分原版(英文版)和中文版。中文版被国人添加了好多不干不净的东西，至于原因嘛你懂的。所以请下载英文版的Firefox再安装中文语言插件。至于操作步骤请善用搜索。

1999年3月，微软发明了 Favicon，用于在IE的收藏夹上显示网站个性图标。
1999年12月，W3C将 Favicon 在 HTML 4.01 中标准化。
2000年1月，XHTML 1.0 标准中也包含了它。XHTML 中规定了 Favicon 在HTML页面中的声明方法。
2003年，Mozilla 发布 Firefox 0.9.6 扩展了 Favicon 的图片格式，当时已经提供了对 PNG/GIF/JPEG 的支持。
此后其它浏览器跟随着Firefox也都添加了此功能，现在所有的浏览器都支持 ICO/PNG/GIF/JPEF 格式的 Favicon。

Firefox 还添加了对 GIF 动画/SVG 的支持。目前属它支持的图片格式最多。

二、部署方法

最初，定义一个 favicon 的方法是将一个名为 favicon.ico 的文件置于 Web 服务器的根目录下。

后来 favicon 纳入XHTML标准之后，开始在HTML页面的<head>里使用<link>元素来声明它的格式、名称与路径。这样，任何一个适当大小的（16×16 像素或更大）的图像都可以用作 favicon。

例子：

1
2
3
4
5
6
<head>
...
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/x-icon"　/>
...
</head>

如果，你想展现个性，也可以做一个动态的favicon，申明方法如下：

1
<link rel="icon" href="/favicon.gif" type="image/gif" />

对于 GIF 动画格式，现在已知的只有Firefox支持，其它浏览器请自行测试。

三、制作方法

1. 懒人做法

如果你不想设计，不想做图，可以自行在 Google或百度搜索网页图标。

2. 自己制作

个性，是一种生活态度，所以大部分人还是会选择自己设计一个网站图标。可以使用 PhotoShop 或其它制图工具进行设计。

这里，我使用的在线SVG制作工具，制作完成后可以保存为svg格式，也可以导出为png格式。

SVG(Scalable Vector Graphics)，即可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发。
SVG有3种类型的图形对象：矢量图形（由直线和曲线组成的路径）、图象(image)、文本(text)。

  • 优点，为体积小、制作方便、压缩性高、放大后不图像不失真。
  • 缺点，它的文本对象，因计算机的字库不同，所以存在字体变形的问题。

为了解决SVG的缺点，我们将制作完成的SVG导出为PNG格式来给字体定形，然后再将PNG转换成路径格式的SVG。

这里我们使用在线网站vectorizer来将PNG转换成路径格式的SVG。

PNG图标(已压缩，5.71KB) SVG图标(体积，2KB) 备注
logo.png logo.svg 原图
png svg 各自放大500%

四、图标大小

许多人并不清楚，网站图标到底做成多大才合适，16x16？还是 32x32？甚至是 128x128？？

很多人想当然的认为尺寸越大越清晰，展示起来越给力！比如博主自己……

根据实际测试，16x16 和 32x32 的网站图标，实际展示在浏览器标签栏的效果也没有很明显的区别。超过 32x32 的 favicon.ico 图标，不但效果没有明显改变，还可能会导致某些浏览器无法显示。

最主要的是谷歌网站图标缓存服务器，不会缓存超过 16kb 的图标。

所以，对于网站 favicon 图标的大小，建议大家选择 16x16 或者 32x32，再大也是完全没有必要的。效果不见涨，还可能会影响网站加载速度。

References:

  • 维基百科 Favicon
  • 关于网站图标favicon.ico那点事儿
  • 网页中favicon.ico图标的作用、尺寸、制作