Favicon e ICO a Base64

Cómo convertir un favicon a Base64

1. Suelta favicon.ico, un PNG o un SVG en el recuadro, o elígelo con el selector de archivos.
2. Para un PNG, pon Ancho máx. en 32 (o 48) para no incrustar por accidente un icono de app de 512 píxeles. Los ICO y SVG se codifican tal cual.
3. Salida como está en Data URI. Cópialo y pégalo en el href:

<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

La vista previa muestra el icono con su tamaño en píxeles, así puedes ver si un PNG mide de verdad 32×32 antes de pegarlo.

ICO, PNG o SVG

Un favicon.ico suele reunir imágenes de 16×16, 32×32 y 48×48, y todas acaban en el Base64, lo que explica una cadena más larga de lo esperado. Para una pestaña del navegador suele bastar con convertir un único PNG de 32×32.

Los favicons SVG pueden reaccionar al modo oscuro con una media query prefers-color-scheme dentro del SVG. Mantén un PNG como alternativa si das soporte a Safari antiguos.

Cuándo tiene sentido un favicon incrustado

• HTML de un solo archivo: informes exportados, documentación offline, un panel guardado como un único archivo. Una ruta relativa a favicon.ico no apuntaría a ninguna parte en cuanto se mueve el archivo.
• Herramientas internas y servidores locales, donde añadir una ruta para un archivo estático cuesta más que una línea de HTML.
• Favicons dinámicos: un indicador de notificaciones o un color de estado dibujado en un canvas y aplicado con link.href = canvas.toDataURL("image/png").

En un sitio web normal es mejor un archivo de icono aparte. El navegador lo descarga y lo guarda en caché una vez, mientras que un favicon incrustado se repite en cada página HTML que sirves.

Dibujar un favicon en JavaScript

Para un indicador de estado no necesitas ningún archivo. Dibuja en un canvas de 32×32 y asigna el data URI al enlace de icono que ya existe:

const canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#e33";
ctx.beginPath();
ctx.arc(16, 16, 14, 0, Math.PI * 2);
ctx.fill();
document.querySelector('link[rel="icon"]').href = canvas.toDataURL("image/png");

Cuando el icono no cambia

• Sigue apareciendo el icono antiguo. Los navegadores guardan los favicons en caché con mucha insistencia y por separado de la página. Recarga sin caché o abre la página en una ventana privada para ver el nuevo.
• No aparece nada. Comprueba que el href empieza con el tipo correcto: data:image/png;base64,, data:image/x-icon;base64, o data:image/svg+xml;base64,. Un icono SVG también necesita el atributo xmlns en su elemento raíz.
• Varias etiquetas <link rel="icon">. Los navegadores eligen entre ellas por tipo y tamaño, así que un icono incrustado puede perder frente a otro icono declarado. Quita los que no quieras.

Convertirlo de nuevo en archivo

Para recuperar favicon.ico a partir de un data URI, usa Base64 a ICO. Para iconos SVG, SVG a data URI también puede generar una versión con codificación URL, que suele ser más corta que Base64.

Preguntas frecuentes