Minimal SVG Favicon

Why minimal?

I like "minimum-viable"s of all sorts. As a performance enthusiast I'm fascinated by anything minimal. So here goes a minimum viable SVG favicon.

Why favicon?

Welp, browsers will look for one and if you don't have it, enjoy the 404s!

Why SVG?

It could be tiny, almost as tiny as a CDN URL, it's scalable and it's all inline.

Why all the "why"s, just show me?!

Ok, the first one is:

<link 
  rel="icon" 
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'/>"
>

It's based on prior research into Minimum viable no-image image src and also the research into encoding of SVGs in data URIs. Long story short: you don't need to encode anything except #. So careful if you're adding hex colors to the SVGs.

Having an icon that's nothing is kinda trippy and worth checking out. Now let's go for something.

Next example. You like rectangles? fill-ed with salmon?

<link 
  rel="icon" 
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='50' height='50' fill='salmon'/></svg>"
>

As you can see we're keeping the SVGs readable and free of obfuscating encoding by using ' instead of ".

Next, who likes circles?

<link 
  rel="icon" 
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><circle cx='1' cy='1' r='1' fill='tomato'/></svg>"
>

A triangle?

<link 
  rel="icon" 
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'><polygon points='0,2 1,0 2,2' fill='salmon'/></svg>"
>

Alrighty, you get the idea. This is where I leave you to your SVGizing of your favicons!

Note: this SVG icon post is inspired by an example by Barry Pollard who hates missing favicons, that's why my favicon is his profile photo, flipped, because why not.

Updates

1. Safari doesn't support SVG icons (thanks Joseph Scott)
2. You can use emoji, a bit more useful than simple shapes (thanks Barry and Lea). Here's my minimal example:

<link 
  rel="icon" 
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'><text font-size='1' y='.9'>????</text/></svg>"
>

(replace ???? with your favorite emoji, cuz my WordPress DB tables are not the unicode-iest of them all, sorry)

Here's how that looks when you have a basketball emoji in place of ????:

Tell your friends about this post on Facebook and Twitter