Change the favicon dynamically based on user's color scheme preference

fengjutian
110 阅读7分钟

Change the favicon dynamically based on user's color scheme preference【根据用户的配色方案偏好，动态地更改网站图标】

Tags【标签】

color scheme preference, 【颜色主题偏好】

favicon【图标】

Favicons are small icons that help users identify your website in their browser tabs and bookmarks. 【Favicons是小的图标，可以帮助用户在他们的浏览器标签和书签中识别您的网站。】Changing the favicon dynamically can add a personal touch to the user's browsing experience.【动态更改图标可以给用户的浏览体验增添个人风格】

Big websites like Twitter, Reddit, and GitHub have started using dynamic favicons based on user preferences.【Twitter、Reddit和GitHub等大型网站已经开始根据用户偏好使用动态图标。】 For example, Twitter changes its favicon to a blue bird for light mode and a white bird for dark mode.【例如，Twitter根据用户的色调偏好，在浅色模式下将图标变为蓝色鸟，深色模式下则变为白色鸟。】 Reddit changes its favicon to black for dark mode and orange for light mode. 【Reddit的图标在深色模式下为黑色，浅色模式下为橙色。】GitHub changes its favicon from a black octocat to a white one based on the user's preference.【GitHub会根据用户的偏好动态更改其网站图标，从黑色变为白色。】

These examples show how dynamic favicons can make browsing more personal and help users easily find their favorite websites.

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

In this post, we'll explore how to change your favicon dynamically based on the user's color scheme preference.

Adding a favicon to your website【为网站添加图标】

Before we can dynamically change the favicon based on the user's color scheme preference, we need to first add a favicon to our website. 【在我们可以根据用户的配色方案偏好动态更改图标之前，我们需要首先向我们的网站添加一个图标。】This is easily done by adding an HTML link element in the head section of your HTML code.【可以通过在HTML代码的头部区域添加一个 元素来轻松实现。】

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

The rel attribute is used to indicate that the icon we're adding is a favicon, while the href attribute is where we specify the location of the favicon file. 【rel属性用于表明所添加的图标为网站图标，而href属性则用于标明网站图标文件所在的位置。】It's best to use either .ico or .png format for better browser compatibility, although other image formats are also acceptable.【最好使用.ico或.png格式以获得更好的浏览器兼容性，尽管也可以使用其他图像格式。】

Once you've added this code to your website's HTML, your users will see your favicon in their browser tab and bookmarks. It's a small but important detail that helps make your website look more professional.

【将这段代码添加到你的网站HTML中后，你的用户将在浏览器标签和书签中看到你的网站图标。这是一个虽小但重要的细节，有助于让你的网站看起来更加专业。】

Dynamically changing favicon with JavaScript【用JavaScript动态改变图标】

To dynamically change the favicon of your website based on the user's color scheme preference, we need to create two favicon images: one for light mode and one for dark mode. 【根据用户的配色方案偏好动态更改网站的图标，我们需要创建两个图标图像：一个用于浅色模式，一个用于深色模式。】You can use any image editing software to create the images, just make sure the light mode favicon has a light background color and the dark mode favicon has a dark background color.【你可以使用任何图像编辑软件来创建这些图像，只需确保浅色模式的图标具有浅色背景，深色模式的图标具有深色背景。】

Once you have both images, we can use JavaScript to detect the user's preference and change the favicon accordingly.【拥有这两个图像后，我们就可以使用JavaScript来检测用户的偏好并相应地更改图标。】 Modern browsers support the prefers-color-scheme media query, which tells us whether the user prefers a light or dark color scheme.【现代浏览器支持prefers-color-scheme媒体查询，它可以告诉我们用户是偏好浅色还是深色方案。】

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // User prefers dark color scheme
} else {
    // User prefers light color scheme
}

We can make a function that sets the href attribute of the favicon link element to the right image based on the user's color scheme preference.【我们可以创建一个函数，根据用户的配色方案偏好来设置图标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();

We can use this function to update the user's color scheme preference whenever they make a change.【每当用户更改配色方案偏好时，我们可以使用这个函数来更新他们的选择。】

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

Changing favicon dynamically using HTML link tags【使用HTML标签动态更改图标】

In addition to using a JavaScript-based solution as shown above, modern browsers provide a native way to change the favicon dynamically.【除了使用前面展示的基于JavaScript的解决方案之外，现代浏览器还提供了一种原生的动态更改图标的方法。】 By using different link tags in your HTML file, you can reference different favicons for light and dark modes. The best part? This approach doesn't require any JavaScript code.【通过在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)">

To ensure our website looks great in both light and dark mode, we create two separate link tags for each favicon image. We set the media attribute to (prefers-color-scheme: light) for the light mode favicon and (prefers-color-scheme: dark) for the dark mode favicon.

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

When someone visits our site, their browser will automatically choose the right favicon based on their color scheme preference. If they change their preference while on our site, they'll need to reload the page to see the new favicon.

【当有人访问我们的网站时，他们的浏览器会根据他们的配色方案偏好自动选择合适的图标。如果他们在访问我们的网站时更改了偏好，则需要重新加载页面才能看到新的图标。】

This approach is simple and doesn't require any extra code like JavaScript.

【这种方法很简单，不需要像JavaScript那样的额外代码。】

Conclusion【总结】

Adding a personal touch to a user's browsing experience can be as simple as dynamically changing the favicon based on their color scheme preference. By detecting whether the user is in light mode or dark mode and creating two favicon images accordingly, we can provide a more seamless and enjoyable user experience. With the help of JavaScript, we can make this possible.

【根据用户的配色方案偏好动态更改图标，可以为用户的浏览体验增添个性化色彩。通过检测用户处于浅色模式还是深色模式，并相应地创建两个图标图像，我们可以提供更加流畅和愉悦的用户体验。借助JavaScript，我们可以实现这一功能。】

资料：

identify

vt.

识别；确认；发现；鉴定；显示；找到；认出；说明身份

dynamically

adv.

动态地；充满活力地；不断变化地

octocat

Octocat是GitHub的吉祥物，形象是一个下半身为章鱼的爪子，上本身为猫头的卡通形象。Octocat这个名字是Octopus（章鱼）和Cat（猫）的结合体。在GitHub上，用户可以在各种场合看到这个可爱的吉祥物，它也成为了GitHub的一个标志。GitHub甚至有一个专门的网页来收集各种Octocat的形象。

indicate

v.

表明;指示;显示;暗示;示意;有必要;写明;象征;间接提及;（用灯光或手臂）打行车转向信号

compatibility

n.

(尤指计算机及程序的)兼容性，相容性;相容;并存;和睦相处

acceptable

adj.

可接受的;(社会上)认同的，认可的;还可以的;令人满意的;尚可的;可容许的;差强人意的

professional

adj.

专业的;职业的;训练有素的;职业性的;职业上的;娴熟的;有职业的;精通业务的

n.

(从事某活动的)专业人员;专业人士;专家;职业运动员;专门人才;专门人员;内行;技术精湛者;老练的人

detect

vt.

发现;查明;侦察出

accordingly

adv.

因此;相应地;所以;照着

approaches

v.

(在数额、水平或质量上)接近;(在距离或时间上)靠近，接近;要求;建议;接洽

n.

(待人接物或思考问题的)方式，方法，态度;(距离和时间上的)靠近，接近;要求;建议;接洽

seamless

adj.

无(接)缝的;(两部分之间)无空隙的，不停顿的

原文：phuoc.ng/collection/…

语雀翻译原文：www.yuque.com/fengjutian/… 《Change the favicon dynamically based on user's color scheme preference【根据用户的配色方案偏好，动态地更改网站图标】》

avatar
文章
阅读
粉丝