Tools mentioned in this article
Open the browser-based tool while you read and try the workflow immediately.
Introducción
Los favicons son esenciales para la producción de sitios web. Hoy en día, la variedad de imágenes que debes preparar ha aumentado: no solo favicon.ico, sino también Apple Touch Icons para teléfonos inteligentes y PNG de varios tamaños.
Redimensionar y exportar estos uno por uno es una molestia enorme. Por eso creé una herramienta en la que puedes subir una sola imagen y generar por lotes todo el conjunto de iconos necesario como descarga ZIP.
https://devtoolkits.app/es/tools/favicon-generator
¿Qué tipo de herramienta es?
Cuando subes una imagen grande (PNG/JPG/WebP) —se recomiendan unos 1024x1024— genera todos los archivos necesarios para una configuración de favicon estándar.
Características
- 📦 Generación por lotes: crea
favicon.ico(que contiene 16x16, 32x32),apple-touch-icon.png(180x180) y varios archivos PNG (16x16, 32x32, 192x192, 512x512) a la vez. - 🔒 Segura y basada en el navegador: todo el procesamiento de imágenes se realiza en el navegador utilizando la API Canvas. Como nada se guarda en un servidor, puedes usar con seguridad datos confidenciales como logotipos de empresas.
- ⚡ Descarga ZIP: puedes descargar todas las imágenes generadas como un único archivo ZIP, lo que permite incorporarlo a tu proyecto de inmediato.
- 🖼️ Mantiene la transparencia: si la imagen original es un PNG transparente, la transparencia se mantiene en todos los tamaños exportados.
Cómo usarla
- Abre el Generador de favicon.
- Arrastra y suelta o selecciona una imagen (idealmente una cuadrada).
- Verifica el estado de cada tamaño en la vista previa.
- Presiona el botón “Download All as ZIP” para guardar el conjunto.
Qué revisar antes de publicar
Los favicons se muestran a tamaños diminutos, así que una imagen nítida a tamaño completo puede verse borrosa a 16x16. Si tu logotipo tiene texto fino o líneas intrincadas, añade un color de fondo, amplía los márgenes o redúcelo a solo un símbolo antes de regenerar.
Tras desplegar, comprueba cómo se ve en la pestaña del navegador, los marcadores y la vista “Añadir a la pantalla de inicio” en los teléfonos. Al reemplazar el favicon de un sitio existente, las cachés pueden persistir, así que verifica también el nombre del archivo, las referencias en el HTML y las entradas de iconos en manifest.webmanifest.
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Conclusión
¡Termina el tedioso trabajo de creación de iconos en segundos y concéntrate en tus tareas principales de desarrollo y diseño!
Preguntas frecuentes
¿Qué tamaños de favicon debo preparar?
Como mínimo, favicon.ico (que contiene 16x16 y 32x32) y apple-touch-icon.png (180x180) cubren los principales navegadores e iOS. Para soporte de PWA y de pantalla de inicio en Android, añade también PNG de 192x192 y 512x512 y un manifest.webmanifest. Esta herramienta genera todos de una vez.
¿Qué formato y tamaño debe tener la imagen de origen?
Se recomienda un PNG/JPG/WebP casi cuadrado de unos 1024x1024. Un PNG transparente mantiene su transparencia en todos los tamaños. Como los detalles se difuminan a 16x16, simplifica el texto fino o las líneas intrincadas en un símbolo, o añade márgenes, para mayor legibilidad.
Reemplacé mi favicon pero no se actualiza.
Los navegadores cachean los favicons de forma agresiva. Renombrar el archivo, verificar las referencias en el HTML y las entradas de iconos en manifest.webmanifest, y hacer una recarga forzada o limpiar la caché suele hacer que aparezca el cambio.