IconEditor

Flujo de trabajo · 9 min de lectura

Cómo crear un icono de aplicación para Windows: guía paso a paso

El icono de una aplicación se ve decenas de veces al día a 16 píxeles y de vez en cuando a 256. Diseñar para ambos es todo el oficio. Este es un flujo de trabajo que funciona, usando IconEditor.

El flujo de trabajo

De la idea al app.ico en seis pasos

  1. 01

    Empieza con una forma sólida

    El panel Tamaños de icono: de 256 a 16 px, cada uno con su miniatura, su estado de dibujado y el lugar donde Windows lo usa
    La lista de tamaños muestra todas las entradas juntas: una buena forma se sigue reconociendo en la miniatura de 16 px.

    Elige una única silueta que se entienda de un vistazo: una letra, un objeto sencillo, una marca geométrica. Evita el detalle fotográfico, los contornos finos y los textos de más de dos caracteres. Pregúntate: ¿lo reconocería como una mancha de 16×16 en una barra de tareas oscura?

  2. 02

    Dibuja primero el de 256×256

    Abre el editor, selecciona 256×256 y dibuja la versión maestra. Usa las herramientas Línea, Rectángulo y Elipse con un grosor grande para una geometría limpia, el Pincel con una dureza inferior a 100 para sombreados suaves y el Relleno para las zonas planas. Mantén pulsada Shift mientras arrastras un rectángulo o una elipse para mantener la proporción cuadrada.

    Deja un margen de entre el 8 y el 10 % alrededor del dibujo. Windows nunca añade su propio margen, y una forma que toca el borde se ve apretada junto a los iconos del sistema.

    Edición del lienzo de 256×256 con la herramienta Texto seleccionada: la lista de herramientas y las opciones de texto a la izquierda y una vista previa en vivo del texto en el lienzo
    El maestro de 256×256. La lista de herramientas de la izquierda tiene un atajo de teclado por herramienta; el panel de opciones cambia según la herramienta.
  3. 03

    Reduce y luego retoca a mano

    El menú Escalar desde situado sobre el lienzo, con los tamaños dibujados que pueden usarse como origen
    Escalar desde enumera cada tamaño dibujado como posible origen.

    Selecciona 48×48 y haz clic en Escalar desde 256×256, encima del lienzo. El editor reescala con un filtro Lanczos, que es lo mejor que da el escalado automático, pero a 32, 24 y sobre todo 16 píxeles el escalado automático siempre deja bordes borrosos. Activa la cuadrícula, acerca el zoom y:

    • Ajusta los bordes importantes a píxeles enteros con el Lápiz; una línea de 1 px que cae a caballo entre dos píxeles se ve gris y blanda.
    • Simplifica: elimina los detalles interiores y engrosa los trazos hasta al menos 2 px a 32 y 1–2 px a 16.
    • Aumenta ligeramente el contraste en los tamaños pequeños; los iconos diminutos pierden saturación a la vista.
    • Usa el Cuentagotas para tomar colores de la versión grande y que el conjunto sea coherente.
  4. 04

    Comprueba cada contexto

    Haz clic en Vista previa en Windows. El cuadro muestra el icono en una barra de tareas oscura, sobre un fondo de escritorio, en las vistas de lista e iconos grandes del Explorador, en la barra de título de una ventana y en una pestaña del navegador. Problemas habituales que así se detectan:

    • Un dibujo oscuro que desaparece en la barra de tareas oscura: añade un contorno claro o una forma base más clara.
    • Bordes semitransparentes que se ensucian sobre el fondo de escritorio: ajusta el alfa de los píxeles del borde a 16 y 24 px.
    • Texto que se vuelve ilegible: sustitúyelo por una forma por debajo de 32 px.
    El cuadro Vista previa en Windows: el icono en la barra de tareas, como acceso directo del escritorio y en las vistas de lista e iconos grandes del Explorador
    Cada maqueta usa la entrada que elegiría Windows: 24 px en la barra de tareas, 16 px en la vista de lista y 48 px en el escritorio.
  5. 05

    Exporta

    Exportar escribe un único .ico con todos los tamaños que hayas seleccionado. La entrada de 256 va comprimida en PNG (como espera Windows desde Vista) y las más pequeñas son BMP de 32 bits con alfa. Los tamaños que no hayas dibujado se rellenan automáticamente a partir del siguiente más grande, así que el archivo siempre está completo. También puedes descargar el tamaño actual como PNG, o un ZIP con todos los tamaños para la ficha de una tienda o un instalador.

    El cuadro Exportar: siete casillas de tamaño, un campo de nombre de archivo y los botones Descargar .ICO, PNG y ZIP
  6. 06

    Intégralo en tu aplicación

    El cuadro de exportación incluye fragmentos listos para copiar:

    Pestañas de fragmentos en el cuadro Exportar (C/C++ .rc, .NET .csproj, Electron, Tauri, favicon web) con el ejemplo de .rc a la vista
    • C / C++: una instrucción ICON en tu archivo .rc; el recurso de icono con el número más bajo pasa a ser el icono del ejecutable.
    • .NET: <ApplicationIcon> en el .csproj, más Icon="…" en una ventana WPF.
    • Electron: build.win.icon para electron-builder y la opción icon de BrowserWindow.
    • Tauri: bundle.icon en tauri.conf.json.

    Tras sustituir un icono, Windows puede seguir mostrando el antiguo desde su caché de iconos. Se arregla recompilando el ejecutable con un tamaño de archivo distinto o vaciando la caché (ie4uinit.exe -show).

Evita

Errores habituales

Cuatro cosas que hacen que un buen icono se vea mal en algún lugar de Windows.

  • Un PNG renombrado a .ico

    Entregar un único PNG de 256 px con la extensión cambiada a .ico. Funciona en algunos sitios y se ve borroso en todos los demás.

  • Sin 16 ni 24 px

    La vista de lista del Explorador y el modo pequeño de la barra de tareas los usan constantemente: olvidarlos supone una reducción borrosa justo donde más se mira.

  • Degradados en todo el icono

    A 16 px se convierten en una mancha. Usa degradados solo en zonas grandes y aplánalos en los tamaños pequeños.

  • Sombras proyectadas incrustadas

    Windows compone los iconos sobre muchos fondos distintos; una sombra incrustada queda mal en la mayoría.

Sigue leyendo

Más sobre iconos de Windows

Referencia · 6 min Guía rápida de tamaños de icono de Windows Todos los contextos en los que Windows dibuja un icono y qué entrada elige en cada uno. Paso a paso · 8 min Cambiar iconos en Windows 11 y 10 Iconos de carpetas, accesos directos, escritorio y unidades con tu propio .ico. Ayuda Preguntas frecuentes Transparencia, estructura del ICO, compatibilidad con navegadores y privacidad.

Pruébalo mientras lees

El editor es gratis, no necesita cuenta y exporta un .ico listo para Windows con los siete tamaños.

Abrir el editor