设置网页title旁边的小图标详解

超翔之逸

已于 2022-11-15 13:06:32 修改

阅读量1.1w

点赞数 7

分类专栏： Django学习 Bootstrap学习文章标签： django html5

于 2022-03-20 23:59:51 首次发布

本文链接：https://blog.csdn.net/Protinx/article/details/123624961

版权

Django学习同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

Bootstrap学习

2 篇文章 0 订阅

订阅专栏

正式写一个网页时，title旁边一般会有一个独特的小图标，如何自己写这样一个图标呢？

其实很简单的，在html文件中的<head></head>标签中加上：

<link rel="icon" href="img/logo.ico" type="images/x-ico" />

这样一行代码就可以了！

注意：图片的后缀名必须要是 .ico 格式的。

推荐个免费自动生成.ico格式文件的网站：Favicon.ico图标生成器 | 一键免费制作ico图标 - LOGO神器 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUHJvdGlueA==,size_20,color_FFFFFF,t_70,g_se,x_16

如何使用Favicon图标生成器？

你可以通过字母或者图片两种方式制作Favicon图标

字母Favicon：直接输入字母（支持汉字）后点击生成按钮就能看到多个基于字母（或者汉字）的图标样式。选择直接下载或者继续编辑图标的字体，颜色，或者背景图形。

图片Favicon：如果您已有图片或者logo，可以点击图片→ICO的链接来在线生成你的Favicon图标。

如何安装Favicon图标？

点击下载并选择Favicon格式，你将获得Favicon图标的zip打包文件包含：

android-chrome-192×192.png
android-chrome-512×512.png
apple-touch-icon.png
favicon-16×16.png
favicon-32×32.png
favicon.ico
site.webmanifest

直接将Favicon文件上传到你的网站服务器根目录，在网页的 head 部分复制粘贴HTML代码即可。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

Favicon.ico图标常见问题

👉 什么是Favicon图标？

Favicon也称为URL图标或网站图标。这些图标非常小（通常为16×16或32×32），并会显示在浏览器窗口和书签中网站网址的旁边，让访问用户可以轻松在其打开的窗口中识别你的网站。

👉 如果本地有ico图标文件，如何添加网站Favicon图标？

步骤1：重命名Favicon名称

将本地图标名称修改为 favicon.ico . 文件的名称非常重要，因为Web 浏览器会自动查找具有该名称的文件。

步骤2：上传Favicon文件

将Favicon图标上传到网站的主目录或根目录，默认位置为 yourwebsite.com/favicon.ico 同样浏览器会首先在网页所在目录默认位置寻找favicon.ico文件。

步骤3：测试

Favicon图标安装成功后，将在浏览器的地址栏上显示出来。也可通过添加为网站书签的方式，来测试图标是否正确展示。

步骤4：调试

为什么Favicon图标安装后没有显示？

通常情况为，图标命名或安装位置错误。确保你的favicon图标在以下位置能够访问到 http://websitename.com/favicon.ico

为什么显示的Favicon图标不是最新版本？

这是由于浏览器缓存问题，有时会显示旧版本，在强制清除浏览器缓存后，就能展示最新上传的favicon图标。

👉 Favicon图标有什么作用？

Favicon图标用于帮助用户更轻松地在浏览器、书签、快捷方式和地址栏中直观地识别出你的网站，也让用户更容易在他们的浏览器上保存和记住你的网站。作为经常被忽视的主要品牌元素，一个好看的Favicon图标可以让你的网站在众多竞争对手中脱颖而出。

👉 常见的favicon图标格式有哪些？

ICO - favicon.ico

最常见的favicon图标格式是 ICO、PNG 和 SVG，但对于特定的浏览器或设备还有其他格式。ICO 文件格式由 Microsoft 开发，是 favicon 的原始文件格式。该格式是独一无二的，因为它允许在同一个文件中包含多个小图像。这是最大的优势，因为 ICO 格式（16x16、32x32 和 48x48 像素）的favicon图标所需的小图标可以独立缩放和优化。在小尺寸下，你不能依靠浏览器以最佳方式自动调整图标大小。所有浏览器都支持 ICO 格式，它是 IE5 ～IE10 唯一支持的格式。

PNG - favicon.png

PNG 格式是一种很棒的格式，因为它是大多数人熟悉的格式，并且不需要任何特殊工具来创建。随着现代屏幕的高分辨率，小分辨率的小图标尺寸的原始问题不再存在。对于支持 PNG favicon 图标格式的浏览器，通常在浏览器选项卡或书签栏中显示的 favicon 的质量将高于 ICO 格式。PNG 格式的缺点是它与 IE5 ～ IE10 不兼容。

SVG - favicon.svg

SVG 格式优于 PNG 和 ICO 格式，但大多数浏览器都不支持。SVG 文件非常轻量级，并且可以无限扩展，图像质量高，而且没有大图片加载消耗时间长的问题。目前只有 Chrome、Firefox 和 Opera 支持 SVG 格式的网站图标。

👉 常见的favicon图标大小有哪些？

首先，你的favicon图标必须是方形的，由于桌面浏览器和IOS不支持其他形状的图标。
对于 ICO 格式，推荐的尺寸为 16x16、32x32 和 48x48 像素。
对于 PNG 格式，推荐的尺寸为 16x16 和 32x32，不过浏览器可以兼容任何方形 PNG 图像。

👉 Favicon图标会影响搜索引擎排名或SEO吗？

Favicon图标可间接帮助你优化搜索引擎（SEO）：有些搜索引擎会在搜索结果中显示你的 Favicon图标。一个吸引力的Favicon图标能够提高在这些搜索引擎上点击率（CTR）。此外，Favicon图标是建立品牌认知度和品牌专业度的必要条件，缺失Favicon图标可能会降低用户对网站的信任并增加跳出率。