Generador de favicon e iconos de app
Crea favicons perfectos, iconos Apple touch, manifiestos Android y mosaicos de Windows. Personaliza rellenos, fondos y descarga todo el paquete en un único archivo ZIP al instante.
Branding Customization
PWA Manifest Metadata
Files to Generate
Upload a logo to view source metadata.
Características del generador de favicon e iconos de app
- Redimensionado instantáneo en el navegador: redimensiona tu imagen original a múltiples diseños estándar al instante en el navegador. Sin colas de subida ni tiempos de espera de conversión.
- Todas las plataformas principales: genera favicons web estándar, iconos Apple touch, tamaños de icono del manifiesto Android y configuraciones de mosaicos de Microsoft en una sola operación.
- Descarga del ZIP con un clic: compila todas las imágenes redimensionadas, el site.webmanifest y los archivos browserconfig.xml en un único archivo ZIP para descargar.
- Privacidad 100 % en el cliente: todas las operaciones de píxeles, el dibujo en canvas y la compilación de archivos binarios se ejecutan localmente. Tus recursos de marca nunca se envían a un servidor.
Por qué necesitas un conjunto de favicon e iconos de app
El desarrollo web moderno requiere más que un único icono de 16x16. Los navegadores, los dispositivos móviles y los sistemas operativos buscan iconos personalizados en tamaños concretos para mostrarlos en pestañas, barras de marcadores, pantallas de inicio móviles y gestores de tareas. Un conjunto completo de iconos garantiza que tu sitio tenga un aspecto de marca profesional en todas las plataformas, incluidos iOS, Android y Windows.
El estándar site.webmanifest
Los dispositivos Android y los navegadores Chrome usan el manifiesto de aplicación web (`site.webmanifest`) para definir cómo se comporta tu sitio cuando se añade a la pantalla de inicio del usuario. El manifiesto enumera las rutas de los iconos de app en resoluciones estándar (192x192 y 512x512) y detalles de configuración (como el nombre y los colores del tema), lo que habilita comportamientos de aplicación web progresiva (PWA).
Mosaicos de Windows y browserconfig.xml: los sistemas Microsoft Windows y los navegadores Edge/IE usan mosaicos dinámicos para mostrar sitios anclados al menú Inicio. El sistema lee `browserconfig.xml` para descubrir las ubicaciones de las imágenes de mosaico (como 150x150 píxeles) y los colores de fondo del tema. Proporcionar esta configuración garantiza una integración pulida y nativa con las plataformas Windows.
Especificaciones del icono Apple touch
Los dispositivos iOS de Apple usan un icono PNG específico de alta resolución (180x180 píxeles) para mostrar los sitios guardados en la pantalla de inicio móvil. iOS aplica una máscara de sistema estándar para recortar el icono con esquinas redondeadas. Se recomienda subir una imagen cuadrada y no transparente o configurar un color de fondo sólido personalizado para evitar huecos visuales en el diseño.
Formatos de archivo ICO y empaquetado
El formato `.ico` es un contenedor heredado de Microsoft que guarda varias imágenes de icono en distintas resoluciones dentro de un único binario. Los navegadores estándar usan archivos `.ico` para dar soporte a pantallas antiguas (16x16, 32x32). Esta herramienta compila tus fotogramas PNG redimensionados en un único archivo ICO conforme a la especificación, en el navegador y sin enviar tus datos a ningún servidor remoto.
Guía de integración en el <head> de HTML: después de descargar y extraer el ZIP de iconos, coloca todos los archivos en el directorio raíz de tu sitio web. Luego añade las etiquetas HTML <link> generadas directamente en la plantilla <head> de tu sitio. Esto indica a los rastreadores de buscadores y a los navegadores exactamente dónde encontrar cada icono, lo que mejora el SEO y el aspecto visual de tu web.
Preguntas frecuentes
El paquete genera un favicon estándar de 16x16 y 32x32, un favicon.ico multirresolución, un icono Apple touch de 180x180, iconos de manifiesto Android de 192x192 y 512x512, y una imagen de mosaico de Windows de 150x150. Cubre todas las necesidades modernas de navegadores, móviles y sistemas.
El archivo webmanifest es una configuración JSON que requieren Google Chrome y los dispositivos Android. Define las características de visualización de tu aplicación web, el nombre, los colores del tema y los iconos cuando se ancla a la pantalla de inicio, lo que permite una experiencia tipo app nativa para las PWA.
Copia el código HTML que proporciona el generador y pégalo dentro de la etiqueta <head> de tu página de inicio. Asegúrate de que los atributos href coincidan con la ruta del directorio donde subiste los archivos ZIP extraídos en tu servidor.
Aunque los navegadores modernos admiten favicons PNG, se recomienda tener un favicon.ico clásico en la carpeta raíz. Sirve como alternativa fiable para navegadores antiguos y rastreadores web que esperan el icono en /favicon.ico de forma predeterminada.
Los dispositivos iOS de Apple aplican una máscara de esquinas redondeadas a los iconos touch en la pantalla de inicio. Si tu imagen tiene fondo transparente, el sistema rellena la transparencia con negro, lo que queda mal. Un relleno de fondo sólido garantiza un aspecto profesional.
Sí. La herramienta admite por completo la carga de PNG transparentes y SVG vectoriales. Puedes conservar los fondos transparentes o elegir un color sólido personalizado para rellenar detrás del logotipo, algo ideal para los formatos de iOS Safari y Android Chrome.
No. El Generador de favicon e iconos de app funciona 100 % localmente en tu navegador. Todo el redimensionado de imágenes, el renderizado en canvas y la compilación del ZIP ocurren en tu dispositivo. No transmitimos ni almacenamos tus archivos, lo que garantiza privacidad absoluta y seguridad sin conexión.