¿Qué es un favicon?
Es el pequeño icono de tu web que aparece en la pestaña del navegador, en los marcadores, en el historial y, cada vez más, junto a tu web en los resultados de Google. También es el icono que sale en la pantalla de inicio del móvil cuando alguien añade tu web como si fuera una aplicación.
Una web sin favicon muestra un icono genérico y da sensación de descuido. Con uno reconocible, tu pestaña se encuentra a la primera entre otras veinte.
¿Qué archivos necesito?
- favicon.ico: el clásico. Lleva dentro varios tamaños (16, 32 y 48 px) y es el que buscan por su cuenta muchos navegadores y lectores de noticias en la raíz de la web.
- favicon.svg: vectorial, se ve nítido a cualquier tamaño y pesa muy poco. Lo usan los navegadores modernos. Sale si haces el favicon con letras o subes un SVG.
- apple-touch-icon.png (180 px): el icono para la pantalla de inicio del iPhone y el iPad. Siempre lleva fondo, porque iOS pinta de negro lo transparente.
- android-chrome de 192 y 512 px y site.webmanifest: el icono y el nombre de tu web en Android cuando se instala en la pantalla de inicio.
Cómo ponerlo en tu web
- Descarga el ZIP y descomprímelo.
- Sube todos los archivos a la carpeta raíz de tu web, donde está la página de inicio (por ejemplo,
public_html). - Pega el código de arriba dentro de la etiqueta
<head>de tus páginas. En WordPress no hace falta: ve a Apariencia › Personalizar › Identidad del sitio › Icono del sitio y sube el PNG de 512 px.
Los navegadores guardan el favicon en caché durante mucho tiempo. Si no ves el nuevo, abre la web en una ventana privada o vacía la caché.
Consejos para que se vea bien
A 16 píxeles no caben detalles: el logo completo con su texto suele quedar ilegible. Funciona mejor la inicial de tu marca, un símbolo sencillo o un emoji, con buen contraste entre el color del fondo y el del dibujo. Mira la vista previa en la pestaña clara y en la oscura: si en una de las dos se pierde, ponle fondo.