andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update responsive favicon article

Browse Source
This commit is contained in:
Chalarangelo
2021-09-28 19:41:19 +03:00
parent c26f7e7ac5
commit 5dd11a6bf8
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
blog_posts/responsive-favicon-dark-mode.md
View File

@ -6,14 +6,14 @@ authors: chalarangelo
cover: blog_images/dark-mode.jpg
excerpt: Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide.
firstSeen: 2020-11-27T13:25:30+02:00
lastUpdated: 2021-06-12T19:30:41+03:00
lastUpdated: 2021-09-28T19:40:01+03:00
---
The rise of dark mode in recent years has made many website favicons feel awkward or even impossible to see in some cases. Provided your design team has created the appropriate assets, it's relatively easy to create a responsive favicon that can handle the user's color scheme preference without too much effort.
The rise of dark mode in recent years has made many website favicons feel awkward or even impossible to see in some cases. Provided you have the appropriate assets, it's relatively easy to create a responsive favicon that can adapt to the user's color scheme preferences.
In order to create a responsive favicon, you need an SVG icon with as few colors as possible and two color palettes, one for light mode and one for dark mode. Usual rules about icon clarity and complexity apply, so make sure your icon meets all the necessary criteria to be visually distinguishable in any scenario. In our example, we will be using a monochrome icon from the fantastic [Feather icon set](https://feathericons.com/).
Leveraging embedded styles in SVG images and the `prefers-color-scheme` media query, we can create an appropriate `<g>` element to group all the elements of the icon and, using the `id` of the group, we can then apply the color palette for each design. Here's what our final SVG asset looks like:
Leveraging embedded styles in SVG images and the `prefers-color-scheme` media query, we can create an appropriate `<g>` element to group all the elements of the icon. Then, using the `id` of the group, we can apply the color palette for each design. Here's what our final SVG asset looks like:
```html
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">