教你如何添加网站Favicon图标

Favicon图标也就是当你打开网站,在地址栏显示的图标。那么当你搭建好网站需要更换你自己的网站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">

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

步骤1:重命名Favicon名称

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

步骤2:上传Favicon文件

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

步骤3:测试

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

步骤4:调试

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

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

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

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

👉 Favicon图标有什么作用?

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

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

ICO – favicon.ico

最常见的favicon图标格式是 ICO、PNG 和 SVG,但对于特定的浏览器或设备还有其他格式。ICO 文件格式由 Microsoft 开发,是 favicon 的原始文件格式。该格式是独一无二的,因为它允许在同一个文件中包含多个小图像。这是最大的优势,因为 ICO 格式(16×16、32×32 和 48×48 像素)的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 格式,推荐的尺寸为 16×16、32×32 和 48×48 像素。
对于 PNG 格式,推荐的尺寸为 16×16 和 32×32,不过浏览器可以兼容任何方形 PNG 图像。

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

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
时光建站

解决网站开启https后地址栏小锁图标显示灰色警告

2022-8-6 20:44:13

时光建站未分类

网站使用svg格式图片logo不显示解决方法

2022-11-9 20:52:44

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索