Marginally better emoji favicons

A few other people¹ have pointed out that you can make a quick and dirty favicon by putting an emoji in an SVG. Clever!

Their examples hard-code the emoji’s size and position. Depending on the system font and your emoji selection, this can cause it to clip or be visibly off-center.

Here’s a variant that fixes that. We automatically center the text horizontally with text-anchor and vertically with dominant-baseline. The font-size still needs to be adjusted by eye, unfortunately.²

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
>
    <text
        font-size="80"
        x="50"
        y="50"
        text-anchor="middle"
        dominant-baseline="central"
    >
        🤎
    </text>
</svg>

Footnotes

1. https://x.com/LeaVerou/status/1241619866475474946

   https://css-tricks.com/emoji-as-a-favicon/

   https://mikehadlow.com/posts/2025-05-09-super-simple-svg-favicon/ ↩

2. As far as I can tell, there’s no way to adjust the font size automatically. textLength and lengthAdjust="spacingAndGlyphs" almost do what we want, but they only account for width, not height. Let me know if you find something that works! ↩