Lea Verou tenía una idea genial para usar un emoji como favicon. La idea solo fue posible recientemente, ya que los navegadores comenzaron a admitir SVG para favicons. Tira un emoji dentro de un SVG <text>
y utilícelo como favicon.
Aquí está el one-liner en uso:
<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>">
Proyecto de demostración que demuestra Emoji como un Favicon
Hice un pequeño proyecto de demostración rápido para que puedas verlo en el trabajo. 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í. ¿Tal vez podría aunque? No sé, te dejaré probar.
Aquí hay un video en caso de que solo quieras verlo.
Conceptos relacionados
- Ada Rose Cannon agregó una insignia que puede aumentar.
- Taylor Hunt dejó caer un código sobre cómo usa el nombre actual de la rama Git para crear un favicon SVG (relacionado con la idea de “favicon diferente para el desarrollo”)
- Podrías esquivar un
prefers-color-scheme
consulta de medios en el SVG si quería hacer algo especial para el modo oscuro (aunque los emojis generalmente funcionan bien en cualquier fondo)