Sube cualquier imagen y obtén un paquete completo de favicon: un favicon.ico multitamaño, iconos PNG en tamaños estándar para Android y PWA, un apple-touch-icon para las pantallas de inicio de iOS y un archivo site.webmanifest. Un README explica exactamente cómo añadirlos a tu HTML. Todo se agrupa en un archivo ZIP listo para colocar en la raíz de tu sitio web. El procesamiento se ejecuta en tu navegador: tu logo nunca sale de tu dispositivo.
Suelta los archivos aquí
o explorar para subir
Hasta 10.0 MB por archivo
Sube tu logo o icono
Suelta una imagen cuadrada (se recomienda PNG) para obtener los mejores resultados. Las imágenes de origen cuadradas producen los favicons más limpios. Las imágenes no cuadradas se redimensionarán para ajustarse a cada tamaño de icono.
Genera el paquete de favicon
Haz clic en Convertir para generar el conjunto completo de iconos: favicon.ico (16/32/48/64/128/256px), icon-32x32.png, apple-touch-icon.png (180×180), icon-192x192.png, icon-512x512.png y site.webmanifest.
Descarga el ZIP
Todos los archivos se agrupan en un archivo ZIP. Extráelo y sube todos los archivos al directorio raíz de tu sitio web (al mismo nivel que index.html).
Añade las etiquetas HTML
Copia las etiquetas link del README.txt incluido en tu sección <head>: enlace favicon.ico, enlace de icono PNG, enlace apple-touch-icon y enlace del manifest.
Idealmente 512×512 píxeles o más, cuadrada, con fondo transparente (PNG). El origen se reduce a cada tamaño requerido mediante remuestreo Lanczos de alta calidad. Los diseños simples, contundentes y de alto contraste funcionan mejor a 16×16 y 32×32: el texto diminuto o las líneas finas se vuelven ilegibles. Si tu logo tiene texto, considera una versión de icono simplificada para usar como favicon.
Cada uno sirve a un contexto diferente: favicon.ico (todos los navegadores y dispositivos), icon-32x32.png (los navegadores modernos prefieren PNG), apple-touch-icon.png (pantalla de inicio de iOS/macOS, requiere exactamente 180×180), icon-192x192.png (el conmutador de pestañas/tareas de Chrome en Android), icon-512x512.png (pantalla de bienvenida PWA e iconos de tiendas de apps). Usarlos todos garantiza una visualización óptima en todas partes.
El manifiesto de aplicación web informa a los navegadores sobre tu sitio web como app: su nombre, iconos, colores y modo de visualización. Es obligatorio para las Progressive Web Apps (PWA) y permite a los usuarios «Añadir a la pantalla de inicio» en Android. Los navegadores usan los iconos del manifiesto para Chrome de Android, Samsung Internet y otros navegadores móviles basados en Chromium. Añádelo a tu HTML con <link rel="manifest" href="/site.webmanifest">.
Los navegadores almacenan en caché los favicons de forma agresiva. Prueba: (1) Recarga forzada de la página (Ctrl+Mayús+R), (2) Borra la caché del navegador, (3) Abre una ventana de incógnito/privada, (4) Añade un cache-buster a la URL del favicon en tu HTML: href="/favicon.ico?v=2". La mayoría de los navegadores almacenan los favicons en caché de forma independiente a la caché de la página.
La entrada SVG no es compatible actualmente porque la renderización de SVG en el navegador requiere acceso al DOM, que no está disponible en los Web Workers. Convierte primero tu SVG a PNG (usa Figma, Inkscape o un conversor SVG-a-PNG en línea) y luego genera tu paquete de favicon a partir del PNG. Para uso web, también puedes usar un SVG directamente como favicon en los navegadores modernos: <link rel="icon" href="/icon.svg" type="image/svg+xml">.
¿Algo no funciona? Informar de un error
