Los iconos se necesitan en una cantidad sorprendente de tamaños, y redibujarlos a mano para cada uno es un desperdicio. Si conservas un SVG maestro, puedes exportar todos los tamaños a partir de él.
Tamaños que probablemente necesitarás
- 16 y 32 px: favicons clásicos de la pestaña del navegador. El de 32 se usa en pantallas de alta densidad y en algunas listas de favoritos.
- 48 px: Windows y algunos accesos directos de escritorio.
- 180 px: el icono Apple touch, que se usa cuando un sitio se añade a la pantalla de inicio de iOS.
- 192 y 512 px: los tamaños que piden Android y el manifiesto web de una PWA.
- 64, 128, 256 px: habituales en aplicaciones de escritorio y fichas.
- 1024 px: un tamaño maestro que piden algunas tiendas de apps para la ficha.
Los requisitos exactos cambian con el tiempo, así que revisa las pautas vigentes de la plataforma a la que apuntas. El ZIP de la herramienta contiene versiones de 16, 32, 48, 64, 128, 192, 256, 512 y 1024 píxeles, que cubren la lista habitual.
Diseña pensando en el tamaño más pequeño
Un logo detallado puede volverse ilegible a 16 píxeles. Crea el maestro con formas sólidas y pocos detalles y prueba los tamaños pequeños. Algunas marcas mantienen una versión simplificada solo para favicons.
Márgenes y zonas seguras
Algunas plataformas enmascaran los iconos en círculos o cuadrados redondeados. Mantén lo importante lejos de los bordes, con un margen de entre el 10 y el 20 por ciento, para que nada se recorte. Los iconos enmascarables de Android tienen una zona segura oficial por esta razón.
Fondo
Los iconos de la pestaña del navegador pueden ser transparentes. Los iconos de pantalla de inicio de algunas plataformas necesitan fondo sólido, porque la transparencia puede rellenarse con negro. Define un color de fondo para esas exportaciones.
Flujo de trabajo
- Abre el SVG en la herramienta y revisa la vista previa.
- Elige PNG y decide el fondo.
- Descarga el ZIP de tamaños.
- Haz referencia a los archivos en el head de tu HTML o en el manifiesto.
Preguntas frecuentes
¿El favicon debería ser un SVG? Los navegadores modernos aceptan favicons SVG, pero los PNG de respaldo siguen siendo útiles para sistemas antiguos y para iOS.