Guía

Favicon (.ico) vs PNG

ICO y PNG no son rivales — son aliados. La configuración moderna de favicon usa .ico como respaldo universal y PNG como versión de alta densidad. Te explicamos cuándo gana cada uno.

ICO es único porque un solo archivo contiene múltiples resoluciones. El navegador o el SO elige la que mejor encaja en el momento de renderizar — sin ampliar ni difuminar.

PNG es más nítido a cualquier resolución individual y ofrece mejor compresión para logotipos de colores planos. No puede incluir varios tamaños en un solo archivo.

La configuración óptima es un .ico multiresolución más PNG independientes de 32×32 y 180×180 para navegadores de alta densidad y iOS.

Cómo funciona

  1. 1

    Parte de una fuente de 512×512

    PNG o SVG.

  2. 2

    Genera ambos formatos

    FetchFavicon produce un .ico multiresolución más PNG independientes de 16/32/48/180/192/512.

  3. 3

    Enlaza ambos en <head>

    <link rel="icon" href="/favicon.ico"> seguido de <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

Pruébalo ahora

Genera tanto .ico como PNG

Convertidor de PNG a ICO

Preguntas frecuentes

¿Cuál pesa menos?+

Un PNG individual es más ligero que un .ico con la misma resolución, pero un .ico multiresolución reemplaza entre 4 y 6 PNG y suele ganar en bytes totales.

¿Google muestra favicons PNG en los resultados de búsqueda?+

Sí. Google admite tanto .ico como PNG. Prefiere una relación de aspecto cuadrada de al menos 48×48.

¿PNG admite modo oscuro?+

No directamente. Usa una variante SVG junto a tu PNG para soporte de modo oscuro.

Herramientas relacionadas

Más guías

Guías

Explorar FetchFavicon

Categorías

Convertidores

Utilidades

Guías

Tutoriales