Generador de favicon — ICO, PNG e icono Apple Touch

Los archivos que un sitio realmente necesita

La lista se redujo mucho. Hace unos años el consejo habitual llegaba a una docena de archivos y veinte líneas de marcado. Hoy cuatro archivos cubren prácticamente todo lo que se usa.

• favicon.ico — sigue siendo el caballo de batalla. Los navegadores piden /favicon.ico a la raíz del sitio por su cuenta, sin que ningún HTML se lo indique, así que cubre todos los casos en los que tu marcado falta o no llega a interpretarse. Este contiene las versiones de 16, 32 y 48 px.
• apple-touch-icon.png de 180 × 180 — lo que usa Safari en iOS cuando alguien agrega tu sitio a su pantalla de inicio. iOS redondea las esquinas por su cuenta, así que entrega un cuadrado completo.
• icon-192.png e icon-512.png — se referencian desde el manifiesto de la aplicación web y los usa Android cuando un sitio se instala o se ancla.
• icon.svg — opcional, y aquí solo se genera en el modo de letra. Los navegadores modernos aceptan un favicon en SVG y se mantiene nítido en cualquier tamaño.

Por qué un ICO contiene más de una imagen

ICO no es realmente un formato de imagen, es un contenedor. Seis bytes de encabezado, después una entrada de directorio de dieciséis bytes por cada imagen que indica qué tamaño tiene y en qué punto del archivo empieza, y después los datos de las imágenes. Desde Windows Vista esas entradas pueden ser archivos PNG completos en lugar de bitmaps en crudo, que es lo que escribe esta herramienta. El sistema operativo o el navegador elige entonces el tamaño incrustado que le sirve para el lugar donde lo va a dibujar: 16 px en una pestaña, 32 px en la barra de marcadores, 48 px en un acceso directo del escritorio.

Una peculiaridad del formato se ve en el código: una dimensión se guarda en un solo byte, y 256 se escribe como cero. Ese es el techo duro del formato, y la razón por la que los iconos grandes viven en archivos PNG.

Por qué tu logo no va a sobrevivir a 16 píxeles

Un icono de 16 × 16 son 256 píxeles en total. Un logotipo con texto se convierte en textura, un contorno de un píxel desaparece por completo, y cualquier cosa con más de dos o tres formas termina en un borrón. Los logos que funcionan como favicon son los que ya eran simples: una sola letra, un símbolo, una silueta.

Redimensionar ayuda solo hasta cierto punto. Los navegadores remuestrean en un solo paso, que es rápido y deja bordes suaves y dentados; esta herramienta reduce la imagen a la mitad repetidamente hasta acercarse al tamaño final y da el último paso desde ahí, lo que mantiene los bordes notablemente mejor. Aun así no puede competir con un icono de 16 px dibujado a mano, píxel por píxel, con los trazos alineados a la cuadrícula. Si tu favicon importa de verdad, dibuja el de 16 px aparte y usa esta herramienta para el resto.

Lo que esta herramienta no hace

No hay descarga en zip. Cada archivo de aquí está a un clic, y juntarlos en uno solo significaría cargar una biblioteca de compresión en tu navegador para armar un zip que se desarmaría apenas llega al otro lado.

La opción SVG existe solo en el modo de letra, y hace referencia a una fuente del sistema por su nombre. Eso significa que puede verse con otra tipografía en la computadora de otra persona. Para algo más que una solución provisional, ábrelo en un editor vectorial y convierte el texto a curvas.

Tampoco genera el icono de máscara monocromo que usaban las versiones viejas de Safari para las pestañas ancladas, y no escribe nada en tu servidor. Todavía tienes que subir los archivos, a la raíz del sitio, y referenciarlos con rutas absolutas como hace el fragmento de código.

Una limitación más que conviene conocer: un SVG de origen sin atributos width y height no tiene tamaño intrínseco, y los navegadores no se ponen de acuerdo sobre qué suponer. Si tu logo en SVG sale recortado o diminuto, ábrelo, agrega dimensiones explícitas al elemento raíz y prueba de nuevo.

Por qué no aparece el favicon nuevo

Porque está en caché, casi siempre. Los navegadores guardan los favicon en caché de forma agresiva y en un almacén separado del caché normal de las páginas, así que una recarga forzada de la página suele dejar el icono viejo en su sitio. Carga /favicon.ico directamente en una pestaña y recarga esa pestaña, o prueba en una ventana privada para confirmar que el archivo nuevo se está sirviendo de verdad.

La otra sorpresa habitual es el modo oscuro. Un logo oscuro sobre fondo transparente es invisible contra un tema de navegador oscuro, y los navegadores no van a cambiarte el icono. Dos soluciones: dale al icono un fondo sólido para que nunca se mezcle, o usa un favicon en SVG con una media query prefers-color-scheme adentro, que los navegadores de escritorio actuales respetan.

Última actualización 19 de septiembre de 2026