动态更改网站 favicon

2023-12-18 Web

动态更改网站 favicon

网站图标是小图标，可帮助用户在浏览器标签页和书签中识别您的网站。动态更改网站图标可以为用户的浏览体验增添个性化的触感。

像 Twitter、Reddit 和 GitHub 这样的大型网站已经开始根据用户偏好使用动态网站图标。例如，Twitter 在浅色模式下将其图标更改为蓝色鸟，而在深色模式下更改为白色鸟。Reddit 在深色模式下将其图标更改为黑色，而在浅色模式下更改为橙色。GitHub 根据用户的偏好将其图标从黑色的章鱼猫更改为白色的。

这些示例展示了动态网站图标如何使浏览更加个性化，并帮助用户轻松找到他们喜爱的网站。

在这篇文章中，我们将探讨如何根据用户的颜色方案偏好动态更改您的网站图标。

向网站添加网站图标

在我们根据用户的颜色方案偏好动态更改网站图标之前，首先需要向我们的网站添加一个网站图标。这可以通过在 HTML 代码的 head 部分中添加一个 HTML <link> 元素来轻松实现。

<head>
    <link rel="icon" href="favicon.png">
</head>

<head>
    <link rel="icon" href="favicon.png">
</head>

rel 属性用于指示我们添加的图标是一个网站图标，而 href 属性用于指定网站图标文件的位置。最好使用 .ico 或 .png 格式以获得更好的浏览器兼容性，尽管其他图像格式也是可接受的。

一旦您将此代码添加到您的网站的 HTML 中，用户将在其浏览器标签页和书签中看到您的网站图标。这是一个小但重要的细节，有助于使您的网站看起来更专业。

使用 JavaScript 动态更改网站图标

为了根据用户的颜色方案偏好动态更改网站图标，我们需要创建两个网站图标图像：一个用于浅色模式，另一个用于深色模式。您可以使用任何图像编辑软件创建这些图像，只需确保浅色模式的网站图标具有浅色背景颜色，而深色模式的网站图标具有深色背景颜色。

一旦您拥有这两个图像，我们可以使用 JavaScript 来检测用户的偏好并相应地更改网站图标。现代浏览器支持 prefers-color-scheme 媒体查询，该查询告诉我们用户是喜欢浅色模式还是深色模式。

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // 用户偏好深色方案
} else {
    // 用户偏好浅色方案
}

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // 用户偏好深色方案
} else {
    // 用户偏好浅色方案
}

我们可以创建一个函数，根据用户的颜色方案偏好设置网站图标 <link> 元素的 href 属性为正确的图像。

const setFavicon = () => {
    const favicon = document.querySelector('link[rel="icon"]');
    favicon.href = (window.matchMedia('(prefers-color-scheme: dark)').matches)
                    ? 'dark-mode-favicon.png'
                    : 'light-mode-favicon.png';
};
setFavicon();

const setFavicon = () => {
    const favicon = document.querySelector('link[rel="icon"]');
    favicon.href = (window.matchMedia('(prefers-color-scheme: dark)').matches)
                    ? 'dark-mode-favicon.png'
                    : 'light-mode-favicon.png';
};
setFavicon();

我们可以使用这个函数在用户更改偏好时更新用户的颜色方案偏好。

window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', setFavicon);

window
    .matchMedia('(prefers-color-scheme: dark)')
    .addEventListener('change', setFavicon);

除了像上面显示的基于 JavaScript 的解决方案外，现代浏览器提供了一种原生更改网站图标的方法。通过在您的 HTML 文件中使用不同的 <link> 标签，您可以为浅色模式和深色模式引用不同的网站图标。最棒的部分？这种方法不需要任何 JavaScript 代码。

<link href="light-mode-favicon.png" rel="icon" media="(prefers-color-scheme: light)">
<link href="dark-mode-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">

<link href="light-mode-favicon.png" rel="icon" media="(prefers-color-scheme: light)">
<link href="dark-mode-favicon.png" rel="icon" media="(prefers-color-scheme: dark)">

为了确保我们的网站在浅色模式和深色模式下看起来都很棒，我们为每个网站图标图像创建了两个单独的 <link> 标签。我们为浅色模式网站图标设置 media 属性为 (prefers-color-scheme: light)，而深色模式网站图标设置为 (prefers-color-scheme: dark)。

当有人访问我们的站点时，他们的浏览器将根据其颜色方案偏好自动选择正确的网站图标。如果他们在我们的站点上更改了偏好，他们需要重新加载页面才能看到新的网站图标。

这种方法简单而且不需要像 JavaScript 那样的额外代码。

结论

为用户的浏览体验增添个人色彩可以很简单，只需根据用户的配色方案偏好动态更改收藏夹图标即可。通过检测用户是在浅色模式还是深色模式下，并相应地创建两个图标图像，我们就可以提供更完美、更愉快的用户体验。

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# html

···