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:
<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>
… 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!
What makes this powerful is that:
- You can create entire families of favicons using typography, Unicode characters, and colors.
- The favicons are tiny (a few hundred bytes).
- They’re easy to edit and maintain (just edit the SVG text).