SVG Favicons

April 29, 2021

SVG favicons are supported in all modern browsers.

To include an inline SVG as a favicon, you have to first convert it into a data URI. I generally use this tool since is very easy to use. I copy the SVG content and paste it into the Insert SVG field, and then copy the CSS code generated from the Read for CSS.

Then, open your HTML file, create a link tag, give it the attribute rel="icon" and inside the href attribute paste your copied code. Your code that is inside your href attribute must start with data:image/svg+xml,.

Example of a Sun SVG Favicon and how it looks in the browser:

<link
  rel="icon"
  href="data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)'%3E%3Cg stroke='%230C0C0C' stroke-width='1.5'%3E%3Ccircle cx='9.5' cy='9' r='5.176'/%3E%3Ccircle cx='9.5' cy='9' r='8' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='1 4'/%3E%3C/g%3E%3C/svg%3E"
/>