网站图标favicon的标准输出规范
在建站过程中,网站 favicon 的标准输出代码是:
<link rel="icon" type="image/x-icon" href="favicon.ico">
或
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
这两种代码都是有效的,区别在于:
- rel=”icon” 是标准的 favicon 链接关系,适用于大多数浏览器。
- rel=”shortcut icon” 是微软 Internet Explorer 浏览器特有的 favicon 链接关系,适用于旧版本的 IE 浏览器。
建议同时使用这两种代码,以确保 favicon 在不同浏览器中都能正常显示。
注意:favicon 文件通常命名为 favicon.ico,并放置在网站的根目录下。
另外,为了支持不同设备和浏览器的 favicon 显示,你可以添加以下代码:
<!-- For Apple devices -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<!-- For Windows devices -->
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-TileColor" content="#ffffff">
<!-- For Android devices -->
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
希望以上信息可以帮到您,如有建站需要可以联系我们 🌍✉️ 微信 sheshuiapp