Favicon de emoji: una línea, sin archivo de imagen
Sin archivo, sin generador, sin subir nada. Pega una línea y tu pestaña tiene un ícono.
La línea única
<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>">Cambia el cohete por cualquier emoji. Las secuencias %22 son comillas dobles codificadas en URL, para que todo el SVG sobreviva dentro del href.
Cómo funciona
Aquí no hay imagen. El href es un data URI que contiene un SVG minúsculo, y el SVG es un único elemento <text> con el emoji dentro. El navegador renderiza el SVG directamente en la pestaña, así que te saltas todo el ciclo de generar-descargar-subir.
El viewBox y el font-size se encargan del tamaño. El ajuste y=".9em" baja el glifo para que quede dentro de la caja en lugar de recortarse arriba. Ese es todo el truco.
Los límites
Se renderiza con la fuente de emoji del sistema operativo, así que el mismo emoji se ve distinto en macOS, Windows y Android. No controlas el arte.
Solo cubre la pestaña. No es un /favicon.ico de verdad, así que los crawlers y clientes más antiguos que solicitan esa ruta no encuentran nada, y no hace nada por las pantallas de inicio de iOS ni por los launchers de Android, que necesitan archivos PNG reales.
En producción, codifica en URL los caracteres especiales. Un < y un > y las comillas en crudo dentro de un href pueden romper el parsing o tropezar con políticas de contenido estrictas. Codificarlos, como en el snippet de arriba, mantiene la solución robusta.
Preguntas frecuentes
¿Cómo uso un emoji como favicon?
Define el href del link del favicon como un data URI que contenga un pequeño SVG en línea con el emoji en un elemento <text>. Ocupa una línea de HTML y no necesita archivo de imagen.
¿Por qué mi favicon de emoji se ve distinto en otros dispositivos?
Se renderiza con la fuente de emoji propia de cada dispositivo, así que el arte difiere entre macOS, Windows y Android. Si necesitas una apariencia consistente, usa un ícono de imagen de verdad.
¿Un favicon de emoji sirve para los íconos de pantalla de inicio?
No. Solo cubre la pestaña del navegador. Las pantallas de inicio de iOS y los launchers de Android necesitan archivos PNG reales referenciados por el apple-touch-icon y el manifest.