La respuesta corta
Ya no hacen falta decenas de archivos de icono. Las guías antiguas enumeran tamaños para mosaicos de Windows, cada modelo de iPad y navegadores que ya nadie usa; hoy casi todo lee uno de unos pocos archivos. Ponlos en la carpeta raíz de tu sitio, junto a la página de inicio, y añade las líneas correspondientes en el head de cada página.
El navegador pide /favicon.ico por su cuenta aunque no haya HTML, por eso ese archivo siempre debería existir. Todo lo demás se encuentra a través de las etiquetas link y del manifiesto.
| Archivo | Tamaño en píxeles | Lo usa |
|---|---|---|
| favicon.ico | 16, 32 y 48 en un solo archivo | Todos los navegadores, accesos directos de Windows, herramientas que solo miran la raíz |
| favicon-32x32.png y favicon-16x16.png | 32 y 16 | Pestañas y marcadores en pantallas normales y de alta densidad |
| apple-touch-icon.png | 180 | Pantalla de inicio de iPhone y iPad, marcadores de Safari |
| android-chrome-192x192.png | 192 | Pantalla de inicio de Android, app web instalada |
| android-chrome-512x512.png | 512 | Pantalla de bienvenida de las apps web instaladas |
| icon.svg (opcional) | Cualquiera, es vectorial | Navegadores de escritorio actuales que admiten favicon SVG |
Pruébalo aquí: Generador de favicon
Abrir la herramienta completaPor qué hay tantos tamaños
Un favicon aparece en lugares muy distintos. Una pestaña lo muestra a 16 por 16 píxeles CSS, que en una laptop con pantalla de alta densidad son 32 píxeles reales o más. Windows usa 48 píxeles para los accesos directos del escritorio. Google muestra el icono del sitio junto a los resultados y pide una imagen cuadrada; recomienda que sea mayor de 48 píxeles, y la imagen de 48 del favicon.ico junto con los PNG grandes lo cubren.
Los celulares funcionan de otra manera. Cuando alguien añade tu web a la pantalla de inicio, iOS busca el apple-touch-icon y Android lee los iconos del manifiesto web. Esos iconos conviven con apps de verdad, así que deben ser grandes y nítidos. Si faltan, el teléfono muestra una miniatura de la página o una letra.
Reducir una sola imagen grande no funciona bien en los tamaños más pequeños: un logo de 512 píxeles reducido a 16 convierte las líneas finas en una mancha gris. Por eso el generador dibuja por separado los PNG pequeños a partir de tu imagen y te deja ver el resultado a 16, 32, 48 y 180 píxeles antes de descargar.
Las etiquetas HTML que hay que añadir
Después de descargar el paquete, pega estas líneas en el head de tus páginas (la herramienta las muestra en Código HTML, con el botón Copiar código, y el ZIP las incluye en favicon-html.txt):
- <link rel="icon" href="/favicon.ico" sizes="48x48">
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
- <link rel="manifest" href="/site.webmanifest">
- <meta name="theme-color" content="#ffffff"> con tu color de fondo, que tiñe la barra del navegador en algunos celulares
Detalles de Apple, Android y SVG
El icono de Apple debe ser cuadrado y sin transparencia. iOS redondea las esquinas por su cuenta y rellena las zonas transparentes con negro, así que un logo transparente puede acabar sobre un fondo negro. El generador siempre da a este archivo un fondo sólido (tu color de fondo, o blanco si lo desactivaste) y lo deja cuadrado.
El archivo site.webmanifest lista los iconos de 192 y 512 píxeles junto con el nombre del sitio y los colores. Android lo usa para el icono de la pantalla de inicio y para las apps web instaladas. Android también puede recortar los iconos en un círculo u otra forma; si tu logo toca los bordes, añade margen para que no se corte nada importante. Algunos sitios añaden además un icono maskable aparte, con espacio extra alrededor del logo, para este caso.
Un favicon SVG se ve nítido a cualquier tamaño e incluso puede cambiar de color en modo oscuro con una consulta CSS dentro del archivo. Los navegadores de escritorio actuales lo admiten bien, pero no todos, así que tómalo como un añadido: conserva favicon.ico y los PNG, y si tienes un logo SVG limpio, añade tú mismo una línea como <link rel="icon" type="image/svg+xml" href="/icon.svg">. El generador también acepta un SVG como imagen de origen y lo dibuja nítido en cada tamaño.
Diseñar un icono que funcione a 16 píxeles
A 16 por 16 solo hay 256 píxeles, así que un logo completo con el nombre de la empresa se vuelve ilegible. Los buenos favicons usan una sola forma fuerte o una o dos letras.
- Usa el símbolo de tu logo sin el nombre, o tus iniciales. La opción Texto del generador crea un icono limpio con una a tres letras.
- Mantén las líneas gruesas. Todo lo que sea más fino que una doceava parte del icono desaparece a 16 píxeles.
- Usa mucho contraste entre el símbolo y el fondo. Revisa la vista previa de la pestaña en versión clara y oscura, porque mucha gente usa temas oscuros.
- Llena el espacio. Un margen grande hace que el icono se vea diminuto junto a otras pestañas; entre 0 y 10 por ciento suele quedar bien, algo más con la forma de círculo.
- Un fondo de color con la forma Redondeado o Círculo da un icono reconocible; un fondo transparente funciona si el símbolo contrasta bien en pestañas claras y oscuras.
Problemas frecuentes y soluciones
- Sigue apareciendo el icono antiguo: los navegadores guardan el favicon en caché mucho tiempo. Abre el archivo directamente, recarga con Ctrl+F5 o añade una versión a la dirección, por ejemplo favicon.ico?v=2.
- Google muestra un globo genérico: comprueba que el favicon sea accesible sin iniciar sesión, que no esté bloqueado en robots.txt y que sea cuadrado. Los resultados pueden tardar días o semanas en actualizarse.
- El icono en la pantalla de inicio del iPhone tiene bordes negros: el icono de Apple tenía transparencia. Usa el archivo del generador, que tiene fondo sólido.
- El icono se ve borroso: la imagen de origen era pequeña. Usa una imagen de al menos 512 píxeles o un SVG.
- El icono falta en algunas páginas: las etiquetas solo están en la plantilla de algunas páginas o las rutas son relativas. Usa rutas que empiecen con barra, como en el código generado.