Generador de favicon

Crea un favicon a partir de cualquier imagen

Un favicon es el pequeño icono que aparece en las pestañas del navegador, los marcadores y en las pantallas de inicio de los teléfonos. Este generador toma una imagen cuadrada y produce iconos PNG nítidos en todos los tamaños que necesitan los sitios modernos, desde el icono de pestaña de 16×16 hasta el icono de 512×512 para aplicaciones web progresivas, íntegramente en tu navegador.

Suelta un logotipo y verás una vista previa en vivo de cada tamaño, lista para descargar individualmente. También generamos las etiquetas <link> exactas para pegar en el <head> de tu página, así que configurar tu favicon lleva segundos.

Consejos para iconos nítidos

Empieza con una imagen cuadrada de al menos 512×512 píxeles. Las formas simples y llamativas con mucho contraste siguen siendo reconocibles al reducirse a 16 píxeles, mientras que el detalle fino y el texto pequeño se convierten en una mancha. Prueba la vista previa de 16×16: si aún puedes distinguir qué es, tienes un gran favicon.

Qué tamaño se usa dónde

• 16×16 y 32×32 — pestañas del navegador, marcadores y barras de direcciones.
• 48×48 y 64×64 — accesos directos del escritorio y algunos iconos de resultados de búsqueda y listas de sitios.
• 128×128 — fichas más grandes de tiendas y de tipo extensión.
• 180×180 — el Apple touch icon que se usa cuando una página se añade a la pantalla de inicio de un iPhone o iPad.
• 192×192 y 512×512 — iconos de pantalla de inicio de Android y de aplicaciones web progresivas indicados en un web app manifest.

Conviene saber

Cada imagen se escala directamente a un cuadrado, así que usa un origen cuadrado: un logotipo rectangular se deformaría. La transparencia se conserva en los archivos PNG, pero iOS no muestra bien los touch icons transparentes, por lo que un fondo sólido es una opción más segura para la versión de 180×180. Los archivos se llaman como favicon-32x32.png, lo que coincide con el fragmento generado, así que conserva esos nombres cuando los copies a la raíz de tu sitio. Esta página produce solo archivos PNG; si además quieres un clásico favicon.ico, crea uno a partir de tu imagen original con el conversor de PNG a ICO.

Añadir los iconos a tu sitio

Descarga los tamaños que necesites, colócalos en la raíz pública de tu sitio y pega las etiquetas <link> generadas en el <head>. Si creas un web app manifest, haz que su lista de iconos apunte a los archivos de 192×192 y 512×512. Tras publicar, los buscadores y navegadores pueden tardar en actualizar un favicon en caché, así que prueba en una ventana privada y no te alarmes si el icono antiguo permanece un día o dos.