Favicons en data URI (base64)
Un favicon en data URI incrusta la imagen directamente en la etiqueta link como texto en base64 (href="data:image/png;base64,...") en vez de apuntar a un archivo, lo que elimina una solicitud HTTP. Funciona para la pestaña del navegador, pero falla en todo lo que obtiene un icono por URL: las solicitudes de /favicon.ico, apple-touch-icon, los iconos del manifiesto, los rastreadores y los desplegadores de enlaces. Así que no sustituye a los archivos reales.
Qué aporta, y qué cuesta
Incrustar el icono como base64 ahorra una solicitud: la imagen viaja dentro del HTML, así que el navegador no descarga un archivo aparte para la pestaña. Para un icono diminuto en una página sensible a la latencia eso puede parecer atractivo.
El problema es todo lo que no lee tu HTML. Un rastreador o un desplegador de enlaces que solicita /favicon.ico por ruta no recibe nada. iOS quiere un archivo apple-touch-icon real; Android lee los archivos listados en el manifiesto. Ninguno de ellos puede usar un icono que solo existe como texto dentro de una etiqueta link, y el blob en base64 infla cada respuesta HTML en la que está.
Qué aspecto tiene
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />Bien para la pestaña, invisible para cualquier cosa que solicite un icono por URL.
Preguntas frecuentes sobre el favicon en data URI
¿Puedo usar un favicon en base64?
Para la pestaña del navegador, sí. Pero no satisfará las solicitudes de /favicon.ico, apple-touch-icon, el manifiesto ni los rastreadores, así que en un sitio real solo puede complementar a los archivos reales, no reemplazarlos.
¿Funciona un favicon en línea en las pantallas de inicio de iOS?
No. Las pantallas de inicio de iOS usan el apple-touch-icon, que debe ser un archivo real que pueda obtener. Un data URI en un enlace de favicon no hace nada por la pantalla de inicio.
¿Es bueno para el rendimiento un favicon en data URI?
Elimina una pequeña solicitud pero incrusta la imagen codificada en cada respuesta HTML que la lleva. Para un icono que se almacena en caché con fuerza tras la primera carga de todos modos, el ahorro suele ser insignificante y la sobrecarga no.