网站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包下载
应用到网站
将下载的Favicon
包解压
将解压后的所有文件都复制到网站的运行目录
,然后复制Favicon Generator上提供的规范HTML
代码:
然后将代码拷贝到网站/页面的<head>
标签前的meta
标签处即可
对于和本站一样的Butterfly主题,只需要在主题配置文件里面搜索inject,粘贴调整下代码格式即可:
✅至此,我们网站个性的的Favicon图标设计、标准化完成,并且已经应用到我们网站了!
💛快来看看规范化后本站的个性的Favicon效果吧~