Tamaños, formatos y etiquetas HTML de los favicons
Un favicon es un archivo pequeño, pero los navegadores, los móviles y las aplicaciones web instaladas buscan tamaños distintos. Esta guía explica qué archivos necesita un sitio web, cómo declararlos en HTML y cómo diseñar un icono que siga siendo legible a 16 píxeles.
Qué es un favicon
Un favicon (abreviatura de «favourites icon», icono de favoritos) es la pequeña imagen que identifica un sitio web en las pestañas, los marcadores y el historial. Los móviles usan una versión más grande cuando el sitio se añade a la pantalla de inicio, las aplicaciones web instaladas usan los iconos de su manifiesto y algunos buscadores muestran el favicon junto a los resultados. Como estos lugares usan tamaños distintos, un sitio web suele ofrecer un pequeño conjunto de archivos.
Favicons ICO, PNG y SVG
| Formato | Qué contiene | Qué hay que saber |
|---|---|---|
ICO (favicon.ico) | Varios tamaños en un solo archivo, a menudo 16, 32 y 48 píxeles | Es el formato más antiguo. Muchos navegadores solicitan /favicon.ico en la raíz del sitio aunque la página no lo enlace, así que es una alternativa útil. |
| PNG | Un tamaño por archivo, con transparencia | Se declara con un atributo sizes para que el navegador pueda elegir un archivo adecuado. También se usa para el Apple touch icon y los iconos del manifiesto. |
| SVG | Un dibujo vectorial que se adapta a cualquier tamaño | Lo admiten la mayoría de los navegadores de escritorio actuales, pero no todos los navegadores, así que conserva también los archivos ICO o PNG. Un favicon SVG puede adaptarse a un tema oscuro con CSS. |
Un archivo ICO es un pequeño contenedor: una cabecera enumera cada imagen con su tamaño y su posición, y las imágenes pueden guardarse como datos PNG. El Generador de favicon de LeedyBox crea un favicon.ico con imágenes PNG de 16, 32 y 48 píxeles, además de archivos PNG para los demás tamaños.
Tamaños habituales y dónde se usan
| Tamaño (píxeles) | Archivo típico | Uso típico |
|---|---|---|
| 16 × 16 | favicon-16x16.png, dentro de favicon.ico | Pestañas y marcadores en pantallas estándar |
| 32 × 32 | favicon-32x32.png, dentro de favicon.ico | Pestañas en pantallas de alta densidad, algunos accesos directos |
| 48 × 48 | dentro de favicon.ico | Accesos directos e iconos de escritorio más grandes en algunos sistemas |
| 180 × 180 | apple-touch-icon.png | Icono de la pantalla de inicio en iPhone y iPad |
| 192 × 192 | android-chrome-192x192.png | Icono de la pantalla de inicio en Android, incluido en el manifiesto |
| 512 × 512 | android-chrome-512x512.png | Diálogos de instalación y pantallas de bienvenida de las aplicaciones web |
Empieza con una imagen de origen cuadrada de al menos 512 × 512 píxeles o de un archivo SVG. Una imagen de origen pequeña tiene que ampliarse para los iconos más grandes y se ve borrosa. A un logotipo que no es cuadrado hay que añadirle espacio alrededor o recortarlo.
El Apple touch icon no debe ser transparente: algunos dispositivos de Apple muestran las zonas transparentes en negro. Rellena el fondo con un color. El iPhone y el iPad redondean las esquinas por sí mismos, así que el archivo puede ser un simple cuadrado. Consulta cómo funciona la transparencia en PNG y JPG para saber más sobre los canales alfa.
Las etiquetas HTML y el manifiesto de la aplicación web
Coloca los archivos en la carpeta raíz del sitio web y añade estas etiquetas dentro del <head> de cada página:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 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">Si también tienes un favicon SVG, añade <link rel="icon" href="/favicon.svg" type="image/svg+xml">. El manifiesto (site.webmanifest) es un pequeño archivo JSON con el nombre del sitio, un nombre corto, los iconos de 192 y 512 píxeles, un color de tema, un color de fondo y un modo de visualización como standalone. Si los archivos están en otra carpeta, cambia todas las rutas de las etiquetas y del manifiesto.
Diseñar para tamaños diminutos
- Mantenlo sencillo. A 16 píxeles, las líneas finas, el texto pequeño y los detalles delicados se convierten en una mancha borrosa. Un símbolo simplificado, una sola forma o una o dos letras funcionan mejor que un logotipo completo con eslogan.
- Usa un contraste fuerte. Una diferencia clara de luminosidad entre el icono y su fondo importa más que los colores exactos de la marca.
- Deja poco margen. El espacio vacío reduce el icono visible. Un pequeño margen puede venir bien en los iconos grandes, pero los favicons pequeños se reconocen mejor cuando ocupan la mayor parte del cuadrado.
- Comprueba el tamaño real. Mira el icono con el zoom al 100 % en una pestaña, no solo en una vista previa ampliada.
Temas oscuros del navegador
Mucha gente usa una barra de pestañas oscura. Un logotipo oscuro sobre un fondo transparente puede casi desaparecer en ella, y un logotipo blanco puede perderse en un tema claro. Las soluciones habituales son una forma de fondo sólida o redondeada detrás del logotipo, un contorno claro o un favicon SVG que cambie sus colores con una consulta de medios prefers-color-scheme (donde se admitan los favicons SVG). El generador de LeedyBox muestra una barra de pestañas clara y otra oscura para que puedas comparar ambas.
Actualizar un favicon y la caché del navegador
Los navegadores guardan los favicons en su caché, a veces durante mucho tiempo, así que un icono nuevo puede no aparecer justo después de subirlo. Una recarga forzada o una ventana privada pueden mostrar la nueva versión. Para que los visitantes que vuelven lo obtengan antes, cambia el nombre del archivo o añade una versión a la URL en tus etiquetas, por ejemplo /favicon-32x32.png?v=2. Los iconos de los marcadores y de los resultados de búsqueda pueden tardar más en actualizarse. Después de cualquier cambio, prueba el resultado en los navegadores y dispositivos que te interesen.
Preguntas frecuentes
¿Sigue siendo necesario favicon.ico?
No es obligatorio, pero es una alternativa sencilla: muchos navegadores y otras herramientas buscan /favicon.ico en la carpeta raíz de un sitio. Solo ocupa unos pocos kilobytes.
¿Puedo usar un JPG como favicon?
Los navegadores normalmente pueden mostrarlo, pero JPG no admite transparencia y su compresión puede emborronar los detalles pequeños. Los archivos PNG, ICO o SVG son mejores opciones para iconos.
¿Por qué no aparece mi nuevo favicon?
Lo más frecuente es que el icono antiguo siga en la caché o que las rutas de las etiquetas HTML no coincidan con el lugar donde se subieron los archivos. Abre directamente la URL de cada archivo en el navegador para comprobar que se carga.