Cómo utilizar un emoji como favicon fácilmente

Lea Verou tuvo la genial idea de usar un emoji como favicon. La idea solo fue posible recientemente, ya que los navegadores comenzaron a admitir SVG para favicons. Inserta un emoji dentro de un textelemento SVG y úsalo como favicon.

Aquí está la frase ingeniosa en uso:

link rel="icon" href="data:image/svg+xml,svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22text y=%22.9em%22 font-size=%2290%22 /text/svg"

Proyecto de demostración que demuestra Emoji como Favicon

Hice un pequeño proyecto de demostración rápido para que puedas verlo en funcionamiento. Vea el proyecto implementado para ver realmente los favicons. Eso funciona en Firefox y Chrome. Safari solo hace esos íconos de estilo “máscara” en SVG, por lo que esto no funciona allí. ¿Quizás podría ser así? No sé, te dejaré probarlo.

Aquí tenéis un vídeo por si queréis verlo.

Conceptos relacionados

• Ada Rose Cannon agregó una insignia que puede incrementarse.
• Taylor Hunt incluyó algo de código sobre cómo usa el nombre de la rama actual de Git para crear un favicon SVG (relacionado con la idea de “diferente favicon para desarrollo”)
• Podrías evitar una prefers-color-schemeconsulta de medios en SVG si quisieras hacer algo especial para el modo oscuro (aunque los emojis generalmente funcionan bien en cualquier fondo)