¿Todavía necesito un favicon.ico, o es suficiente con PNG?
ICO es un formato de directorio que empaqueta 16, 32 y 48 en un archivo de 4.6 KB. Qué hay dentro, por qué PNG no lo reemplaza y los siete archivos a enviar.
Cada pocos años alguien declara muerto al favicon.ico. Luego, un lector de feeds o un viejo acceso directo de Windows solicita /favicon.ico, recibe un 404 y muestra un glifo de página en blanco. Enviar el ICO cuesta 4.6 KB. Ese es todo el argumento, y es por eso que nuestro generador de iconos todavía escribe uno.
Aliméntalo con alpha.png, una imagen de 900x606 con transparencia, y salen siete archivos: favicon.ico de 4.6 KB, favicon-16x16.png de 521 B, favicon-32x32.png de 1.4 KB, apple-touch-icon.png de 28.4 KB y dos PNG de android-chrome de 31.9 KB y 196 KB, más un site.webmanifest de 371 B. Tu propio navegador escribe los siete. Lo construimos de esa manera porque esta aplicación no tiene rutas de API en absoluto, que es la frase que cada sitio de favicon del lado del servidor no puede decir sobre sí mismo.
¿Qué hay realmente dentro de un archivo .ico?
ICO es un formato de directorio. El archivo se abre con seis bytes: una palabra reservada establecida en 0, una palabra de tipo establecida en 1 para iconos y un conteo de cuántas imágenes siguen. Después de eso viene una entrada de 16 bytes por imagen, que lleva el ancho, la altura, el conteo de colores, un byte reservado, planos de color, bits por píxel, la longitud en bytes de los datos de la imagen y su desplazamiento desde el inicio del archivo. Luego, las cargas útiles, concatenadas. El artículo de Iconos archivado de Microsoft de 1995 documenta esas dos estructuras como ICONDIR e ICONDIRENTRY, y no han cambiado.
El ancho y la altura obtienen cada uno un solo byte, por eso 256x256 tiene que almacenarse como 0 y por qué nada más grande que 256 cabe en el directorio. Nuestro codificador escribe 1 plano de color y 32 bits por píxel para cada entrada, y cada carga útil es un PNG simple. La especificación de 1995 describe un DIB seguido de una máscara AND de 1 bit para transparencia, que es por qué los iconos antiguos tenían esos bordes duros y dentados. Tres imágenes significan 6 bytes de encabezado más 48 bytes de directorio. Eso son 54 bytes de contabilidad, y todo lo demás en los 4.6 KB son datos PNG.
¿Por qué un favicon.ico contiene 16, 32 y 48?
Esos son los tres tamaños que empaquetamos, y no son arbitrarios. El mismo documento de Microsoft dice a los desarrolladores que incluyan 16x16, 32x32 y 48x48 en cada recurso de icono, luego detalla la regla de selección: la imagen más cercana en tamaño al tamaño solicitado gana. La pestaña solicita 16. En una pantalla 2x, ese mismo espacio de 16 píxeles CSS quiere 32 píxeles reales, y un acceso directo de escritorio de Windows solicita 48. Si tu ICO solo tuviera el 16, un acceso directo obtendría una imagen de 16 px estirada a 48, y se vería exactamente así.
Si los navegadores leen PNG, ¿por qué enviar el ICO en absoluto?
Porque los dos se descubren de diferentes maneras. El fragmento de cuatro líneas que nuestra herramienta te entrega nombra archivos PNG con tipo explícito y pistas de tamaño, y cualquier cliente que analice `<head>` tomará esos. La `referencia de <link>` de MDN muestra la misma forma, varios enlaces de iconos cuyos atributos permiten al navegador elegir. El Estándar HTML también permite a un agente de usuario buscar /favicon.ico por ruta cuando no se declara ningún enlace de icono, y muchas cosas que obtienen tu URL nunca leen tu marcado. Los favicons SVG son tentadores aquí, y caniuse los coloca en un 90.49% de soporte global, con Safari solo captándolos en la versión 26.0. Eso deja una verdadera cola.
¿Cuáles son los siete archivos y cuánto pesan?
| Archivo | Píxeles | Tamaño | Qué lo lee |
|---|---|---|---|
| favicon.ico | 16, 32 y 48 empaquetados | 4.6 KB | el camino de /favicon.ico como respaldo, accesos directos de Windows |
| favicon-16x16.png | 16x16 | 521 B | pestaña a 1x, a través de una etiqueta de enlace |
| favicon-32x32.png | 32x32 | 1.4 KB | pestaña a 2x, a través de una etiqueta de enlace |
| apple-touch-icon.png | 180x180 | 28.4 KB | pantalla de inicio de iOS, a través de una etiqueta de enlace |
| android-chrome-192x192.png | 192x192 | 31.9 KB | el array de iconos del manifiesto |
| android-chrome-512x512.png | 512x512 | 196 KB | el array de iconos del manifiesto |
| site.webmanifest | n/a | 371 B | el aviso de instalación |
El 512 domina. Agrega el ICO, ambos PNG pequeños, el apple-touch-icon y el 192 juntos y estarás por debajo de 67 KB en total, frente a 196 KB por ese único archivo. Vale la pena saber cuál de esos realmente te cuesta algo en una vista de página, porque solo el ICO y los dos pequeños PNG están en juego allí.
¿Por qué mi logo transparente está sentado sobre un cuadrado blanco?
Porque el generador pinta el lienzo antes de dibujar tu obra, y el relleno predeterminado es #ffffff. Ese control es una entrada de color, así que siempre hay algún color debajo. Configúralo en el hex de tu marca y todo el conjunto coincide con tu sitio. alpha.png entró con un canal alfa y cada una de las siete imágenes salió opaca, lo que sorprende a las personas que esperan un favicon transparente.
El control deslizante de margen va de 0 a 30 por ciento e inserta tu obra por esa parte de cada borde del icono, así que con un 10 por ciento un icono de 32 px mantiene un borde de 3 px en cada lado. Esa es una cantidad visible a esa escala. Las fuentes no cuadradas obtienen letterbox: un logo de 900x606 mantiene su relación de aspecto y recoge barras de fondo arriba y abajo. Cuadrarlo primero si eso te molesta. El recortador tiene un preset 1:1, toma un archivo a la vez hasta 10 MB y re-encoda formatos con pérdida a una calidad codificada de 92. Si prefieres redimensionar que recortar, el redimensionador tiene presets de porcentaje en 25, 50 y 75 con modos de ajuste de cubrir, contener y estirar.
¿Cómo convierto un ICO de vuelta a un PNG?
Usa ICO a PNG. Analiza el contenedor, recorre las entradas del directorio y mantiene la que tiene el mayor ancho, luego la escribe como un PNG. Apúntalo al archivo de 4.6 KB de arriba y obtendrás una imagen de 48x48, porque 48 es lo más grande empaquetado allí. No puede recuperar detalles que nunca estuvieron en el archivo. Si necesitas algo más grande, el escalador ejecuta Real-ESRGAN en tu navegador y siempre produce PNG; nuestra prueba small.png a 400x269 regresó como 800x538 en la configuración 2x. Si la reconstrucción o la interpolación simple es la herramienta adecuada depende de para qué es el icono. Vale la pena saber: el modelo solo produce 4x internamente, así que 2x es una reducción aplicada después. Nuestro convertidor cubre 24 pares en 11 formatos y escribe ICO para ninguno de ellos. Los iconos provienen del generador de iconos.
¿Es un icono de 196 KB demasiado grande?
Ese es android-chrome-512x512.png, y es lo más pesado en el conjunto por una distancia. Se obtiene cuando alguien instala tu sitio como una aplicación, que es lo que gobierna la especificación del Manifiesto de Aplicaciones Web W3C, así que no está en el camino crítico de una carga de página ordinaria. Aún puedes reducirlo. Nuestro compresor ofrece dos modos PNG que se comportan de manera completamente diferente: "PNG sin compresión" ejecuta oxipng en el nivel 3 y se mantiene sin pérdidas, mientras que "PNG tamaño de archivo más pequeño" cuantiza a una paleta de 256 colores con imagequant. En alpha.png, 942.4 KB en la fuente, el pase sin pérdidas dio 383.9 KB y el pase de paleta dio 98.3 KB. Un logo plano generalmente sobrevive a 256 colores sin que nadie lo note. La compresión también elimina cada trozo de metadatos, incluyendo EXIF e ICC, que para un icono es exactamente lo que deseas.
Aquí está el siguiente paso concreto. Abre el generador de iconos, coloca la fuente cuadrada más grande que tengas (acepta JPEG, PNG, WebP, AVIF, GIF y SVG hasta 10 MB, un archivo), establece el color de fondo en el hex de tu marca, deja el margen en 0 y genera. Copia las cuatro etiquetas de enlace en `<head>`, sube favicon.ico a la raíz de tu web y has terminado. Si deseas confirmar que nada salió de tu máquina, observa la pestaña de red mientras se ejecuta, o lee nuestra página de privacidad. Dónde pertenece cada uno de los siete archivos en tu servidor está escrito por separado en su totalidad.