Cómo diseñar iconos: principios, flujos de trabajo y tamaños

Cómo diseñar iconos: la versión breve

Aprender a diseñar iconos se reduce a una sola disciplina repetida en cada paso: dibujar pensando en el tamaño más pequeño que el icono llegará a ocupar. Un icono no es una ilustración pequeña. Es una señal que debe sobrevivir a pestañas de navegador de 16 px, barras de herramientas de 24 px, pantallas de inicio de 48 px y fichas de tienda de 512 px, normalmente desde el mismo archivo. Todas las reglas de esta guía existen por esa restricción.

La versión breve: elige un solo motivo, redúcelo a una silueta contundente, dibújalo sobre una cuadrícula consistente, mantén un acabado uniforme en todo el set y exporta los tamaños de cada plataforma desde un único máster. La versión larga es el resto de esta guía, e incluye tres flujos de trabajo que te llevan hasta ahí (trabajo vectorial manual en Illustrator o Figma, herramientas de plantillas y generación con IA) y los pasos para colocar un icono terminado en un iPhone, un dispositivo Android o un sitio web.

¿Qué hace que un icono sea bueno?

Antes de tocar cualquier herramienta, ayuda saber qué pruebas debe superar. Las Human Interface Guidelines de Apple y la guía de Material Design de Google enuncian la mayoría de estas pruebas directamente, y los diseñadores en activo aplican el resto por hábito:

• Primero la silueta. Entrecierra los ojos o desenfoca el icono. Si la forma sigue siendo reconocible, el diseño funciona; si se convierte en una mancha, ningún detalle lo salvará.
• Un motivo, una idea. Un buen icono dice una sola cosa. Combinar un escudo, una marca de verificación y un cohete en un mismo glifo no dice nada con claridad.
• Radio de esquina y grosor de trazo consistentes. Esquinas redondeadas en todas partes o esquinas rectas en todas partes, contornos gruesos en todas partes o ninguno. Mezclar acabados dentro de un set parece un accidente.
• Alineado a una cuadrícula. Las líneas guía mantienen el relleno predecible para que una carpeta de iconos parezca una familia. Material Design publica una plantilla de líneas guía de 24 dp precisamente por esta razón.
• Detalles que sobreviven a la reducción. Una cara necesita ojos y quizá una boca. No necesita pestañas a 24 px.

Los favicons merecen una mención especial aquí, porque se sitúan en el extremo del rango de tamaños. Lo que hace bueno a un favicon es una versión aún más estricta de la misma lista: una letra o una marca simplificada, alto contraste tanto en navegadores claros como oscuros, y ningún texto más pequeño que la inicial de tu nombre.

Tres formas de crear iconos y cuándo usar cada una

Hay tres rutas prácticas para llegar a un set de iconos terminado, y la mejor app para crear iconos es la que se ajuste a tu volumen, tu presupuesto y al grado de personalización que necesite el resultado.

Trabajo vectorial manual (Illustrator, Figma, Inkscape). Esta es la ruta artesanal. Dibujas formas sobre una cuadrícula, alineas todo con las líneas guía y controlas cada curva. Por ejemplo, aprender a hacer un icono de persona en Illustrator significa construir un círculo para la cabeza, un trapecio redondeado para los hombros y decidir una sola vez qué grosor tiene el contorno compartido. El trabajo vectorial te da control píxel a píxel y SVG escalables al infinito, algo que importa cuando un set debe mantenerse coherente a lo largo de cientos de glifos. El costo es tiempo: un set coherente de veinte iconos lleva días de trabajo, y la destreza que exige es real.

Herramientas de plantillas y clip art (Canva, bibliotecas de iconos, fuentes de iconos). Bibliotecas como Material Symbols, Lucide o Font Awesome te dan miles de glifos consistentes de forma gratuita, y las herramientas de plantillas permiten recolorearlos y componerlos. Para metáforas estándar como un bote de basura, un engranaje o una lupa, esta es la respuesta correcta más rápida, y no hay nada de malo en ello: los usuarios reconocen las formas estándar más rápido que tu variante personalizada. Los límites aparecen cuando necesitas un motivo que nadie ha dibujado todavía, o un estilo visual que pertenece solo a tu marca.

Generación con IA. Un generador de iconos con IA se sitúa entre ambos: describes un motivo y un estilo en texto, el modelo genera arte original y exportas un máster cuadrado con fondo transparente. Es la única ruta que produce un dibujo nuevo a partir de una descripción, lo que la convierte en la opción práctica para mascotas de producto, motivos poco comunes o sets definidos por un estilo (un set con sabor a emoji, un set neón, un set claymorphism) sin dibujar cada glifo a mano. La contrapartida es un control menor curva a curva, así que premia los prompts claros y la disposición a regenerar.

Cómo diseñar iconos con IA: un flujo de trabajo que funciona

La generación con IA elimina el paso de dibujo, pero no las decisiones de diseño. El flujo de trabajo que produce iconos utilizables de manera consistente es este:

1. Escribe el brief antes del prompt. Un motivo, un estilo, un ambiente, una decisión de fondo. «Gato somnoliento, estilo emoji, brillante, amarillo cálido, fondo liso» es un brief. «Icono de gato tierno quizá con algunas estrellas y una luna y colores suaves» es un deseo, y los deseos producen candidatos blandos.

2. Genera candidatos y juzga siluetas. Genera varias opciones y evalúalas primero en tamaño pequeño, la misma prueba de entrecerrar los ojos que en el diseño manual. Un candidato que solo funciona en grande es un descarte, no un punto de partida.

3. Mantén coherente la familia. Si el set necesita más de un icono, reutiliza las mismas palabras de estilo y acabado en todos los prompts y genera en una sola sesión. Los presets de estilo ayudan aquí: fijar un estilo significa que los candidatos se diferencian por el motivo, no por el renderizado. La página de diseño de iconos funciona así para estilos generales, y un generador de iconos emoji fija la receta de emoji brillante para sets divertidos.

4. Exporta un máster y recorta los tamaños. Trabaja a 1024 px con fondo transparente y después reduce por plataforma. Las formas simples sobreviven a la reducción; los renderizados fotográficos no.

5. Compara con un set de referencia. Coloca tus iconos junto a una biblioteca madura al mismo tamaño. Todo lo que llame la atención por la razón equivocada, una banda de degradado fuera de lugar o una silueta rota, vuelve para otra ronda.

Tamaños y formatos de iconos que importan

La pregunta práctica más habitual es cuál es el mejor formato para iconos, y la respuesta honesta es que cada plataforma usa uno distinto. Un único máster PNG o WEBP de 1024 px cubre cada fila de esta tabla; solo tienes que recortarlo para cada casilla.

Dos reglas cubren la mayoría de los errores. Primera, nunca amplíes: un favicon de 16 px recortado desde un máster de 1024 px se ve bien, mientras que una imagen de ficha de 512 px ampliada desde 128 px se ve rota. Segunda, respeta las reglas de transparencia: iOS aplica su propia máscara de esquinas y rechaza los píxeles transparentes según las directrices de iconos de Apple, mientras que las plataformas de chat rechazan cualquier imagen sin píxeles transparentes.

Dónde conseguir iconos para tu sitio web

Para un sitio tienes las mismas tres fuentes que en cualquier proyecto: una biblioteca, un diseñador o la generación. Las bibliotecas son lo más rápido para glifos de interfaz estándar. Un diseñador tiene sentido para una marca con un significado específico. La generación cubre el espacio intermedio: un motivo personalizado en el estilo de tu producto, dibujado en segundos. Para el icono de sitio en concreto, el flujo termina en el favicon: un máster de 1024 px recortado en los sets ICO y PNG, que es exactamente lo que automatizan el generador de iconos de sitio y el generador de favicon, con comprobaciones incluidas a 16 px, donde más importa.

Cómo cambiar el diseño del icono de tu app en iPhone y Android

Diseñar el icono es la mitad del trabajo; llevarlo a la pantalla del dispositivo es la otra mitad, y la respuesta cambia según la plataforma.

iPhone (como desarrollador). iOS no permite que las apps reemplacen su propio icono a voluntad. Envías el máster de 1024 px dentro del bundle de la app y App Store Connect se encarga del resto; el sistema aplica la máscara redondeada. Puedes ofrecer iconos de app alternativos, un conjunto fijo entre el que el usuario puede cambiar desde los ajustes de tu app, declarado en el catálogo de recursos.

iPhone (como usuario). Sin acceso de desarrollador, la app Atajos (Shortcuts) es el truco de siempre: crea un atajo que abra la app de destino, abre sus detalles, elige «Añadir a pantalla de inicio» y asigna cualquier imagen como icono. Funciona, con dos advertencias: el atajo se inicia a través de un banner y el icono original de la app sigue existiendo en tu biblioteca de apps.

Android. ¿Cómo añado el icono de una app a la pantalla de inicio de mi Android? Mantén pulsada la app en el cajón de aplicaciones y arrástrala hacia fuera, o mantén pulsada la pantalla de inicio vacía y usa el menú de widgets y accesos directos. Algunos launchers admiten packs de iconos y edición del icono por acceso directo: mantén pulsado el acceso directo, toca Editar y cambia la imagen. ¿Por qué falta una app en la pantalla de inicio? Normalmente simplemente está en el cajón de aplicaciones. Android solo fija un puñado de iconos por defecto, y mostrar el icono en Android es cuestión de arrastrarlo a donde lo quieras.

Samsung. One UI sigue el patrón de Android, con la opción de edición escondida en el menú de pulsación larga sobre el propio acceso directo. Los packs de iconos de la Galaxy Store cambian todos los iconos de golpe si quieres un rediseño coherente sin tocar cada acceso directo.

FAQ rápida

¿Por qué el icono de mi app aparece en blanco o vacío? En Android esto suele significar que la app declara un recurso de icono que el launcher actual no puede renderizar. Una capa del icono adaptativo que falta tras una actualización es el caso clásico. Borrar la caché del launcher o reinstalar la app lo soluciona. En la web, un icono de pestaña en blanco significa que la etiqueta link del favicon apunta a un archivo que no existe.

¿Por qué mi app no tiene icono alguno? Los APK instalados manualmente (side-load) y las compilaciones de desarrollo suelen omitir por completo los recursos de icono. Las apps distribuidas por tiendas siempre declaran uno; si una ficha aparece sin imagen, la propia ficha de la tienda carece del asset, y eso se corrige desde la consola de desarrollador.

¿Qué app tiene un icono con la P, uno con la T o uno con la S? Estas búsquedas suelen ser de alguien haciendo ingeniería inversa sobre una pantalla de inicio. Las letras sueltas suelen ser iconos personalizados de Atajos (Shortcuts) en iOS o sustituciones de packs de iconos en Android. La letra es un sustituto puesto por el diseñador, no un estándar de la plataforma, así que la única respuesta fiable es abrirla.

¿Cuánto tiempo lleva un buen set de iconos? Tomar iconos de una biblioteca lleva minutos; veinte iconos coherentes dibujados a mano llevan días; un set asistido por IA con un estilo fijo es trabajo de una sola sesión, incluidos los recortes de tamaño. Los principios no cambian entre las tres velocidades; solo cambia el paso de dibujo.