制作好favicon.ico后,需要在网页HTML中添加正确的引用代码,浏览器才能显示图标。本文详解favicon HTML代码的完整写法,兼容所有浏览器。
基础favicon HTML代码
最常用的favicon引用代码,放在
标签内:<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
其中rel="icon"是HTML5标准写法,rel="shortcut icon"是兼容老版本浏览器的写法,两个都加上最稳妥。
不同格式的favicon声明
现代浏览器支持PNG、SVG等格式的favicon:
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
不同尺寸favicon声明
可以为不同设备指定不同尺寸的图标:
<link rel="icon" sizes="16x16" href="/favicon-16.png">
<link rel="icon" sizes="32x32" href="/favicon-32.png">
<link rel="icon" sizes="192x192" href="/favicon-192.png">
Apple Touch Icon声明
iOS设备添加到主屏幕时显示的图标:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png">
Windows磁贴图标
Windows系统磁贴显示图标:
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#ffffff">
favicon制作建议
虽然可以用多个PNG文件,但建议生成一个多尺寸favicon.ico最方便。用图捷智转PNG转ICO工具上传一张PNG,自动生成包含16x16、32x32、48x48等多尺寸的favicon.ico。
需要制作网站favicon图标,使用图捷智转PNG转ICO在线工具,一次生成多尺寸ICO文件,兼容所有浏览器。