简介

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标签不遵从W3CHTML规范

而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包下载

应用到网站

将下载的Favicon包解压

将解压后的所有文件都复制到网站的运行目录,然后复制Favicon Generator上提供的规范HTML代码:

然后将代码拷贝到网站/页面的<head>标签前的meta标签处即可

对于和本站一样的Butterfly主题,只需要在主题配置文件里面搜索inject,粘贴调整下代码格式即可:

✅至此,我们网站个性的的Favicon图标设计、标准化完成,并且已经应用到我们网站了!

💛快来看看规范化后本站的个性的Favicon效果吧~

参考资料