Cómo usarla
- 1Sube una imagen o crea el icono con una letra o un emoji.
- 2Elige el color de fondo, el color del texto y si quieres esquinas redondeadas.
- 3Descarga los archivos generados.
- 4Sube los archivos a la raíz de tu web y pega el código HTML en el <head>.
Archivos que se generan
PNG de 16, 32 y 48 píxeles para pestañas y marcadores, apple-touch-icon de 180 px para la pantalla de inicio del iPhone, PNG de 192 y 512 px para Android y aplicaciones web progresivas, un favicon.ico real con varios tamaños dentro, el archivo site.webmanifest y el fragmento HTML para enlazarlo todo.
Consejos de diseño
A 16 píxeles apenas cabe nada: usa un símbolo o una o dos letras con mucho contraste, no el logotipo completo con texto. Parte de una imagen cuadrada de al menos 512 px. Comprueba que se distingue en pestañas con fondo claro y oscuro.
El favicon en Google
Google muestra el favicon junto a tu web en los resultados de búsqueda en móvil. Para que lo use, debe ser cuadrado, de al menos 48 × 48 px, estar enlazado en la página de inicio y ser rastreable.
Preguntas frecuentes
¿Qué tamaño debe tener un favicon?
No hay un único tamaño: se usan 16, 32 y 48 px para el navegador, 180 px para iPhone y 192 y 512 px para Android. Esta herramienta los genera todos.
¿Sigue haciendo falta favicon.ico?
Los navegadores modernos usan los PNG enlazados en el HTML, pero muchos programas y lectores RSS siguen buscando /favicon.ico en la raíz. Conviene tener ambos.
¿Por qué no se actualiza mi favicon?
Los navegadores lo guardan en caché de forma agresiva. Fuerza la recarga, abre la web en una ventana privada o añade un parámetro de versión a la URL del icono.
¿No te convencen los resultados?
Habla con Webin Agency sobre webs rápidas y optimizadas para SEO, e-commerce y gestión de Google Ads.