Un favicon ayuda a encontrar tu sitio entre las pestañas abiertas. Aquí tienes qué tamaños necesitas y cómo añadirlos a tus páginas.
Un favicon es el pequeño icono que aparece en las pestañas del navegador, los marcadores y los resultados de búsqueda. Es un detalle pequeño, pero hace que un sitio sea más fácil de reconocer y parezca más cuidado.
Empieza con una imagen sencilla y cuadrada
Los favicons se muestran incluso a 16 × 16 píxeles, así que los detalles finos desaparecen. Lo que mejor funciona es una letra gruesa, un símbolo simple o una versión simplificada de tu logotipo. Parte de una imagen cuadrada de al menos 512 × 512 píxeles.
Los archivos que necesitas
- favicon.ico con tamaños de 16, 32 y 48 píxeles, para navegadores antiguos y Windows.
- favicon-32x32.png y favicon-16x16.png para navegadores modernos.
- apple-touch-icon.png de 180 × 180 píxeles para la pantalla de inicio de iPhone y iPad.
- android-chrome-192x192.png y 512x512.png, indicados en un archivo site.webmanifest, para Android.
Añade las etiquetas a tus páginas
Sube los archivos a la carpeta raíz de tu sitio web y añade estas líneas dentro del <head> de cada página:
<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">Genéralos todos de una vez
Crear cada tamaño a mano es pesado. Nuestro Generador de favicons crea todos los archivos anteriores a partir de una imagen, los guarda en un ZIP y te da el HTML para copiar.
Los navegadores guardan los favicons en caché durante mucho tiempo, así que si cambias un icono y no ves la diferencia, prueba en una ventana privada o borra la caché del navegador.