第一种添加收藏夹的方式
- 图像必须是任何图像格式（ico、jpg、bmp、gif、png）的方形尺寸，才能在浏览器中正确显示。非方形尺寸的图像也可以使用。然而，这样的图标可能看起来不专业。
- 我们必须将图像转换为 .ico 格式。有许多在线工具可以做到这一点。
- 打开该工具，我们必须上传图像文件。然后，图像将自动转换。
- 下载图像并将 .ico 文件保存在计算机上。
- 将文件重命名为 favicon.ico，因为浏览器只会自动识别这个名称。
- 将文件上传到文件所在的主机目录。
- 当 favicon.ico 文件上传后，浏览器会自动选择它并在浏览器中显示图像。
第二种添加收藏夹的方式
- 图像必须是任何图像格式（ico、jpg、bmp、gif、png）的方形尺寸，才能在浏览器中正确显示。非方形尺寸的图像也可以使用。然而，这样的图标可能看起来不专业。
- 将文件上传到文件所在的主机目录。
- 最后一步是在代码中指定要用作收藏夹图标的图像。
将以下链接添加到 <head> 部分：
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
如果我们没有看到新的图标，请清除浏览器的缓存并重新启动它。
在标题列中添加图像的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<h1 style="color: #1c98c9;">
onitroad icon
</h1>
<p>
onitroad icon added in the title bar
</p>
</body>
</html>
结果
图标必须具有以下特征：
- Favicon.ico 是默认名称。
- 尺寸应为 16×16、32×32、48×48、64×64 或者 128×128 像素。
- 颜色应为 8 口、24 口或者 32 口。
根据图标格式，必须更改 type 属性：
- 对于 PNG，请使用 image/png。
- 对于 GIF，请使用 image/gif。
- 对于 JPEG，请使用 image/gif。
- 对于 ICO，请使用 image/x-icon。
- 对于 SVG，请使用 image/svg+xml。
<link rel="icon" href="favicon.gif" type="image/gif">
对于不同的平台，favicon 大小也应该改变：
| Platform | 名称 | rel值 | Favicon大小 |
|---|---|---|---|
| Google TV | Favicon.png. | icon | 96×96. |
| Opera Coast | Favicon-Coast.png | icon | 228×228. |
| Ipad Retina, iOS 7 or later | Apple-Touch-icon-152×152-precomposed.png | Apple-Touch-icon-precomposed | 152×152 |
| Ipad Retina, iOS 6 or later | Apple-Touch-icon-144×144-precomposed.png | Apple-Touch-icon-precomposed | 144×144. |
| Ipad Min, first generation iOS 7 or later | Apple-touch-icon-76×76-precomposed.png | Apple-Touch-icon-precomposed | 76×76. |
| Ipad Mini,first generation iOS 6 or previous | Apple-Touch-icon-72×72-precomposed.png | Apple-Touch-icon-precomposed | 72×72. |
| Iphone Retina, iOS 7 or later | Apple-touch-icon-120×120-precomposed.png | Apple-Touch-icon-precomposed | 120×120. |
| Iphone Retina, iOS 6 or previous | Apple-Touch-icon-114×114-precomposed.png | Apple-Touch-icon-precomposed | 114×114 |
对于 iOS 操作系统版本 1.1.3 或者更高版本的 Apple 设备以及 Android 设备，我们可以使用 Safari 共享表中的添加到主屏幕按钮在其主屏幕上创建显示。
针对不同平台，在文档头部添加链接。
通过以下方式将其添加到代码中：
<!-- default favicon --> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <!-- wideley used favicon --> <link rel="icon" href="/favicon.png" sizes="32x32" type="image/png"> <!-- for apple mobile devices --> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152"> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120"> <!-- google tv favicon --> <link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">
大多数在标题列中添加图标或者图像徽标。
图标徽标也称为收藏夹图标。
Favicon，也称为 URL 图标、选项卡图标、快捷方式图标、图标或者书签图标，是包含一个或者多个与特定或者网页相关联的小图标的文件。
Favicon 用于选项卡的左上角。
图标很有吸引力，对用户参与很有用。
W3C 标准化 HTML 4.01 建议中的图标。
标准实现在文档的 <head> 部分使用带有 rel 属性的 <link> 元素，用于指定文件格式、文件名和位置。
该文件可以具有任何图像文件格式（ico、png、jpeg、gif）并且可以位于任何目录中。
下面介绍了两种添加收藏夹图标的方法。
日期：2020-06-02 22:15:04 来源：oir作者：oir