An Interest In:
Web News this Week
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
Some of Our Sources
- Techcrunch
- Team Treehouse
- TutsPlus - Design
- You The Designer
- Web Design Ledger
- Line 25
- 24 Ways
- Stylized Web
- Codrops
- The Verge
Help Webnuz
Referal links:
Dynamic Favicons
Nowadays, most operating systems have both light and dark modes.
Most modern browsers respect this system theme and thus use different colours depending on which you are using.
In traditional websites, you normally have one favicon. However, this isn't always good. Take GitHub for example:
This has since been resolved!
Let's see how we can fix this ...
Design two different favicons for your site.
One for light mode, another for dark mode.
However, the question is, how do you set them
Let's start out with a basic HTML site:
<head> <title>Example</title></head><body> <h1>This is an example.</h1></body>To add a favicon, you would normally just add the following line:
<head>+ <link rel="icon" type="image/svg" href="https://dev.to/favicon.svg" /> <title>Example</title></head>For dynamic favicons, we will use favicon-switcher.
You'll only need to add the following lines of code to your site:
<head>+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:light)" href="https://dev.to/favicon_light.svg" />+ <link rel="icon" type="image/svg" media="(prefers-color-scheme:dark)" href="https://dev.to/favicon_dark.svg" />+ <script src="https://unpkg.com/favicon-switcher@latest/dist/index.js" crossorigin="anonymous" type="application/javascript"></script> <title>Example</title></head>All done! Your site will now automatically switch between the favicons depending on the system theme.
Original Link: https://dev.to/johnletey/dynamic-favicons-31n0
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To