¿Por qué empezar con un logo vectorial?
Todos los archivos que usa una marca, desde el icono de 16 px de una pestaña del navegador hasta la imagen de 1024 px de una tienda de apps, deberían salir de un mismo original. Si ese original es un PNG, cada exportación es un cambio de tamaño de píxeles: los tamaños pequeños se ven borrosos y los grandes, blandos. Si es un SVG hecho de trazados, cada tamaño se dibuja de nuevo. Los pasos de abajo mantienen un SVG en el centro y crean todo lo demás a partir de él.
Uno de nuestros logos de ejemplo y, después, el icono de iOS, el icono adaptable de Android y el favicon que nuestras herramientas de exportación crearon a partir de su SVG. El favicon se muestra ampliado; a 32 px cada píxel cuenta.
Paso 1: describe el logo y elige una idea
Abre el generador de logos con IA y escribe qué debe mostrar el logo: "un búho hecho de círculos y triángulos, para una app de estudio, índigo y ámbar". Añade el nombre de la marca si el logo debe escribirlo. Elige un chip de estilo si sabes qué tipo de logo quieres; la guía de estilos de logo explica cada uno. Cada envío crea cuatro ideas, y su precio aparece antes en el botón.
Paso 2: refina una idea con palabras
Elige la idea más cercana a lo que quieres y di qué cambiar: "haz la R más gruesa", "menos plumas", "pon el sol encima del pico". Un refinado conserva el resto del logo. Mejor uno o dos cambios precisos por refinado que una lista de diez.
Paso 3: vectorízalo
Elige Vectorizar en el logo que escogiste. Se traza en un SVG con cada color como sus propios trazados, y puedes compararlo con el original antes de usarlo. Ábrelo en el editor SVG para cambiar el color de una parte, borrar una forma suelta o cambiar el espaciado del nombre.
Revisa tres cosas antes de seguir. ¿La marca se sigue leyendo en tamaño pequeño? ¿Hay formas o letras que se tocan y no deberían? ¿Los colores son exactamente los que quieres? Si lo corriges ahora en el SVG, se corrige en todos los archivos creados a partir de él.
Paso 4: crea los iconos de app
El generador de iconos de app crea a partir del SVG:
- Android: PNG por densidad de 48 a 192 px, una imagen de 512 px para Play Store y el XML del icono adaptable, con un primer plano dentro del área segura y una capa monocroma para los iconos temáticos;
- iOS: un
AppIcon.appiconsetcon una imagen opaca de 1024 px para Xcode.
Elige un color de fondo y el margen alrededor de la marca. Una marca con espacio transparente a su alrededor le da al icono monocromo de Android su forma real. Iconos de app para Android e iOS a partir de una imagen explica los pasos de importación y qué revisar en un dispositivo.
Paso 5: crea el favicon y los iconos PWA
El generador de favicon crea favicon.ico (16, 32 y 48 px en un solo archivo), un favicon.svg cuando el diseño está hecho de trazados vectoriales limpios, PNG de 16 y 32 px, un Apple touch icon de 180 px, iconos de 192 y 512 px con sus versiones maskable, un site.webmanifest y el HTML que hay que pegar en el <head> de tu página. Cuáles usan los navegadores, y por qué un favicon sigue necesitando un ICO, se explica en Favicon en SVG, PNG o ICO: cuál usar; la zona segura de los iconos maskable está en Iconos maskable para PWA.
O llévatelo todo de una vez: el kit de marca
El kit de marca ejecuta los mismos exportadores sobre el mismo SVG con un único juego de ajustes de marca (nombre, nombre corto, color de tema, color de fondo y margen) y pone los resultados en un solo ZIP:
| Carpeta | Contenido |
|---|---|
favicon/ |
el paquete de favicon y PWA |
app-icons/ |
los sets de iconos de app para Android e iOS |
ios/ |
un image set de Xcode para usar el logo dentro de la app |
android/ |
un VectorDrawable para usar el logo dentro de la app |
png/ |
PNG transparentes, con el lado más largo de 256, 512, 1024 y 2048 px |
svg/ |
el SVG optimizado y el original con precisión completa |
Cada carpeta contiene exactamente lo que crea la herramienta correspondiente a partir del mismo archivo, así que puedes empezar con el kit y más adelante volver a generar una parte por separado. El precio del kit se muestra antes de descargarlo.
Antes del lanzamiento
Busca tu nombre y las marcas parecidas en el registro de marcas de cada país donde vendes. Un logo generado es nuevo, pero nada lo compara con las marcas registradas. Conserva el SVG como archivo maestro y crea los tamaños nuevos a partir de él, nunca de un PNG.