Tamaño del favicon: 16, 32, 48, 180, 192 y 512 px explicados (y cómo crearlo)

16×16 px: la pestaña del navegador. 32×32 px: pestañas en pantallas de alta densidad, marcadores y la barra de tareas de Windows. 48×48 px: accesos directos de Windows y el mínimo que usa Google para el icono junto a tu web en los resultados (Google pide una imagen cuadrada cuyo tamaño sea múltiplo de 48 px, como 48, 96 o 144).

PNG de 180×180 px: el icono que muestran iPhone y iPad al añadir tu web a la pantalla de inicio (apple-touch-icon). PNG de 192×192 y 512×512 px: pantallas de inicio de Android y apps web instalables, declarados en el manifiesto; el de 512 px también se usa en la pantalla de carga.

Si solo vas a hacer una cosa, crea un favicon.ico con 16, 32 y 48 px dentro y un PNG de 180 px. Con eso cubres pestañas, resultados de búsqueda y móviles.

Un archivo favicon.ico puede contener varias imágenes de distintos tamaños, y el navegador elige la adecuada: 16×16 para las pestañas, 32×32 para pantallas de alta densidad y la barra de tareas, y 48×48 para los accesos directos de Windows. Con los tres en un solo ICO cubres casi todos los casos.

Los móviles usan archivos aparte. iOS busca un PNG de 180×180 (apple-touch-icon), y Android y las apps web instalables usan PNG de 192×192 y 512×512 declarados en un manifiesto web.

ICO es la opción más compatible y la que los navegadores piden automáticamente en /favicon.ico. Los favicons PNG funcionan en todos los navegadores modernos si los enlazas. Los SVG se ven perfectos a cualquier tamaño y los admiten Chrome, Edge y Firefox actuales, pero no todos los navegadores, así que conviene mantener un ICO como respaldo.

Parte de una imagen cuadrada y simplifica: una letra o una forma marcada sobreviven al reducirse; un logo detallado con texto fino se convierte en una mancha. Usa mucho contraste y comprueba cómo se ve en pestañas claras y oscuras.

Si tu logo es un SVG, conviértelo desde el SVG y no desde un PNG. El vector se vuelve a dibujar en cada tamaño, así que incluso la versión de 16 píxeles queda nítida.

Convierte tu PNG, JPG o SVG con la herramienta PNG a ICO o SVG a ICO de Localvert. Obtendrás un único favicon.ico con versiones de 16, 32 y 48 píxeles. Las imágenes no cuadradas se completan con márgenes en lugar de recortarse, y se conserva la transparencia.

Coloca favicon.ico en la raíz de tu web y añade esta línea dentro de <head>: <link rel="icon" href="/favicon.ico" sizes="any">. Los navegadores guardan el favicon en caché mucho tiempo; si no ves el cambio, prueba en una ventana privada.