I’ve been working on some side projects recently (Style Check and bedrocss), and as with any project I work on long enough, I got to the point where I wanted to add a favicon.
I decided to explore SVG favicons. The support is just ok (boo Safari), but it’s good enough for my needs. I’m alright if no favicon shows up on unsupported browsers. It’s not the end of the world.
By using an SVG, I’m able to get a lot of cool benefits like:
- Crisp image quality with a single file
- Support for emojis
- Inline icon (no need for a linked resource)
- Dark mode detection (sweet!)
Let’s dig into adding SVG favicons to your project. For the following examples (besides emojis), we’ll use a very basic circle SVG:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<circle cx="50" cy="50" r="50"/>
</svg>
Adding An SVG Favicon To HTML
The syntax for adding a favicon to your website hasn’t changed in a long time, and the same applies to SVG favicons (minus the file extension).
In your HTML file’s
<head>tag you place a<link>element with the rel attribute set to “icon” and the href attribute set to the path where your icon lives.
Inlining SVG Favicons As Data-URI
After switching to SVG favicons, the first thing I tried to do was to see if I could use them with an inline format rather than linking to a separate file.
I’ve used the Data-URI trick before with inline images or backgrounds, and it works like a charm. Good news - it also works for favicons.
Using An Emoji For Your Favicon
A while back, a tweet by Lea Verou showed how they could be used to add emojis as favicons. I probably never would have even thought of that, but it’s pretty straightforward:
The syntax works the same before. Since SVGs support text content through the
Adding Dark Mode Detection
We can add a
<style>tag to our SVG and use theprefers-color-scheme media queryto change our icon based on the user’s dark mode preferences.
#html #programming #frontend #web-development #svg
