Cómo se usa
- Suelta un archivo .ico en la zona de arrastre, haz clic para elegir uno o pega una imagen.
- Deja Convertir a en Mantener original para que todos los tamaños guardados en el icono pasen a la salida.
- Comprueba el tamaño codificado; un icono con muchos tamaños puede ocupar más de lo que esperas.
- Copia el data URI para la etiqueta link del favicon, o copia la salida en etiqueta img, CSS o Markdown.
El formato ICO
ICO es el formato de iconos de Windows y el formato original de los favicons. Es un contenedor: un breve directorio enumera una o varias imágenes con su ancho, su alto y su profundidad de color, y cada imagen se guarda como datos de mapa de bits o, en tamaños grandes como 256 por 256, como un PNG incrustado. Un favicon.ico típico contiene versiones de 16, 32 y 48 píxeles para que el navegador pueda elegir la más nítida.
El tipo MIME registrado es image/vnd.microsoft.icon, pero image/x-icon es mucho más común, y los navegadores aceptan ambos. Los datos ICO en Base64 empiezan por AAABAA, el encabezado del archivo codificado.
Un favicon como data URI
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">Incrustar el favicon resulta práctico en documentos HTML de un solo archivo, como informes exportados, paneles guardados en disco y documentación sin conexión, y en prototipos o herramientas internas en los que no quieres desplegar un archivo aparte. En un sitio web con muchas páginas, un /favicon.ico normal suele ser mejor: se descarga una vez y se guarda en caché, mientras que un data URI se repite en cada respuesta HTML.
Si no quieres ningún icono, <link rel="icon" href="data:,"> evita que el navegador solicite /favicon.ico.
Favicons ICO, PNG o SVG
Los navegadores actuales también aceptan favicons PNG y SVG, por ejemplo <link rel="icon" type="image/png" href="data:image/png;base64,...">. Un único PNG de 32 por 32 suele ocupar menos que un ICO con varios tamaños; para esos casos, usa PNG a Base64 o SVG a Base64.
Si conviertes aquí un ICO a PNG, JPEG o WebP, solo se conserva una imagen: la que el navegador elige mostrar. Para hacer lo contrario y crear un archivo ICO, codifica un PNG y pega el resultado en Base64 a ICO, que genera iconos de 16 a 256 píxeles.
Preguntas frecuentes
¿Debo usar image/x-icon o image/vnd.microsoft.icon?
image/vnd.microsoft.icon es el tipo registrado oficialmente, mientras que image/x-icon es el que usa la mayoría de los sitios. Si un sistema espera uno en concreto, edita el prefijo después de copiarlo.¿Se conservan todos los tamaños de icono en la salida Base64?
Sí, si mantienes el formato original. Se codifica el archivo completo, así que el navegador puede seguir eligiendo el tamaño que necesita. Al convertir a otro formato se conserva una sola imagen.
¿Los favicons en data URI funcionan en todos los navegadores?
Los navegadores de escritorio actuales los muestran en la pestaña. Los marcadores, los accesos directos de la pantalla de inicio y algunos navegadores antiguos pueden ignorar un icono incrustado, así que los sitios web públicos deberían seguir ofreciendo un archivo de favicon.