Documentación de Icons Creator

Cómo funciona el procesamiento

Después de seleccionar una imagen, el navegador lee el archivo y mantiene el origen en memoria. Los ajustes de tamaño, borde, fondo, estilo y animación se aplican antes de generar la vista previa.

La conversión se carga bajo demanda. Así, el código pesado de procesamiento no tiene que formar parte de la carga inicial cuando el visitante solo quiere leer contenido.

• La selección comienza en el dispositivo del visitante.
• La vista previa se actualiza al cambiar los ajustes.
• La exportación ocurre después de una acción explícita.
• SVG, PNG e ICO utilizan rutas de generación diferentes.

Flujo recomendado para crear un icono

Empieza con una imagen cuadrada y de buena resolución. Para símbolos pequeños, elimina detalles innecesarios antes de compensar con efectos.

Comprueba siempre el resultado cerca del tamaño final. Un diseño excelente a 512 píxeles puede perder legibilidad a 16 o 32 píxeles.

• Usa una fuente de al menos 512 × 512 píxeles cuando sea posible.
• Mantén suficiente contraste entre símbolo y fondo.
• Prueba las esquinas redondeadas antes de exportar.
• Comprueba el resultado en una pantalla pequeña y en modo oscuro.

Formatos y cuándo usar cada uno

SVG es una buena opción para iconos vectoriales de interfaz porque escala sin pixelarse y puede integrarse con CSS. PNG es adecuado cuando hay que conservar los píxeles raster. ICO es especialmente útil para favicons con varias resoluciones.

Un proyecto puede combinar formatos: SVG para la interfaz, PNG para arte raster e ICO junto con PNG para favicons.

• Componentes de interfaz: SVG.
• Imagen raster con transparencia: PNG.
• Favicon con varias resoluciones: ICO más PNG.

Cómo publicar un favicon

Para un sitio tradicional, publica favicon.ico y versiones PNG. Los navegadores modernos también aceptan SVG, mientras ICO sigue siendo un fallback útil.

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

Integrar el resultado en frameworks

El archivo exportado puede utilizarse como asset estático en Vue, React, Angular o Svelte. En bibliotecas grandes, usa nombres previsibles e importa solo los iconos necesarios.

src/assets/icons/
├── search.svg
├── settings.svg
└── user.svg

• Vue: importa el asset en el componente o usa una ruta pública.
• React: importa SVG según el bundler del proyecto.
• Angular: conserva los assets públicos en el directorio configurado.
• Svelte: usa imports estáticos para que el bundler resuelva la ruta.

Rendimiento y accesibilidad

Los iconos decorativos no deben competir con el contenido principal. Cuando un icono comunica una acción por sí solo, proporciona un nombre accesible al control que lo contiene. Si es decorativo, evita anuncios redundantes para tecnologías de asistencia.

Las funciones pesadas, como procesamiento y exportación, pueden cargarse cuando sean necesarias. En assets estáticos, dimensiones previsibles y una caché coherente ayudan a evitar cambios de diseño.

Lista antes de publicar

Usa esta secuencia para validar un icono antes de producción.

• El símbolo sigue siendo reconocible en el tamaño mínimo.
• El fondo y la transparencia funcionan en temas claros y oscuros.
• El formato elegido corresponde al uso final.
• El archivo abre correctamente y devuelve el MIME esperado.
• El nombre del archivo es estable y no contiene caracteres problemáticos.
• La acción que usa el icono tiene un nombre accesible cuando sea necesario.