Cargando aplicación...
Preparando tu experiencia meskeIA
Genera todos los tamaños de iconos para tu PWA, favicon y aplicaciones móviles
Arrastra tu imagen aquí o haz clic para seleccionar
Recomendado: 512×512px o superior, formato PNGTodos los tamaños para manifest.json: 16, 32, 48, 72, 96, 128, 144, 152, 180, 192, 384, 512px
Los iconos 192px y 512px son obligatorios para manifest.json y permiten instalar tu web como app
Iconos de 16px, 32px y 48px se muestran en pestañas del navegador y marcadores
El tamaño 180px es necesario para iOS cuando añades la web a la pantalla de inicio
Favicon 16px, 32px, 48px
Apple Touch Icon 180px
PWA Icons 192px, 512px
Tiles 70px, 150px, 310px
Recomendación: Usa el preset "PWA Completo" para máxima compatibilidad en todas las plataformas.
Respuestas a las preguntas más frecuentes y guía completa de implementación
Mínimo indispensable: 16px, 32px (favicon navegador), 180px (Apple iOS), 192px y 512px (PWA Android). Con estos 5 tamaños cubrirás el 90% de casos.
Recomendado completo: Usa el preset "PWA Completo" con 12 tamaños para cubrir todos los navegadores, dispositivos y versiones antiguas.
PNG (recomendado): Soporta transparencia, calidad perfecta, compatible con todos los navegadores. Es el estándar para iconos.
WebP: Archivos más pequeños (30-50% menos peso), pero no todos los navegadores antiguos lo soportan. Úsalo solo si tu audiencia usa navegadores modernos.
JPEG: No soporta transparencia, evítalo para iconos (el fondo siempre será blanco o de color).
Opción 1 (raíz): Sube todos los iconos a la carpeta raíz de tu sitio (ejemplo: https://misitio.com/icon-192x192.png). En el código HTML usa rutas absolutas: /icon-192x192.png
Opción 2 (carpeta /icons/): Crea una carpeta /icons/ y sube todos los archivos ahí. En el código HTML usa: /icons/icon-192x192.png
Importante: El archivo manifest.json debe estar en la raíz (/manifest.json).
El archivo .ico es un formato antiguo que soportan todos los navegadores (incluso Internet Explorer). Contiene múltiples resoluciones (16px, 32px, 48px) en un solo archivo.
¿Lo necesitas? Ya no es obligatorio si usas PNG modernos con las etiquetas <link rel="icon">, pero es buena práctica incluirlo para compatibilidad con navegadores muy antiguos.
Simplemente descarga el favicon.ico generado y súbelo a la raíz de tu sitio.
Método 1 - Navegador:
Método 2 - PWA en móvil:
Método 3 - Herramienta online:
Para tamaños pequeños (16-48px): Usa solo un icono/símbolo simple sin texto. El texto es ilegible a esos tamaños y se verá borroso.
Para tamaños grandes (180-512px): Puedes usar logo con texto, ya que hay suficiente espacio. Pero asegúrate de que el texto sea legible incluso a 180px.
Consejo: Si tu logo tiene texto, crea dos versiones: una solo con el símbolo (para tamaños pequeños) y otra con logo completo (para tamaños grandes). Luego genera los iconos de cada versión por separado.
Usa una imagen cuadrada (512×512px o superior) en formato PNG con fondo transparente. Si tu logo no es cuadrado, añade espacio transparente alrededor para hacerlo cuadrado.
Sube tu imagen, selecciona el preset "PWA Completo", elige formato PNG y haz clic en "Generar Iconos". Descarga todos los archivos (botón "Descargar Todos").
Crea una carpeta /icons/ en la raíz de tu sitio web y sube todos los archivos .png generados. Sube también el favicon.ico a la raíz.
Copia el código HTML generado y pégalo en el <head> de tu archivo HTML principal. Asegúrate de que las rutas coincidan con dónde subiste los archivos.
Crea un archivo manifest.json en la raíz de tu sitio, copia el código JSON generado y personaliza los campos name, short_name, theme_color con tu información.
Abre tu sitio en diferentes navegadores, verifica el favicon, y prueba instalar como PWA en móvil. Limpia la caché del navegador si no ves cambios inmediatos.
| Formato | Escalabilidad | Peso típico | Soporte navegadores | Uso recomendado | Accesibilidad | Edición posterior |
|---|---|---|---|---|---|---|
| SVG | Infinita (vectorial) | 1–10 KB | Todos los modernos | Iconos UI, logos, ilustraciones | Excelente (aria-label nativo) | Sí (código XML editable) |
| PNG | Fija (se pixela en retina) | 5–50 KB | Universal | Iconos con transparencia, favicons | Buena (alt en img) | No (rasterizado) |
| ICO | Fija (multi-resolución) | 10–100 KB | Universal (incluso IE) | Favicon tradicional (favicon.ico) | Limitada | No |
| WebP | Fija | 3–30 KB | Chrome, Firefox, Safari 14+ | Iconos modernos, PWA | Buena (alt en img) | No |
| AVIF | Fija | 2–20 KB | Chrome 85+, Firefox 93+ | Iconos de alto detalle, futuro | Buena (alt en img) | No |
| Font Icon | Infinita (tipografía) | 10–80 KB (fuente) | Universal | Sets de iconos (Font Awesome, Material) | Requiere aria-hidden + span oculto | Solo color/tamaño vía CSS |
Crea iconos de navegación para una app React o Vue. Necesita SVG inline para poder controlar el color con currentColor y garantizar escalabilidad en pantallas retina.
Consejo: exporta los SVG optimizados con SVGO y úsalos como componentes React para máxima reutilización.
Construye un sistema de iconos consistente para un producto digital. Necesita definir un estilo visual único (outline, filled o duotone) y mantener un grosor de trazo uniforme en todos los iconos.
Consejo: diseña sobre una cuadrícula de 24×24px con zona segura de 2px en los bordes para que los iconos luzcan equilibrados a cualquier tamaño.
Crea el favicon e iconos de instalación para su web o PWA. Necesita múltiples tamaños PNG (16, 32, 180, 192, 512px) y el archivomanifest.json para que la app sea instalable en móvil.
Consejo: usa el preset "PWA Completo" de esta herramienta para generar todos los tamaños de una sola vez.
Necesita iconos para presentaciones de PowerPoint o infografías en Canva. Requiere PNG de alta resolución (mínimo 256×256px) con fondo transparente para superponerlos sobre cualquier diseño.
Consejo: exporta siempre en PNG a 512px y redimensiona en la herramienta de diseño; así mantienes la calidad máxima.
SVG es superior para iconos de interfaz porque es vectorial (se escala sin pixelarse), pesa menos (1–10 KB), soporta animaciones CSS y permite cambiar color concurrentColor. PNG es preferible cuando el icono tiene gradientes complejos o efectos fotorrealistas que SVG no puede representar eficientemente.
Regla práctica: SVG para iconos de UI, PNG para imágenes complejas o favicons.
El mínimo moderno son tres tamaños: 16×16px (pestaña del navegador),32×32px (barra de favoritos y marcadores) y 180×180px(Apple Touch Icon para iOS). Para PWA completa añade 192×192px y 512×512px.
El archivo favicon.ico puede contener los tres primeros tamaños en un único fichero multi-resolución.
Depende del uso: si el icono es decorativo (acompaña texto visible), añade aria-hidden="true". Si el icono transmite informacióno es interactivo (botón sin texto), añade aria-label="descripción"al elemento o usa un <span> visualmente oculto dentro del botón.
La versión gratuita de Font Awesome (versión 5/6 Free) se distribuye bajo licencia CC BY 4.0 para los SVG/PNG y SIL OFL para las fuentes, ambas permiten uso comercial. Sin embargo, debes revisar la licencia específica de cada icon set que uses, ya que algunos sets de terceros tienen restricciones comerciales distintas.
Un sprite SVG es un único fichero .svg que contiene múltiples iconos definidos con <symbol>. Se incluye una vez en el HTML y se referencia cada icono con <use href="#nombre-icono" />. Úsalo cuando tengas más de 20 iconos en la misma página: reduce las peticiones HTTP y mejora el rendimiento de carga.
El mínimo exigido por la especificación es 192×192px y512×512px. Para cobertura completa se recomienda además: 48px (Android launcher antiguo), 72px, 96px, 144px, 152px (iPad), 167px (iPad Pro) y 180px (iOS). El preset "PWA Completo" de esta herramienta genera todos estos tamaños automáticamente.
El proceso tiene tres pasos: (1) diseña tus iconos como SVG con trazados simples y cerrados; (2) usa una herramienta como IcoMoon o Fontellopara convertir los SVG en una fuente TTF/WOFF2; (3) incluye la fuente en tu CSS con@font-face y asigna un carácter Unicode a cada icono. Es la técnica habitual para sets de iconos corporativos.
SVG inline (pegado en el HTML) permite estilizado completo con CSS, animaciones y cambio de color dinámico, pero engrosa el HTML. SVG como imagen (<img src="icon.svg">) es más limpio, cacheado por el navegador y más fácil de mantener, pero no puede manipularse con CSS ni JavaScript. Usa inline para iconos de UI que cambian de estado; usa como imagen para logos e ilustraciones estáticas.
Elige entre outline (trazos sin relleno, aspecto ligero),filled (formas sólidas, mayor contraste) oduotone (dos colores, mayor expresividad). Mantén el mismo estilo en todos los iconos del set para garantizar coherencia visual.
El estándar de la industria es 24×24px. Este tamaño es legible en pantalla, escalable a 48px para touch y reducible a 16px para favicon sin perder reconocibilidad.
Usa una cuadrícula de 24×24px y deja una zona segura de 2px en cada borde. Esto garantiza que los iconos no queden cortados y luzcan equilibrados al aplicar padding en los contenedores.
Elimina nodos innecesarios, convierte curvas complejas en formas simples y evita detalles que desaparecen a tamaños pequeños. Un buen icono debe ser reconocible a 16px.
Exporta el SVG sin metadatos de la aplicación de diseño (sinxmlns:dc, sodipodi ni capas vacías). UsaSVGO para reducir el peso hasta un 70% sin pérdida visual.
Genera versiones en 16, 24, 32 y 48px. A partir de 32px el icono puede incluir más detalle; a 16px debe ser la versión más simplificada. Para favicons y PWA genera también 192px y 512px con esta herramienta.
Si el icono es decorativo, añade aria-hidden="true"al SVG. Si transmite información o es el único contenido de un botón, añade aria-label="descripción clara" al elemento interactivo o un role="img" con title en el SVG.
Usa SVG siempre que sea posible para iconos de interfaz. Son vectoriales, escalables infinitamente y pesan entre 1 y 10 KB, frente a los 20–50 KB de un PNG equivalente.
Mantén el mismo grosor de trazo (stroke-width) en todos los iconos del set. El valor más habitual es 1.5px o 2px. Mezclar grosores distintos rompe la coherencia visual del producto.
Establece fill="currentColor" ostroke="currentColor" en el SVG para que el icono herede el color del texto CSS. Así funciona automáticamente en dark mode sin necesidad de duplicar estilos.
Añade aria-hidden="true" a los iconos que solo son decorativos (acompañan a texto). Los lectores de pantalla los ignorarán y la experiencia de usuario mejora notablemente.
Aunque el icono sea de 24px, el área táctil del botón debe ser al menos44×44px según las pautas WCAG 2.5.5. Usa padding para ampliar el área de toque sin cambiar el tamaño visual del icono.
Los SVG exportados desde Figma o Illustrator incluyen metadatos innecesarios que pueden representar el 50–70% del peso final. Ejecuta SVGOantes de pasar a producción para reducir el tamaño sin pérdida de calidad.
manifest.json.aria-label son inaccesibles para usuarios de lectores de pantalla y pueden generar incumplimientos de WCAG.