Tamaños de favicon: qué archivos necesitas y a cuántos px
¿Por qué hay tantos archivos de favicon?
El favicon es el pequeño icono de tu sitio: aparece en la pestaña del navegador, en los marcadores, en los resultados de búsqueda y en la pantalla de inicio del móvil. Es la cara del sitio; sin él, algo parece inacabado.
El problema es que cada uno de esos lugares pide un tamaño y un formato distintos. Por eso un favicon no es un archivo, sino un pequeño juego de ellos.
El juego que necesitas
- favicon.ico — 16, 32 y 48px empaquetados en un solo archivo. Lo usan la barra de direcciones, las pestañas y los marcadores; el estándar más antiguo y aún imprescindible
- PNG de 16px y 32px — las versiones nítidas que los navegadores modernos usan en las pestañas
- apple-touch-icon de 180px — se usa al añadir tu sitio a la pantalla de inicio de un iPhone o iPad
- PNG de 192px y 512px — para pantallas de inicio de Android e instalaciones PWA, registrados en site.webmanifest
Suelta un logo y obtén favicon.ico, el icono táctil de Apple y los iconos PWA en un ZIP, más el HTML para tu sitio. Todo ocurre dentro de tu navegador.
Generar el juego completo de faviconsSin instalar nada y sin registro · Todo ocurre en tu navegador y los archivos nunca se envían a un servidor
Cómo preparar la imagen original
Lo correcto es partir de una imagen cuadrada grande (512px o más) e ir reduciendo. Ampliar una imagen pequeña solo la vuelve borrosa.
Tiene que reconocerse a 16px, así que cuanto más simple, mejor. Un símbolo gana a un logotipo con mucho texto; un pequeño margen en los bordes evita que se vea apretado, y un fondo transparente queda bien tanto en tema claro como oscuro.
Cómo añadirlos al HTML
Sube los archivos a la carpeta raíz del sitio y decláralos con etiquetas link en el head: rel="icon" para el ICO y los PNG, rel="apple-touch-icon" para el icono de 180px y rel="manifest" para site.webmanifest.
Como respaldo, la mayoría de los navegadores encuentran un favicon.ico colocado en la raíz aunque no haya etiquetas. Pero para que los PNG por tamaño y los iconos de pantalla de inicio funcionen bien, añade las etiquetas.
No montes el juego a mano
Redimensionar imagen a imagen y empaquetar el ICO a mano es tedioso. Suelta una sola imagen en el generador de favicons de Image Converter NOW y obtendrás favicon.ico, todos los PNG, site.webmanifest y las etiquetas HTML listas para pegar, en un único ZIP.
Todo se procesa en tu navegador: tu logotipo nunca se sube a un servidor.
Suelta un logo y obtén favicon.ico, el icono táctil de Apple y los iconos PWA en un ZIP, más el HTML para tu sitio. Todo ocurre dentro de tu navegador.
Generar el juego completo de faviconsSin instalar nada y sin registro · Todo ocurre en tu navegador y los archivos nunca se envían a un servidor