Usar un emoji como favicon
Puedes establecer un emoji como favicon apuntando el enlace del icono a un data URI de SVG en línea que contiene el emoji como texto, sin ningún archivo de imagen. Funciona al instante en los navegadores modernos. Es un gran marcador de posición, pero el emoji lo dibuja la propia fuente del sistema operativo, así que se ve distinto en Windows, macOS, Android e iOS, y no satisfará /favicon.ico ni los iconos de la pantalla de inicio. Para cualquier cosa más allá de un arranque rápido, exporta un conjunto real.
Una línea, sin archivo
El truco es un data URI de SVG en línea: el href del enlace es un SVG que dibuja el emoji como un elemento de texto, así que no hay ninguna imagen aparte que alojar. Los navegadores modernos lo renderizan en la pestaña de inmediato, lo que lo convierte en un marcador de posición perfecto mientras construyes.
El emoji en sí lo dibuja la fuente de emojis que incluya el sistema operativo del visitante, así que el mismo favicon se ve sutilmente (o no tan sutilmente) distinto en cada plataforma.
La línea única
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>Cambia por cualquier emoji. En producción, codifica en URL los caracteres especiales: algunos navegadores son quisquillosos con los corchetes angulares crudos en un data URI.
Preguntas frecuentes sobre el favicon de emoji
¿Puedo usar un emoji como favicon?
Sí, mediante un data URI de SVG en línea que renderiza el emoji como texto. Funciona en los navegadores modernos sin archivo de imagen, lo que lo convierte en un práctico marcador de posición rápido.
¿Por qué mi favicon de emoji se ve distinto en cada dispositivo?
Porque el emoji se dibuja con la propia fuente de emojis del sistema operativo. Apple, Google y Microsoft dibujan cada uno el mismo emoji de forma distinta, así que tu favicon hereda esa variación.
¿Es un favicon de emoji lo bastante bueno para producción?
Como único icono, no. No cubre /favicon.ico ni las pantallas de inicio, y se ve inconsistente entre plataformas. Úsalo para empezar, luego exporta un conjunto adecuado para el lanzamiento.