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, […]


This content originally appeared on phpied.com and was authored by Stoyan

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.


This content originally appeared on phpied.com and was authored by Stoyan


Print Share Comment Cite Upload Translate Updates
APA

Stoyan | Sciencx (2024-06-16T00:17:53+00:00) Minimal SVG Favicon. Retrieved from https://www.scien.cx/2024/06/16/minimal-svg-favicon/

MLA
" » Minimal SVG Favicon." Stoyan | Sciencx - Sunday June 16, 2024, https://www.scien.cx/2024/06/16/minimal-svg-favicon/
HARVARD
Stoyan | Sciencx Sunday June 16, 2024 » Minimal SVG Favicon., viewed ,<https://www.scien.cx/2024/06/16/minimal-svg-favicon/>
VANCOUVER
Stoyan | Sciencx - » Minimal SVG Favicon. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/16/minimal-svg-favicon/
CHICAGO
" » Minimal SVG Favicon." Stoyan | Sciencx - Accessed . https://www.scien.cx/2024/06/16/minimal-svg-favicon/
IEEE
" » Minimal SVG Favicon." Stoyan | Sciencx [Online]. Available: https://www.scien.cx/2024/06/16/minimal-svg-favicon/. [Accessed: ]
rf:citation
» Minimal SVG Favicon | Stoyan | Sciencx | https://www.scien.cx/2024/06/16/minimal-svg-favicon/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts