Comprobador de favicon
Una pequeña imagen representa a tu sitio en las pestañas, los marcadores, las pantallas de inicio del móvil y los resultados de búsqueda, y cada uno de esos lugares pide un archivo distinto. Esta comprobación descarga cada icono que publicas y lo mide.
Un logo, cuatro peticiones distintas
La palabra “favicon” viene de 1999, cuando Internet Explorer 5 empezó a buscar un archivo llamado favicon.ico para decorar el menú de Favoritos. Ese cuadrado de 16 píxeles se sigue pidiendo hoy, pero ya no está solo. El archivo que se descarga depende del dispositivo que tenga delante el visitante:
| Dónde aparece | Archivo que se usa | Tamaño |
|---|---|---|
| Pestaña del navegador, marcadores, historial | favicon.ico, o un PNG o SVG declarado con rel="icon" | de 16 a 48 px, o vectorial |
| Pantalla de inicio del iPhone y el iPad | rel="apple-touch-icon" | 180 × 180 px |
| Pantalla de inicio de Android, aplicación web instalada | Iconos indicados en el web manifest | 192 y 512 px |
| Resultados de Google en el móvil | El archivo de rel="icon" | Un múltiplo de 48 px, o vectorial |
Cuando falta el archivo adecuado, cada sistema recurre a algo peor. Obtienes un símbolo de página en blanco en la pestaña, una diminuta captura de tu página en iOS, una letra en un círculo gris en Android, un globo terráqueo en Google.
Qué se descarga y qué se mide
La comprobación lee el HTML de la página que le das y reúne cada <link> cuyo rel sea icon, apple-touch-icon o mask-icon, además del enlace manifest y los iconos que ese archivo enumera. Después añade dos direcciones que los navegadores prueban sin que nadie se lo diga: /favicon.ico y /apple-touch-icon.png.
Se descargan hasta 16 archivos. No nos fiamos del atributo sizes declarado. Un archivo ICO se abre para listar los tamaños que contiene, un SVG se lee para ver su viewBox y los archivos PNG o JPEG se miden en píxeles. En el icono de Apple se muestrean las esquinas para detectar transparencia. Un archivo que resulta ser una página de error HTML se informa como tal, y con /favicon.ico esa sorpresa es frecuente.
Cómo leer la lista de comprobación
- Favicon clásico
- Pasa con un archivo ICO, o con un PNG de 16, 32 o 48 px. Falla cuando no existe nada de eso, y da una advertencia cuando un SVG es el único icono, porque los lectores de feeds, los navegadores antiguos y muchas herramientas piden
/favicon.icoy nada más. - Icono SVG
- Opcional. Un archivo vectorial se mantiene nítido a cualquier tamaño y puede cambiar de colores en el modo oscuro.
- Icono de Apple
- Falla si no está. Advertencias: menor de 180 px, fondo transparente (iOS lo pinta de negro) o un archivo que existe en la dirección por defecto sin una etiqueta en la página.
- Manifest
- Una advertencia cuando la página no enlaza ninguno. Si enlaza uno que no se puede cargar o que no es JSON válido, es un fallo. Dentro de él, si falta el icono de 192 px es un fallo, si falta el de 512 px es una advertencia y si falta un icono “maskable” es una nota.
- Color del tema
- Opcional.
<meta name="theme-color">tiñe la barra del navegador en Android. - Tamaño aceptado por Google
- Una advertencia, salvo que un icono cuadrado mida un múltiplo de 48 px (48, 96, 144, 192) o sea un SVG.
Cualquier fallo da el veredicto “Incompleto” y cualquier advertencia “Casi”. Las maquetas que hay encima de la lista muestran el icono que elegiría cada sistema con lo que publicas.
Un juego completo a partir de un dibujo
Parte de una versión cuadrada de tu logo, simplificada hasta que aún se reconozca a 16 píxeles. Exporta estos archivos:
favicon.icocon imágenes de 16, 32 y 48 px dentro, colocado en la raíz del sitio.icon.svg, si tu logo existe en vectores.apple-touch-icon.png, de 180 × 180, sobre un fondo sólido con un margen de unos 20 px. iOS redondea las esquinas por su cuenta.icon-192.pngeicon-512.pngpara el manifest.icon-maskable-512.png, con el logo dentro del 80 % central del cuadrado, porque Android puede recortar la imagen en forma de círculo.
Después decláralos:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Los resultados incluyen este bloque y un site.webmanifest equivalente con el nombre de tu sitio ya puesto.
La comprobación te dice que los archivos existen y tienen las dimensiones correctas. No puede decirte si el dibujo se lee bien a 16 px ni si queda bien en una barra de pestañas oscura. Mira las maquetas y después un móvil real.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
Necesitas varios. Ofrece un favicon.ico con 16, 32 y 48 px, un PNG de 180 px para los dispositivos Apple y PNG de 192 y 512 px en un web manifest. Un icono SVG puede cubrir todos los tamaños de pestaña a la vez en los navegadores actuales.
¿Por qué Google muestra un globo terráqueo en vez de mi favicon?
Google necesita un icono cuadrado que sea múltiplo de 48 px o un SVG, declarado con rel="icon" en la página de inicio, y accesible para Googlebot (sin bloquearlo en robots.txt). Cuando lo arreglas, el nuevo icono aparece al volver a rastrear la página de inicio, lo que puede tardar días o unas semanas.
¿Sigo necesitando un archivo favicon.ico?
Sí. Los navegadores aceptan PNG y SVG, pero muchos otros programas piden /favicon.ico directamente: lectores de feeds, servicios de vista previa de enlaces, algunos gestores de contraseñas y navegadores antiguos. Sin él, además, tu servidor registra un 404 por cada una de esas peticiones.
¿Por qué mi icono tiene fondo negro en el iPhone?
El apple-touch-icon tiene zonas transparentes, e iOS rellena la transparencia de negro. Exporta el PNG sobre un fondo opaco del color de tu marca.
Cambié mi favicon. ¿Por qué sigo viendo el antiguo?
Los navegadores guardan los favicon en la caché más tiempo que casi cualquier otro archivo. Abre directamente la dirección del icono y recárgala, o añade una versión al enlace, por ejemplo href="/favicon.ico?v=2". Los buscadores se actualizan a su propio ritmo.
¿Qué es un icono maskable?
Un icono dibujado con un margen extra para que Android pueda recortarlo en forma de círculo, de cuadrado redondeado o de cualquier otra forma sin cortar el logo. Se declara en el manifest con "purpose": "maskable". Sin uno, Android reduce tu icono normal y lo coloca sobre un disco blanco.