网站Favicon知多少

简介

Favicon全称是：favorites icon，也被称作“website icon”、“page icon”、“urlicon”，它是与网站/网页相关联的图标，网站管理员（设计者）可以通过多种方式创建这种图标，绝大部分现代浏览器（甚至是IE11）都支持这种图标，一般它显示在浏览器页面标签网站名称前面、书签列表网站名称前面，除此外，它还显示在网站访客为下次快速访问而给网站创建的快捷方式上（桌面，iOS和Android等平台都支持此操作）。

最开始，常见的定义一个网站的Favicon的方式是在网站运行目录放置一个一般为ico格式的文件（一般名称为：favicon.ico），这也是现在较多网站管理员/设计者使用的。这种方式最为简单，但是缺点是：对于桌面和移动平台的不同浏览器可能由于一致的图片尺寸（只有一张固定尺寸的ico图标），这个Favicon图标可能在这个平台看起来还可以，但是在另外一个平台确显示很模糊！

后来，开始使用一种更灵活的方法：在网站/页面的HTML文件的<head>标签前通过link组件来指示Favicon所在的位置，并且对于桌面和移动平台不同的的浏览器可以显示不同尺寸（16x16、32x32甚至更多）的Favicon图标，这种方式除了支持ico格式的图标还支持PNG格式的图片。

开始制作

💢如果你和我一样：只精通PS、AI等软件的安装与卸载，那如何简单的创建自己的个性化、规范化的Favicon呢？

创建图标

首先我们需要设计、创建自己的个性化 Logo，这里推荐一个很不错的在线网站：

Evo在线设计Logo：https://www.designevo.com/cn/apps/logo/

打开网站，通过简单的图形、背景、文字以及颜色的搭配你就可以创建自己的个性化 Logo

设计完成后点击下载图标，无需氪金，我们点击免费下载一个低质量的logo

随便用Facebook、Google等账号登陆下就可以了

点击同意并下载：

下载后的文件是一个压缩包，解压后有三个文件：

至此我们的图标设计好了，但因为没有氪金生成高分辨率的Logo，可能清晰度不是很令人满意。别急，下面我们来解决它！

AI放大

这时候我们需要另一个网站：

AI图片无损放大：https://bigjpg.com/

打开网站，把你之前下载Logo压缩包解压，上传PNG格式的图片点击开始来进行无损放大操作：

这个网站也有氪金选项，但是大多数情况下，选择卡通/插画的图片类型、放大倍数4x、降噪程度最高已经完全够用了

参数设置好了后点击确定，等待图片在线处理无损方大完成…

什么图片放大效果最好？

网站Q&A说明： 动漫、插画图片的放大几乎可以说是完美的。将小图片放大后，无论是色彩、细节、边缘，效果都很出色，同时也兼容普通的照片放大。

所以你的Logo在设计时注意不要有太过于复杂的元素，并且图片中各元素色彩要鲜明一点最好🤞

前后对比

下面是我在写本文的时候把原来的Logo图片和AI无损放大后缩放到差不多大小的对比：（左：原图，右：放大后）

进行标准化

图标设计已经完成了，一般的直接把这个图片转换成ico格式丢网站作为Favicon了，那本文就没有写（shui）的必要了🤔

Favicon功能最早由微软创设，而微软自家的IE浏览器默认对所有网站都请求Favicon，但微软支持的link标签不遵从W3C的HTML规范。

而Mozilla浏览器通过另一种遵从Web标准的方式来支持Favicon——通过rel="icon"允许网站管理员/设计者添加任何支持的图像格式作为网站的Favicon（如：<link rel="icon" type="image/png" href="/path/image.png" />），后来大多数主流浏览器都对此功能添加了支持。

下面我们通过另一个在线网站生成标准的全尺寸Favicon以及在自己的网站使用Favicon：

Favicon Generator：https://realfavicongenerator.net/

打开网站，上传你的Favicon图片：

接下来可以预览自己的Favicon在不同浏览器和浏览平台上面的显示效果：

你可以调整自己的Favicon在不同平台上不同浏览器的显示效果，并且可以得到即时预览，调整完成后，如果你感觉很满意了，就可以下拉到网站最下面，点击Generate your Favicons and HTML code，生成你的多尺寸Favicon图标包和HTML引用代码

完成后，选择适合你的网站的Favicon包下载