使用 JavaScript 更改网站的 Favicon

在本文中，将会学习到如何使用 JavaScript 更改网站的 Favicon。Favicon 是浏览器标签页左边显示的小图标，也可以显示在书签栏以及浏览器地址栏中。

步骤

以下是使用 JavaScript 更改favicon的步骤：

1. 创建一个新的图标文件。图标文件必须是 16x16 像素的，可以是 .ico、.png 或 .gif格式。
2. 找到网站的 head 元素。可以使用以下代码获取：

const head = document.getElementsByTagName('head')[0];

3. 创建一个新的 Link 元素，用于更改网站的 Favicon。可以使用以下代码创建：

const link = document.createElement('link');

4. 设置 Link 元素的属性。应该设置以下属性:

• rel: 必须设置为“shortcut icon”，表示这是一个网站的 Favicon
• type: 图像文件的 MIME 类型，例如“image/png”或“image/x-icon”
• href: 新图像文件的 URL 或路径。

link.rel = 'shortcut icon';
link.type = 'image/png';
link.href = 'path/to/new-favicon.png';

5. 将 Link 元素添加到 head 元素中：

head.appendChild(link);

6. 完成，网站的 Favicon 已经更改。

示例代码

以下是示例代码：

const head = document.getElementsByTagName('head')[0];
const link = document.createElement('link');
link.rel = 'shortcut icon';
link.type = 'image/png';
link.href = 'path/to/new-favicon.png';
head.appendChild(link);

结论

本文介绍了如何使用 JavaScript 更改网站的 Favicon。Favicon 可以帮助您的网站在浏览器标签页、书签栏和地址栏中显示。使用这种技术，您可以在需要更改网站图标时，动态地更改 Favicon。