浏览器-网页标题的图标

最新推荐文章于 2021-08-04 20:07:06 发布

原创最新推荐文章于 2021-08-04 20:07:06 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

浏览器专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何为网页添加图标，包括图标格式选择、ICO文件制作、放置位置及HTML代码插入方法。

为网页标题添加图标

在这里插入图片描述

一、图标格式

一般网页标题前的小图标是 ico 格式，但其实png，jpg的格式都可以，而且浏览器会自动帮你把图片尺寸缩放到16 *16。不过.ico格式体积要小很多，另外注意透明度的问题，jpg和bmp格式的图片会失去透明度，所以还是建议转一下。
ico 类型的图标所有桌面浏览器都支持，包括旧版本的IE浏览器。但它的必须是正方形，桌面浏览器以及苹果iOS是不支持非正方形的图标的。
一般推荐使用 16*16 大小并且不超过16色的 ico文件，这是为了保证兼容性，在哪个地方都可以显示。
这个图标的命名要求必须为favicon.ico。把这个图标放到网站的根目录下就可以了，页面加载时浏览器会自动检索这个图标然后把它加到标题上。

二、转化 ico 文件

将需要的图标存为png格式，背景为透明
将图片转换成ico格式 - 可通过在线转换网站进行格式转换

三、把图标放到网站根目录

以 React 项目为例
在这里插入图片描述
与 index.html 同级

四、在 html 文件中插入ico图标

网站标题左侧显示 <link rel=" icon" href="favicon.ico" />
收藏夹显示 <link rel="shortcut icon" href="favicon.ico" />

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-ico" />
    <link rel="icon" href="favicon.ico" type="image/x-ico">
  </head>