Generador de favicon gratuito para todas las plataformas

Resumen: Los favicons aparecen en las pestañas del navegador, marcadores, pantallas de inicio del móvil y resultados de búsqueda de Google. Una sola imagen fuente de 512x512 puede producir todos los tamaños que necesitas en segundos.

Un favicon es el pequeño icono que representa tu sitio web en todas las plataformas y dispositivos. Aparece en las pestañas del navegador, listas de marcadores, menús de historial, lanzadores de aplicaciones web progresivas, y desde 2019, directamente en los resultados de búsqueda móvil de Google junto al nombre de tu sitio. A pesar de su pequeño tamaño, el favicon desempeña un papel desproporcionado en el reconocimiento de marca y la confianza del usuario.

La documentación de Google confirma que los sitios deben tener un favicon válido para mostrar uno en los resultados de búsqueda. Las páginas sin favicon muestran un icono de globo genérico, lo que reduce la distintividad visual y puede disminuir las tasas de clics en comparación con competidores con marca. Una guía de Google Search Central detalla los requisitos exactos: el archivo debe ser múltiplo de 48 píxeles, cuadrado y accesible para Googlebot.

Por qué los favicons importan para el SEO y la marca

Cuando los usuarios escanean los resultados de búsqueda de Google en el móvil, el favicon es uno de los primeros elementos visuales que notan. Un icono claro y reconocible crea una asociación de marca instantánea y puede mejorar la tasa de clics al hacer que tu anuncio destaque sobre los competidores que usan iconos predeterminados.

Más allá de la búsqueda, los favicons sirven como puntos de contacto de marca persistentes. Cada pestaña del navegador abierta muestra tu icono. Cada entrada de marcador lo muestra. Cuando un usuario añade tu sitio a la pantalla de inicio de su teléfono, el icono Apple Touch o el icono Android Chrome se convierte en tu representación similar a una aplicación. Los sitios que descuidan estos activos parecen inacabados y poco profesionales.

Las aplicaciones web progresivas (PWA) dependen totalmente de favicons correctamente configurados. El manifiesto de la aplicación web hace referencia a archivos de icono en múltiples resoluciones. Sin ellos, es posible que no aparezca el mensaje de instalación y la PWA no se mostrará correctamente en la pantalla de inicio.

Todos los tamaños de favicon que necesitas

Una implementación completa de favicon cubre cuatro contextos principales, cada uno requiriendo tamaños de archivo específicos:

Los favicons del navegador utilizan archivos ICO o PNG de 16x16 y 32x32 píxeles. Estos aparecen en pestañas, barras de direcciones y menús de marcadores. La versión 32x32 también es utilizada por los accesos directos de la barra de tareas de Windows.

Los iconos Apple Touch requieren un PNG de 180x180 píxeles. iOS lo utiliza cuando los usuarios añaden tu sitio a su pantalla de inicio. Sin él, Safari toma una captura de pantalla de tu página en su lugar, lo que raramente tiene buen aspecto.

Los iconos de Android Chrome necesitan PNGs de 192x192 y 512x512 píxeles referenciados en el manifiesto de la aplicación web. Estos impulsan las instalaciones de PWA y la función Añadir a la pantalla de inicio. La versión 512x512 también se usa para pantallas de inicio.

Los mosaicos de Windows usan un PNG de 150x150 píxeles para el mosaico del menú Inicio de Microsoft y otras integraciones de Windows. Un archivo browserconfig.xml opcional te permite personalizar el color del mosaico.

Nuestro generador de favicon gratuito produce todos estos tamaños desde una sola imagen fuente. Sube una vez, descarga un paquete completo con cada formato incluido.

Cómo crear la imagen fuente perfecta

Comienza con una imagen cuadrada de 512x512 píxeles o más. El formato SVG es ideal porque escala sin pérdida de calidad, pero un PNG de alta resolución funciona igual de bien.

La simplicidad es clave. Los favicons se muestran en tamaños extremadamente pequeños, por lo que los detalles intrincados desaparecen. Los favicons más efectivos usan formas audaces, alto contraste y elementos mínimos. Piensa en el pájaro de Twitter, el gato de GitHub o el botón de reproducción de YouTube, todos reconocibles al instante a 16 píxeles.

Evita usar fotografías o logotipos completos con texto. Las letras funcionan solo si son caracteres individuales en una tipografía en negrita. Muchas marcas usan solo su letra inicial o una versión simplificada de su logo.

Usa fondos transparentes para los favicons PNG. Esto garantiza que el icono se vea limpio en cualquier tema del navegador, ya sea claro u oscuro. El formato ICO puede contener múltiples tamaños en un solo archivo, lo que lo convierte en un fallback confiable para navegadores más antiguos.

Implementar favicons con el HTML correcto

Después de generar tus archivos favicon, necesitas las etiquetas HTML correctas en la sección <head> de tu página. Las etiquetas esenciales son:

La etiqueta <link rel="icon"> apunta a tu favicon principal. Los navegadores modernos admiten PNG directamente: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.

La etiqueta <link rel="apple-touch-icon"> especifica el icono de la pantalla de inicio de iOS. Los dispositivos Apple buscan este atributo de relación exacto. Establece el atributo sizes en 180x180 para mejores resultados.

La etiqueta <link rel="manifest"> conecta tu manifiesto de aplicación web, que lista los iconos de Android Chrome con sus tamaños y propósitos. Esto es esencial para el soporte de PWA.

Para los mosaicos de Windows, la etiqueta <meta name="msapplication-TileImage"> proporciona el gráfico del mosaico. También puedes establecer <meta name="msapplication-TileColor"> para definir el color de fondo del mosaico.

Nuestro generador proporciona código HTML listo para pegar para todas estas etiquetas. Simplemente copia el bloque de código en la sección head de tu sitio, sube los archivos generados a tu directorio raíz, y cada plataforma queda cubierta.

Mejores prácticas de favicon para 2026

Mantén tu favicon coherente con tu identidad de marca. El icono debe usar los mismos colores y lenguaje visual que tu logo y diseño del sitio web. La coherencia entre los puntos de contacto construye el reconocimiento de marca con el tiempo.

Prueba tu favicon en múltiples navegadores y dispositivos. Chrome, Firefox, Safari y Edge renderizan los favicons de forma ligeramente diferente. Lo que se ve nítido en un navegador puede parecer borroso en otro si se sirve el tamaño incorrecto.

Usa el formato de favicon SVG donde sea compatible. Los navegadores modernos aceptan favicons SVG mediante <link rel="icon" type="image/svg+xml">. SVG escala perfectamente a cualquier tamaño y admite media queries de modo oscuro, permitiéndote adaptar tu icono a la preferencia del sistema del usuario.

Invalida la caché al actualizar favicons. Los navegadores almacenan en caché los favicons de forma agresiva. Después de cambiar tu icono, añade una cadena de consulta de versión o cambia el nombre del archivo para forzar a los navegadores a obtener la nueva versión.

Por último, incluye siempre un fallback ICO en /favicon.ico en la raíz de tu sitio. Algunos navegadores y herramientas aún buscan esta ruta predeterminada independientemente de lo que especifique tu HTML. Tenerlo presente garantiza que ninguna plataforma se quede sin el icono de tu marca.