¿Qué tamaños se generan?

16×16, 32×32, 48×48 (incluidos en favicon.ico), 180×180 (Apple Touch Icon), 192×192 y 512×512 (iconos PWA).

¿Se conserva la transparencia?

Sí. El canal alfa del PNG se conserva en todos los archivos de salida, incluido el formato ICO.

¿Cuál es la diferencia entre favicon.ico y los iconos PNG?

favicon.ico agrupa varios tamaños en un solo archivo para dar compatibilidad a navegadores antiguos, mientras que los iconos PNG los usan los navegadores modernos y las PWA. Ofrecer ambos garantiza la máxima compatibilidad.

¿Qué hace que una imagen de origen sea buena?

Un PNG cuadrado de fondo transparente de 512×512 píxeles o más da los mejores resultados al reducirse a tamaños de icono más pequeños.

¿Cómo añado el favicon a mi sitio web?

Añade <link rel="icon" href="/favicon.ico"> y <link rel="apple-touch-icon" href="/apple-touch-icon.png"> al <head> de tu HTML.

ImageStream

FLEXEAM · MEMETALKMás que palabras. Más como tú.No lo expliques. Ven a jugar.Explorar sin registrarte →AD

Generador de favicon

Convierte PNG a favicon.ico y paquete multi-tamaño

Un favicon es el pequeño icono que se muestra en las pestañas del navegador, los marcadores y las pantallas de inicio de los móviles. Sube un PNG y genera al instante un paquete completo de iconos de varios tamaños compatible con todos los navegadores y dispositivos.

Cómo generar un favicon

1Sube una imagen PNG (se recomienda fondo transparente)
2Selecciona los tamaños de icono que necesitas
3Descarga el paquete ZIP y añádelo a tu sitio web

Consejos y casos de uso del favicon

Sitio web: compatibilidad entre navegadores

Para que se vea bien en Chrome, Safari, Firefox y Edge, proporciona tanto favicon.ico como archivos PNG. Sube todos los archivos del ZIP generado a la raíz de tu sitio y añade las etiquetas link correspondientes en el head de tu HTML.

PWA / pantalla de inicio del móvil

Para las aplicaciones web progresivas y los accesos directos de la pantalla de inicio, necesitas PNG de 192×192 y 512×512. Registra ambos tamaños en el array icons de tu manifest.json para mostrar iconos de alta resolución en Android e iOS.

Identidad de marca: el logotipo como icono

Recorta solo el símbolo o la marca de tu logotipo en un PNG cuadrado antes de convertirlo en favicon. Mantén el diseño sencillo: debe reconocerse incluso a 16×16 píxeles.