Using SVG favicons with Unicode

[Anand S]

Browsers support SVG favicons as data: URLs.

For example, this SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="15" fill="#2563eb"/>
  <path fill="#fff" d="m16 7 2 7 7 2-7 2-2 7-2-7-7-2 7-2Z"/>
</svg>

... can be:

1. Compressed via svgomg
2. Converted to a data: URL via svgviewer
3. Inserted into HTML like this:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2215%22%20fill%3D%22%232563eb%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m16%207%202%207%207%202-7%202-2%207-2-7-7-2%207-2Z%22%2F%3E%3C%2Fsvg%3E"/>

The fun part is that you can use text inside the SVG, styled as you wish:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#2563eb" width="64" height="64" rx="10"/>
  <text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="40" font-weight="800" fill="white">DS</text>
</svg>

DS

... or even use Unicode characters:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect fill="#2563eb" width="64" height="64" rx="10"/>
  <text x="32" y="35" text-anchor="middle" dominant-baseline="middle" font-size="40">🌈</text>
</svg>

🌈

That can be converted into a HTML link like this:

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%232563eb%22%20rx%3D%2210%22%2F%3E%3Ctext%20x%3D%2232%22%20y%3D%2235%22%20dominant-baseline%3D%22middle%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%3E%F0%9F%8C%88%3C%2Ftext%3E%3C%2Fsvg%3E"/>

The variety is endless!

⚡


🖱️


✦


◈


↻


⭕


🕒


👨‍👦

T
L


T
l




T
L


T
L


T
L


T
L


T
L


[
TL
]

What makes this powerful is that:

1. You can create entire families of favicons using typography, Unicode characters, and colors.
2. The favicons are tiny (a few hundred bytes).
3. They're easy to edit and maintain (just edit the SVG text).

---

From: s-anand.net