HTmL设置浏览器标题前面的图标shortcut icon

最新推荐文章于 2023-12-16 17:21:28 发布

原创最新推荐文章于 2023-12-16 17:21:28 发布 · 1.1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在HTML中设置浏览器标题前面的图标，包括使用`<title>`标签定义页面标题，以及添加`<link>`标签指定 favicon 图标。推荐使用16x16或32x32像素，8位或24位色的PNG、ICO或GIF格式图标，以确保兼容大多数浏览器。同时，提到将favicon.ico文件直接放在WEB根目录下是不推荐的做法，因为这不符合互联网规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、设置标题使用title标签
<title>xxx股份有限公司</title>
2、设置标题前面的图标
建议包含以下两行HTML代码:

<link rel="shortcut icon" href="favicon.ico" /> 
<link rel="icon" href="animated_favicon.gif" type="image/gif" />

只有第一行是必须的，因为“shortcut icon”字符串将被多数遵守标准的浏览器识别为列出可能的关键词（“shortcut”将被忽略，而仅适用“icon”）；
而Internet Explorer将会把它作为一个单独的名称（“shortcut icon”）。
这样做的结果是所有浏览器都可以理解此代码。
只有当希望为新浏览器提供另一种备用图像（例如动画GIF）时，才有必要添加第二行。
这里的favicon建议是16*16或者32*32的，必须是8位色或者24位色的，格式必须是png或者ico或者gif。
16*16/32*32 且 8位或24位色且 png/ico/gif。
另一种实现favicon的方法是把名为favicon.ico的图片放在WEB根目录下。这种方法不推荐，因为这种方法违反了互联网规范，这个图片的访问是没有被授权的。