将 favicon 添加到下一个 js 静态站点 - Html

网站的 favicon（即网站图标）是网站最基本的标识之一，通常出现在浏览器的地址栏、书签和标签页上。在本文中，我们将介绍如何将 favicon 添加到您的下一个基于 HTML 和 JavaScript 的静态网站中。

1. 创建 favicon

首先，您需要准备一个 favicon。通常情况下，favicon 是一个 ico 格式的图片文件，但也可以是其他格式（如 PNG 或 SVG）。您可以使用在线图标生成器（如 Favicon.io）或使用图形编辑软件（如 GIMP 或 Photoshop）来创建自己的 favicon。

将相关的图标文件放在您网站的根目录下，并将其命名为 "favicon.ico"。

2. 添加 favicon

在您的 HTML 文档的 "head" 标签中，添加以下代码来引用您的 favicon：

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

这将告诉浏览器在地址栏、标签页等位置显示您的网站图标。

如果您的网站可能被添加到用户的书签中，您还可以添加以下代码：

<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">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">

这将确保用户的书签和主屏幕上的网站图标具有正确的尺寸和格式。

3. 部署 favicon

最后，将您的 favicon 文件上传到您网站的根目录中，并重新加载您的网站以确保图标正确显示。

至此，您已成功将 favicon 添加到您的下一个基于 HTML 和 JavaScript 的静态网站中。

参考链接：

• Favicon Generator
• HTML link rel="shortcut icon" syntax
• Adding a Favicon to A Website