https://austingil.com/svg-favicons/ Skip to content Austin Gil * Blog * Side Projects * Contact Search Austin Gil Menu HTML Blog cover OMG, SVG Favicons FTW! * Development, Front End, HTML 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 play around with 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: [example-svg-f] 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 for SVG favicons (minus the file extension). In your HTML file's tag you place a element with the rel attribute set to "icon" and the href attribute set to the path where your icon lives. Because we are using an SVG, the icon can be whatever size you want, just make sure that the canvas is square. If you need to search for free icons, icones is a good resource, or you can create your own with penpot. 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. Instead of linking to the path, prefix your entire SVG code with data:image/svg+xml;utf8, (including that last comma) and pass the whole thing to the href attribute. I really like this method because I can just forget about placing the icon file in a folder somewhere, and I can copy/paste this code to any project (most of my side projects use the same icon now). You could argue against using an inline SVG favicon because linking to a file can be cached, and adding the inline SVG on every page would increase the HTML size, but I don't think it would make much difference, and I prefer the maintainability here. If you only have one website to deal with, this may not be a big deal, but as someone that maintains several sites and uses the same favicon, this is great. Using An Emoji For Your Favicon A while back a tweet by Lea Verou showed how they can be used to add emojis as favicons. I probably never would have even thought of that, but it's pretty straight forward. The syntax works the same before. Since SVGs support text content through the element and emojis are pretty much text, you can put any emoji inside your SVG (it may need some moving around to fit right). " /> (LOL, it's poop!) This makes it really easy to have a favicon without creating a custom one. Want something even easier? Check out emojicon.dev by Bryson Reece. It gives you a list of emojis, and you can click on any one of them to copy the whole favicon snippet to your clipboard. If that's nor your jam, Wes Bos also created fav.farm. It's a 3rd party service that will generate the favicon for you. You can link directly to his service with the emoji you want. The creativity of the dev community never ceases to impress me. So many cool, smart, and creative devs out there. Adding Dark Mode Detection We can add a "> In this example, I'm targeting the SVG and directly, but you could just as well use classes. For custom SVGs, you'll probably need to do that. The "> You can find it publishes on projects like bedrocss, Vuetensils, and Style Check. Check it out in dark mode too! Thank you so much for reading. If you liked this article, please share it, and if you want to know when I publish more articles, sign up for my newsletter or follow me on Twitter. Cheers! --------------------------------------------------------------------- Originally published on austingil.com. Vue Blog Cover Previous Post Watching for Changes in Vue.js Component Slot Content Related Posts Vue Blog Cover Watching for Changes in Vue.js Component Slot Content * May 24, 2021 [WordPress-Blog-Cover] Opinion: WordPress is Still Pretty Darn Great * February 16, 2021 JavaScript Blog Cover Get Started With TypeScript the Easy Way * December 28, 2020 Copyright (c) 2021 Austin Gil [ ] * Blog * Side Projects * Contact