Emoji Favicons Made Easy With SVG
Lea Verou has proposed a simple trick for using emoji as favicons, an approach that has only become viable now that browsers support SVG format favicons. The core technique is to place an emoji inside an SVG <text> element and reference that SVG as the favicon file.
The entire solution is a one-liner:
<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>">Live Demo Showing Emoji Favicons
A small demo project has been set up to show the technique in action. The deployed version works in Firefox and Chrome. Safari, however, only recognizes “mask” style icons in SVG, so this approach doesn't work there.
Related approaches include a badge that can be incremented, a developer trick for using the current Git branch name to create an SVG favicon (which ties into having different favicons for development environments), and the possibility of slipping a prefers-color-scheme media query into the SVG to handle dark mode displays.
