Use an emoji as a favicon
An emoji can be a favicon with no separate image file. Put the character inside a small inline SVG and use that SVG as a data URL:
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>😉</text></svg>">
At the time this was written, the technique worked in Firefox and Chrome. Safari handled SVG favicons through its monochrome mask-icon format, so it did not display this version.
The result also depends on the operating system’s emoji font, which means the same favicon can look slightly different across devices. For a playful personal site, that is usually part of the appeal.
Enjoyed reading this?
If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.
Related articles
- HTML Features That Can Save You Some JavaScript
Use native disclosures, dialogs, popovers, form attributes, and responsive images before rebuilding their basic behaviour.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.