怎样给自己网站加上favicon.ico图标?

原创 admin  2020-06-11 06:38 
摘要:

我们先来认识下favicon,它是英文Favorites Icon的缩写,顾名思义,其本意是让浏览器的收藏夹中除显示相应的文字标题外,还能以图标的方式区别不同的网站。一般业界中文俗称站标,现在多数浏览…

我们先来认识下favicon,它是英文Favorites Icon的缩写,顾名思义,其本意是让浏览器的收藏夹中除显示相应的文字标题外,还能以图标的方式区别不同的网站。一般业界中文俗称站标,现在多数浏览器都已支持直接在窗口标签上或地址栏中显示站标。一个好的网站想在推广方面取得成功,不仅需要良好的页面设计、令人印象深刻的网站Logo,也应该有独树一帜的favicon站标。今天我们就针对新手站长来探讨一下,如何为自己网站添加favicon.ico站标?

实际上favicon.ico就是一个特殊格式的图片,按照既定规则准备好这样的图片放到网站,浏览器就能识别并显示出来,网站站标favicon.ico的尺寸通常是64X64、48X48、32X32像素这几种规格。既然是图片,那么我们首先就需要用制图软件设计出来,要求高的话还可以请专业设计人员制作,有的制图软件可以直接保存为.ico格式,如果不能也可以通过在线转换工具将jpg、png等格式转为ico格式。

20171108100751.png

现在我们来说一下规则,一般情况下浏览器只能识别名为favicon.ico的图标文件作为站标,且必须是真实的.ico格式(扩展名),只改扩展名可能导致浏览器无法识别。将favicon.ico文件放在网站根目录下(到底什么是网站根目录?),也就是网站首页文件(如index.html/index.php等)所在目录(注意与模板目录区别开),浏览器就能自动读取。如果需要考虑兼容相对老旧浏览器,则可以在网站首页或头部模板文件head部分加上如下声明代码:

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

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

以上代码需加在</head>标签之前,第一行为必须且所有浏览器都支持,第二行仅在需要区别IE和标准浏览器并使用不同图标时使用,使用声明代码后,站标图片文件则可以不必限于favicon.ico名称,使用GIF 文件type应为 image/gif, PNG 文件则为 image/png,也可以放在其它目录,同时也可以为不同目录的首页文件各自声明不同的站标。

随着老旧浏览器的淘汰,现在各种较新版本浏览器基本都能自动识别网站根目录下的favicon.ico站标,所以也有很多站长已不再使用声明代码这种方式,而且大家比较公认的通常做法也是将favicon.ico文件上传到网站根目录,这种方式对同一域名下全站目录有效。

对于站标到底要不要放根目录、要不要起另外的名称,可以参考看看以下知名网站的站标:

https://www.baidu.com/favicon.ico

https://www.taobao.com/favicon.ico

http://www.qq.com/favicon.ico

http://www.163.com/favicon.ico

http://www.sina.com.cn/favicon.ico

下面我们顺便讲一下Apple设备私有的apple-touch-icon图标属性:

<link rel="apple-touch-icon" href="appleicon.png">

添加该语句后,在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上,方便用户从主屏中随时点击访问,相当于Windows系统的桌面快捷方式。实现方法是在HTML文档的<head>标签加入以上代码即可。

apple-touch-icon 标签支持sizes属性,可以用来放置对应不同的设备:57×57(默认值)的图标对应320×640的iphone老设备、72×72对应ipad、114×114对应retina屏的iPhone及iTouch、ipad3对应144×144的高分辨率。

所以,理论上完善的写法是:

<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png">

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png">

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-ipad3-144.png">

但实际上很多网站并没有用到sizes属性,而是只预置了一种尺寸的图标让其自动缩放。虽然苹果官方都用的png图片做说明,但实际测试jpg格式也可用(不推荐),图片无需做圆角和高光效果,同Native App一样,系统会自动为图标添加圆角及高光。如果不想系统对图标添加该效果,可以用apple-touch-icon-precomposed代替apple-touch-icon,为了独具特色就可以自己做圆角和高亮效果了。

如果您的网站是由ZBlogPHP程序架构,那么以上知识大致读读就好,这里安利一款由本站站长制作的《Favicon站标设置》免费插件,不必修改模板代码就可以轻松实现站标的设置和添加操作,可以在自己网站后台应用中心搜索“Favicon站标设置”找到插件直接下载启用。

本文地址:http://www.seohcs.com/2020/06/11/%e6%80%8e%e6%a0%b7%e7%bb%99%e8%87%aa%e5%b7%b1%e7%bd%91%e7%ab%99%e5%8a%a0%e4%b8%8afavicon-ico%e5%9b%be%e6%a0%87%ef%bc%9f/
关注我们:请关注一下我们的微信公众号:扫描二维码我的 APP的公众号,公众号:pangfeizhai
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

发表评论


表情