Cómo funcionan los formatos de favicon
Entender cómo funciona cada formato te ayuda a resolver el inevitable problema de «mi favicon no se muestra».
Comprueba favicons en cualquier sitio
Instala la extensión FetchFavicon para Chrome para extraer, previsualizar y validar favicons al instante.
El contenedor .ico
Un archivo .ico es una cabecera seguida de una o más entradas de imagen. Cada entrada puede ser BMP o PNG, y cada una tiene un ancho, alto y profundidad de bits.
Los navegadores leen el directorio, eligen la entrada que coincide con el tamaño solicitado y decodifican solo esa.
PNG dentro de .ico
Para tamaños de 64×64 en adelante, la compresión PNG reduce el peso del archivo entre 5 y 10 veces sin pérdida visual. Los generadores modernos (incluido el nuestro) aplican esto de forma automática.
Favicons SVG
Un favicon SVG es un archivo SVG normal. Los navegadores lo renderizan como cualquier otro SVG, y el bloque <style> puede adaptar colores según prefers-color-scheme.
Cómo eligen los navegadores
Si publicas varias etiquetas <link rel="icon">, los navegadores eligen la que mejor encaja con la superficie (pestaña, marcador o instalación). Se prefiere SVG cuando hay soporte; .ico es el respaldo por defecto.
Preguntas frecuentes
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.