Cómo hacer un favicon
Los tamaños, formatos y el código necesarios para un favicon que se vea en todas partes.
El favicon es el icono pequeño de la pestaña del navegador, de los marcadores y el que aparece junto a tu web en los resultados de búsqueda de Google en el móvil. Una web sin favicon parece a medio hacer, y uno borroso queda todavía peor. Hacer uno bueno lleva unos minutos.
Empieza con la imagen adecuada
Un favicon se muestra a un tamaño de hasta 16 por 16 píxeles, así que un logo completo con el nombre escrito resultará ilegible. Usa una marca sencilla: el símbolo de tu logo, una inicial o una forma contundente en el color de tu marca. Compruébalo reduciéndolo a una cuarta parte en pantalla: si aún se distingue, funcionará.
Parte de una imagen cuadrada de al menos 512 por 512 píxeles, preferiblemente un PNG con fondo transparente. Si tu logo no es cuadrado, recórtalo a un cuadrado con la proporción bloqueada en 1:1.
Los archivos que necesitas
| Archivo | Tamaño | Lo usan |
|---|---|---|
| favicon.ico | Contiene versiones de 16, 32 y 48 píxeles | Navegadores, sistemas antiguos, la petición por defecto de /favicon.ico |
| Un icono PNG | 32 por 32 y 192 por 192 | Navegadores modernos, pantalla de inicio de Android |
| apple-touch-icon.png | 180 por 180 | Marcadores en la pantalla de inicio de iPhone y iPad |
La Búsqueda de Google también usa tu favicon en los resultados. Tiene que ser cuadrado, de al menos 48 por 48 píxeles, y rastreable en tu web.
Crear el archivo ICO
Suelta tu PNG cuadrado en el conversor de PNG a ICO. Genera un archivo .ico de verdad con los tamaños pequeños que piden los navegadores. Para las versiones PNG, redimensiona esa misma imagen cuadrada a 180, 192 y 32 píxeles.
Añadirlo a tu web
Sube favicon.ico a la raíz de tu web para que esté accesible en tuweb.com/favicon.ico, y añade estas líneas dentro del head de tus páginas:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
En WordPress, ve a Apariencia, Personalizar, Identidad del sitio y sube una imagen cuadrada como Icono del sitio; WordPress crea los tamaños por ti. Shopify, Wix y Squarespace tienen cada uno un ajuste de favicon en las opciones del sitio o del tema.
Cuando el favicon nuevo no aparece
Los navegadores guardan los favicons en caché con mucha insistencia. Abre la web en una ventana privada, o entra directamente en tuweb.com/favicon.ico y recarga. Google puede tardar días o semanas en actualizar el icono en los resultados, después de volver a rastrear tu portada.
Errores habituales
- Usar el logo completo con texto pequeño, que a 16 píxeles se convierte en un borrón.
- Un icono blanco sobre fondo transparente, que desaparece en las pestañas claras del navegador.
- Poner solo un archivo minúsculo de 16 píxeles, que se ve borroso en pantallas de alta resolución.
- Olvidar el archivo en /favicon.ico, que algunos navegadores y rastreadores piden diga lo que diga la página.