关于生成网站favicon图标 - 也许你不知道的事

无道 2019-08-16 0 条评论 教程相关 阅读499 手机阅读

favicon是什么?

favicon

如上图就是favicon。

我相信肯定有不少人认为:网站图标不就一个favicon.icon就完了吗?

其实不然,这里面有多学问。

下面慢慢道来。

格式问题

1、常见的就是favicon.ico 也即.ico格式。

2、第二种也就是png。


类型的图标所有桌面浏览器都支持,包括以前的IE浏览器。

png格式就是现代主流浏览器都支持的一种格式。【包括IE11,Chrome, Firefox】

所以我们网站为了较好的兼容性和现代化,最好将两种格式的一起使用

尺寸问题

favicon

首先,规格是n*n是没问题的。看网上的一些转换网站,可以看出,一般有16x16,32x32,48x48,64x64,128x128这几个尺寸。

尺寸问题

微软官方是推荐把16×16, 32×32 以及 48×48这几个尺寸的图标整合在favicon.ico中的。

然后在HTML使用

<link rel="icon" href="/favicon.ico" type="image/x-icon">

当然,默认并且推荐的做法是吧favicon.ico文件放到网站根目录下。

Png

现代化浏览器更推荐png图标用作favicon

通常期望的尺寸是 16×16, 32×32。当然,其实大一点更好,想16x16过于小了。在一些平台的浏览器下显示鲜果肯定差强人意。

我们可以设置sizes来告诉浏览器此图标的大小:

<link rel="icon" type="image/png" href="./xin-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="./xin-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="./xin-64.png" sizes="64x64">
<link rel="icon" type="image/png" href="./xin-128.png" sizes="128x128">

比如以本站【迷思雨】为例,我准备了不同的尺寸来满足不同平台和浏览器的要求。

不同favicon尺寸

抓包看出,谷歌Chrome浏览器默认找的是32x32的尺寸:

Chrome favicon尺寸

那我们不是做个favicon.ico图标都要做很多张??

当然没必要,有网站可以在线生成favicon【不仅是png生成ico还生成了html代码哦】

在线生成

网站:https://realfavicongenerator.net/

在线生成favicon网站

而我们只需要准备一张260x260的png格式的图片即可。

比如我这里准备一张260x260的png图片:

260x260图片

1、上传

上传图片

2、调整参数

调整参数

调整参数2

3、点击生成

截图-1565963814

4、下载文件部署

下载文件部署

5、下载的文件示例

下载的文件示例

可以看出,这里包含了许多格式的图标,并且代码都是生成好了的,我们只需用即可。

并且,该网站是免费的!!!!

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 2019-08-16 22:03
这篇文章还没有评论呢~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生,一个儿子~ 愿你我都被世界温暖以待
迷思爱 公众号

新建了个公众号,会不定期分享一些小玩意,有提升效率的办公软件、有一些黑科技的软件、或教程等等。

爷~,要不关注下~~