1. Añada una imagen
Arrastre un archivo sobre el área designada o seleccione un gráfico desde su dispositivo. Formatos admitidos: PNG, JPG, SVG. Tamaño recomendado: mín. 512×512 píxeles.
Crea favicon.ico para tu sitio web a partir de una imagen
Genere favicon.ico y un conjunto completo de iconos PNG para su sitio web a partir de una sola imagen. Todo el procesamiento se realiza localmente en el navegador.
Loading tool editor...
Esta herramienta funciona en una pantalla más grande
Para usar esta herramienta cómodamente, ábrala en un portátil, ordenador de escritorio o tableta en modo horizontal.
Consejo
Si usa una tableta, gírela a modo horizontal: cuando el ancho de la ventana sea suficiente, la herramienta se cargará automáticamente.
¿Qué es un favicon y por qué debería tener uno?
Un favicon es un pequeño icono que aparece en la pestaña del navegador junto al título de la página. También lo ve en los marcadores, el historial de navegación y en la pantalla de inicio del teléfono cuando alguien añade el sitio como acceso directo.
Este pequeño gráfico cumple una función importante: ayuda a los usuarios a reconocer rápidamente un sitio entre muchas pestañas abiertas. Cuando alguien tiene una docena de pestañas abiertas en el navegador, el favicon suele ser el único elemento visible que identifica el sitio.
El generador crea un conjunto completo de iconos: un archivo favicon.ico clásico para navegadores, iconos PNG en varios tamaños y un apple-touch-icon para dispositivos Apple. Si está construyendo una aplicación web (PWA), también puede generar iconos de 192x192 y 512x512 junto con un archivo manifest.
Cómo crear un favicon en 3 pasos
Generar un favicon tarda solo unos segundos:
2. Elija los tamaños
Seleccione los tamaños de icono que necesita. Para un sitio web normal: favicon.ico, 32×32 y 180×180. Para PWA, añada 192×192 y 512×512.3. Descargue los archivos
Después de generar, descargue todos los archivos como ZIP o cada icono individualmente. Debajo de la herramienta encontrará instrucciones para añadir el favicon a su sitio.
¿Qué tamaños de icono genera la herramienta?
Cada tamaño tiene su uso:
favicon.ico (32×32)
Formato clásico reconocido por todos los navegadores. Se muestra en la pestaña del navegador.
PNG 16×16 y 32×32
Tamaños estándar para navegadores modernos. Se muestran en pestañas y marcadores.
PNG 180×180 (apple-touch-icon)
Icono para dispositivos Apple (iPhone, iPad). Se muestra cuando alguien añade el sitio a su pantalla de inicio.
PNG 192×192 y 512×512
Iconos para aplicaciones web (PWA). Requeridos por el manifest y usados en tiendas de aplicaciones.
Si no está construyendo una PWA, solo necesita: favicon.ico, PNG 32×32 y PNG 180×180. Estos tres archivos cubren la mayoría de los casos de uso.
¿Qué hace especial al generador de favicon?
Privacidad: los archivos nunca salen de su ordenador
Todas las operaciones se realizan localmente en el navegador. La imagen no se envía a ningún servidor. Al cerrar la página, todos los datos se eliminan.Conjunto completo en un solo lugar
Favicon.ico, iconos PNG, apple-touch-icon, iconos PWA y manifest: todo desde una imagen, en una herramienta.Soporte de PNG, JPG y SVG
Puede usar un logotipo en cualquier formato. Si tiene SVG, los iconos serán nítidos en todos los tamaños.Listo para sitio web y PWA
La herramienta genera un archivo manifest.json para aplicaciones web. Debajo encontrará instrucciones para integrar los iconos.
Cómo usar el generador de favicon
Generar un favicon son unos simples pasos:
1. Añada la imagen fuente
Arrastre un archivo sobre el área designada o seleccione un gráfico desde su dispositivo. Formatos admitidos: PNG, JPG, SVG. Un logotipo simple o icono de al menos 512×512 píxeles funciona mejor.2. Elija los tamaños de icono
Seleccione qué tamaños de icono necesita. Puede seleccionar todos o solo algúnos. Para un sitio web normal: favicon.ico, 32×32 y 180×180.3. Configure las opciones de generación
Establezca opciones adicionales: fondo (transparente o color elegido), manifest (archivo de configuración PWA) y descarga automática.4. Genere y descargue los archivos
Después de iniciar la generación, la herramienta procesa la imagen localmente: nada se envía a un servidor. Descargue todos los archivos como archivo ZIP o los iconos individuales por separado.
Tamaños PNG
16×1632×32180×180
Fondo transparente (PNG/ICO)
Opciones de generación: ¿qué hace cada una?
Fondo (transparente o color)
Por defecto, el generador preserva la transparencia. También puede elegir un color de fondo específico.
Generar manifest (site.webmanifest)
Un archivo JSON para aplicaciones web (PWA). Si no está construyendo una PWA, esta opción no es necesaria.
Cómo descargar los archivos generados
Después de generar los iconos, tiene varias opciones de descarga:
Descargar todo como ZIP
El botón "Descargar todo" empaqueta todos los archivos generados en un solo archivo ZIP. Esta es la opción más cómoda cuando necesita el conjunto completo de iconos.Descargar archivos individuales
Cada icono generado tiene su propio botón de descarga: puede descargar un solo archivo sin descargar el conjunto completo. útil cuando solo necesita actualizar un tamaño.
Dónde y cómo añadir un favicon
WordPress
La mayoría de los temas de WordPress tienen una opción integrada para configurar el icono del sitio. La encontrará en el panel de administración:
Apariencia → Personalizar → Identidad del sitio → Icono del sitio
Suba allí el archivo de 512×512: WordPress generará automáticamente los tamaños más pequeños. Para un control total sobre los iconos, también puede subir archivos directamente al directorio raíz mediante FTP.
¿Qué imagen fuente funciona mejor?
Un favicon es un gráfico muy pequeño, tan pequeño como 16×16 píxeles. No toda imagen funciona bien como fuente:
Formas simples y símbolos legibles
Los logotipos simples, letras individuales o símbolos funcionan mejor. Evite gráficos complejos con muchos detalles.Formato cuadrado
Un favicon es cuadrado. Si la imagen fuente tiene una proporción distinta de 1:1, se recortará o estirará.Tamaño suficientemente grande
Recomendamos una imagen fuente de al menos 512×512 píxeles. Las imágenes más pequeñas se ampliarán.Formato SVG como fuente ideal
SVG se escala sin pérdida de calidad, por lo que los iconos en todos los tamaños serán nítidos.Colores de alto contraste
Un favicon debe ser visible en diferentes fondos (pestañas claras, modo oscuro). Elija colores que mantengan la legibilidad.
Favicon en los resultados de búsqueda de Google
Google muestra los favicons junto a la URL del sitio en los resultados de búsqueda. Los resultados móviles muestran favicons desde 2019. Los resultados en escritorio los incluyen desde enero de 2020. El favicon es un elemento visual de marca presente en cada búsqueda de Google.
Google establece requisitos específicos para la visualización de favicons. El icono debe medir al menos 48×48 píxeles. Debe ser cuadrado. La imagen debe ser claramente visible sobre fondo blanco. Google rechaza iconos con contenido inapropiado o vacío.
El Googlebot rastrea e indexa los favicons de forma independiente al contenido de la página. La actualización del favicon en los resultados puede tardar de varios días a varias semanas. El archivo favicon no debe estar bloqueado en robots.txt - de lo contrario, Google no podrá obtener la nueva versión.
Bing también muestra favicons en sus resultados. DuckDuckGo presenta los iconos del sitio junto a cada enlace. Un conjunto completo de favicons garantiza una apariencia de marca coherente en todos los motores de búsqueda. Los usuarios reconocen los favicons conocidos más rápido, lo que contribuye a una mayor tasa de clics.
Favicon e identidad visual de marca en España y Latinoamérica
La coherencia visual entre el favicon y el logotipo fortalece el recuerdo de marca. El icono aparece en las pestañas del navegador, los marcadores, el historial de navegación y en la pantalla de inicio del teléfono. Cuando un usuario tiene diez o más pestañas abiertas, el favicon es el único elemento visible que identifica el sitio.
En España, PrestaShop y WooCommerce son plataformas muy extendidas que permiten configurar el favicon en los ajustes del tema. En Latinoamérica, Tiendanube y Mercado Shops facilitan la personalización visual de las tiendas en línea. Con más de 500 millones de hispanohablantes conectados a internet, un favicon reconocible diferencia la marca en mercados fragmentados.
La norma UNE 139803 de accesibilidad web en España requiere contraste suficiente para los elementos visuales de los sitios públicos. El favicon debe ser legible tanto en modo claro como en modo oscuro. Colores contrastados y formas simples cumplen este requisito de manera fiable.
Las empresas de servicios - desde despachos de abogados hasta clínicas dentales - construyen confianza desde el nivel del icono en la pestaña del navegador. La ausencia de favicon o el uso del icono predeterminado del navegador puede sugerir falta de profesionalismo.
Favicon para PWA y dispositivos móviles
Las Progressive Web Apps requieren iconos adicionales más allá del favicon estándar. El archivo manifest.json debe incluir un array de iconos con dimensiones 192×192 y 512×512 píxeles en formato PNG.
Los iconos maskable son un tipo especial de icono para dispositivos Android. El sistema operativo recorta los iconos maskable en diferentes formas - círculos, cuadrados redondeados o gotas. La zona segura cubre el 80 % interior de la superficie de la imagen. Todos los elementos gráficos esenciales deben estar dentro de esta zona para evitar ser recortados.
Apple requiere un archivo apple-touch-icon separado de 180×180 píxeles. Este archivo debe declararse en la sección head del HTML - iOS no lo lee desde el archivo manifest.
La penetración móvil en Latinoamérica supera el 70 %. Las PWA permiten experiencias similares a aplicaciones nativas sin necesidad de descarga desde tiendas. En España, bancos y servicios públicos adoptan progresivamente esta tecnología para ofrecer acceso rápido desde la pantalla de inicio.
La auditoría Lighthouse en las herramientas de desarrollo de Chrome verifica la presencia y validez del favicon y los iconos PWA. Un favicon ausente o inválido genera una advertencia en la categoría PWA de la auditoría.
Preguntas frecuentes sobre el generador de favicon
¿Qué tamaño debe tener la imagen fuente para generar favicons?
El tamaño recomendado es al menos 512×512 píxeles en formato cuadrado (1:1). Con esa fuente, los iconos en todos los tamaños serán nítidos y legibles. Si tiene un logotipo en formato SVG, úselo, ya que los gráficos vectoriales se escalan sin pérdida de calidad.
¿Puedo generar solo favicon.ico sin los demás iconos?
Sí. Antes de generar, puede seleccionar exactamente qué tamaños necesita, p. ej., solo favicon.ico o solo tamaños PNG seleccionados.
¿Qué formatos de imagen admite el generador de favicon?
El generador acepta imágenes en formatos PNG, JPG y SVG. Como salida, genera un archivo favicon.ico e iconos PNG en los tamaños seleccionados, listos para subir a su sitio web.
¿Un favicon afecta al posicionamiento en Google?
No directamente: el favicon no es un factor de posicionamiento. Sin embargo, afecta indirectamente al reconocimiento de marca: un sitio con un icono profesional es más fácilmente identificable entre muchas pestañas abiertas, lo que puede traducirse en una mayor tasa de clics en los resultados de búsqueda.
¿Qué tamaños de icono son esenciales para un sitio web normal?
Para un sitio web típico, tres archivos son suficientes: favicon.ico (32×32), un icono PNG de 32×32 y apple-touch-icon de 180×180. Si el sitio debe funcionar como aplicación web (PWA), también necesita iconos de 192×192 y 512×512 más un archivo manifest.
¿Qué es un archivo site.webmanifest y cuándo se necesita?
Es un archivo de configuración para aplicaciones web (PWA) que contiene información sobre el icono, nombre y colores de la aplicación. Se requiere cuando el sitio debe funcionar como una app añadida a la pantalla de inicio del teléfono. Para sitios web normales no es necesario.
¿El favicon se muestra igual en todos los navegadores?
La mayoría de los navegadores modernos (Chrome, Firefox, Edge, Safari) reconocen el archivo favicon.ico y los iconos PNG. Pueden haber diferencias en el tamaño de icono mostrado: Chrome prefiere PNG 32×32, mientras que Safari en iOS usa apple-touch-icon 180×180. Para mejor compatibilidad, recomendamos generar el conjunto completo de tamaños.
¿Por qué el favicon no cambia después de subir un archivo nuevo?
Los navegadores almacenan en caché los favicons de forma agresiva. Después de subir un nuevo icono, intente limpiar la caché del navegador o añadir un parámetro de versión a la ruta del archivo (p. ej., /favicon.ico?v=2). El cambio puede tardar varias horas en hacerse visible.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea para una nueva función, encontraste un error o quieres sugerir otra herramienta que facilite tu trabajo? Escríbenos – respondemos en 24 horas.