博客 / 建站

网站图标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

评论留言

您的邮箱地址不会被公开。 必填项已用 * 标注