Generador de iconos Electron: un máster, todas las plataformas
Una app Electron se publica en macOS, Windows y Linux, y cada plataforma archiva tu icono de forma distinta: .icns en el bundle de la app, .ico en el ejecutable de Windows, PNG en Linux. Este generador de iconos Electron dibuja el máster de 1024 px a partir de una frase, lo comprueba a tamaño de dock y te deja un archivo limpio para que electron-builder corte desde él.
Iconos de apps de escritorio generados desde el texto
Iconos dibujados para apps de escritorio: marcas únicas que aguantan en una fila del dock, una barra de tareas y un diálogo de instalador, generadas a partir de prompts de una frase.
Qué necesita una app Electron de un icono
electron-builder reduce todo el trabajo a una convención: pon un icon.png cuadrado de al menos 512 px, o un icon.svg, en tus recursos de build y él convierte el archivo para cada plataforma de destino. Lo difícil nunca es la conversión. Es conseguir un máster de 1024 px que valga la pena convertir, uno que siga legible desde el instalador de 512 px hasta la barra de tareas de 32 px, y esa es la parte que gestiona este generador de iconos Electron.
La convención de build/ hace la conversión
electron-builder recoge build/icon.png o build/icon.svg automáticamente y genera los archivos de plataforma durante el empaquetado. Tu única entrada es un buen máster cuadrado de 512 px o más.
El tamaño de dock es el juez
Los iconos de escritorio viven entre un glifo de barra de título de 16 px y una ficha de dock retina de 512 px. Cada candidato se previsualiza a tamaños pequeños para que elijas una silueta, no solo un render bonito.
La IA dibuja el máster que te falta
Los conversores redimensionan lo que ya tienes. Cuando la marca todavía no existe, este generador la crea a partir de una frase, en un lenguaje visual, a resolución de exportación.
Tamaños de iconos Electron: qué entra en .icns, .ico y los PNG de Linux
Nunca autoras estos tamaños a mano. La tabla es lo que electron-builder deriva de tu único máster, así que trátala como la lista de comprobación que un generador de iconos Electron debe satisfacer.
build/icon.png, la única fuente
Un PNG cuadrado de al menos 512 px en tus recursos de build cubre las tres plataformas; 1024 px deja margen para la variante .icns más grande. Este generador exporta exactamente ese máster.
Windows: icon.ico dentro del ejecutable
El .ico empaqueta cortes de 16, 24, 32, 48, 64, 128 y 256 px. Aparece en el Explorador, la barra de tareas, los accesos directos y la hoja de propiedades del ejecutable, y un .ico ausente o demasiado pequeño es la razón por la que los builds caen en el icono por defecto.
macOS: icon.icns en el bundle de la app
El .icns agrupa variantes desde 16 px hasta 1024 px para las vistas retina del Dock y el Finder. electron-builder lo renderiza desde tu máster cuando no se aporta ningún .icns.
Linux: PNG sencillos por entorno de escritorio
Los destinos Linux referencian tamaños de PNG, típicamente 512 px para tiendas de apps y una escala descendente hasta tamaños de diálogo. electron-builder emite el set desde el mismo máster.
Cómo hacer el icono de una app Electron en 3 pasos
Cómo pasa el generador de iconos Electron de una frase al único archivo que electron-builder quiere en tus recursos de build.
- 1
Describe la app en una frase
Como "icono de app de chat, burbuja de diálogo azul redondeada sobre ficha oscura, estilo flat". Un sujeto, un lenguaje de formas. Los iconos de escritorio se juzgan en una fila de dock junto a apps nativas, así que ganan las siluetas compactas.
- 2
Juzga los candidatos a tamaño de dock
Cada candidato se previsualiza pequeño. Elige la marca que sigue legible a 32 px, porque ese es el tamaño al que tus usuarios se encuentran primero con ella en la barra de tareas y el conmutador de ventanas.
- 3
Suelta el máster de 1024 px en build/
Exporta el PNG y guárdalo como build/icon.png. electron-builder lo convierte a .icns, .ico y los PNG de Linux en la siguiente pasada de empaquetado, sin herramienta aparte.
Tres formas de producir un icono Electron
Los paquetes npm, los conversores y los generadores con IA llevan todos a la misma carpeta build/. Se diferencian en de dónde viene el máster, y por eso este generador de iconos Electron empieza un paso antes.
| Creadores de iconos npm | Conversores online | SparkIconAI | |
|---|---|---|---|
| De dónde viene el máster | Lo diseñas en otra parte, la herramienta solo corta | Subes una imagen existente | Generado desde un prompt de texto |
| Emite el set de plataformas | Sí, a build/icons/ | Normalmente un formato por descarga | Máster de 1024 px para que corte electron-builder |
| Dónde se ejecuta | Tus devDependencies y tu CI | Una pestaña del navegador | Una pestaña del navegador |
| Juicio a tamaño pequeño | Ninguno, solo ves el tamaño completo | Rara vez | Vistas previas de dock y barra de tareas por candidato |
| Cambios de diseño | De vuelta a la herramienta de diseño | Reexportar desde el origen | Edita la frase y vuelve a ejecutar |
| Coste para probar | Gratis, tu tiempo | Gratis con límites | Créditos gratis para empezar |
Comparación de paquetes npm tipo electron-icon-builder, conversores de iconos online y generadores de iconos con IA típicos tal como se publican en 2026. electron-builder realiza la conversión final de plataforma en las tres rutas; cada herramienta varía.
Prompts de iconos de apps Electron que sobreviven al dock
Copia uno y cambia el sujeto. Un prompt de icono de escritorio que funciona nombra un sujeto, un lenguaje de formas y una decisión de fondo; los archivos de plataforma se derivan después, no se dibujan aquí.
App de utilidad
icono de ventana de terminal, ficha oscura redondeada, glifo de prompt verde, estilo flat, legible a 32 px
App de medios
icono de reproductor de música, disco de vinilo sobre ficha degradada, sombras suaves, sin texto
Herramienta de desarrollo
icono de editor de código, corchetes angulares sobre cuadrado índigo redondeado, estilo geométrico flat, fondo transparente
Del máster a la app empaquetada
El generador termina en el máster; electron-builder lo lleva el resto del camino. Un generador de iconos Electron que se detenga en un render bonito dejaría la historia del empaquetado sin terminar, así que un archivo en un lugar convencional sustituye a una estantería de recursos de iconos y a los scripts que los mantenían.
Guarda el máster como build/icon.png
El directorio buildResources es la convención que electron-builder escanea. Un PNG cuadrado de al menos 512 px llamado icon.png es todo lo que pide; 1024 px cubre la variante de macOS más grande.
Deja que electron-builder convierta
Durante la pasada de empaquetado renderiza el .icns para el bundle de macOS, empaqueta el .ico dentro del ejecutable de Windows y emite los PNG de Linux. Apunta win.icon o mac.icon a archivos personalizados solo cuando necesites anular los valores por defecto.
Comprueba el resultado empaquetado
Instala o desempaqueta el artefacto y mira el dock o la barra de tareas. Windows guarda los iconos en caché de forma agresiva, así que un glifo obsoleto tras una renovación de marca suele ser la caché del sistema, no tu build.
Qué gestiona el generador de iconos Electron por ti
Todo lo que hace el generador de iconos Electron entre la frase y el archivo máster sentado en build/.
Másteres a resolución de exportación
Los candidatos se renderizan directamente a 1024 px, el tamaño que electron-builder prefiere para la escala completa del .icns, así ningún escalado se interpone entre generación y empaquetado.
Vistas previas pequeñas en cada candidato
Las vistas previas de dock y barra de tareas acompañan cada render, porque la app empaquetada se encuentra con los usuarios a 32 px mucho antes que a 512 px.
Fundos transparentes o sólidos
Las máscaras de Windows y macOS recortan distinto. Exporta transparente y deja que cada plataforma aplique su máscara, o integra una ficha redondeada que parezca deliberada en todas partes.
Variaciones sin salir del estilo
Genera variaciones de un candidato finalista para ajustar silueta y color mientras el lenguaje visual se mantiene.
Formatos que el ecosistema habla
Exportación en PNG y WEBP, transparente o sólido; cuando una tienda o una página de documentación necesita otro corte, la página del redimensionador rebana el máster sin salir del sitio.
Una marca en escritorio y web
La misma familia de prompts alimenta las páginas de icono de sitio y favicon, así la app de escritorio y el sitio web comparten una marca.
Flujos relacionados
Generadores vecinos para los trabajos alrededor de un favicon.
Icono de sitio para la página del producto
Recorta la misma marca al tamaño de pestaña del navegador para tu landing.
Icono de listado de Play Store
Si el producto publica una app de Android acompañante, parte del mismo máster.
Favicon para el sitio de documentación
Los subdominios de documentación necesitan su propia marca a prueba de 16 px.
Kit de marca alrededor del icono
Extiende el lenguaje visual a presentaciones y cabeceras sociales.
Herramientas relacionadas
Blog
Lecturas adicionales
Lecturas más largas sobre iconos, estilos y flujos de exportación.
Preguntas frecuentes sobre el generador de iconos Electron
Tamaños, la convención de build/, la ruta npm y el error del icono por defecto que no muere.
¿Qué es un generador de iconos Electron?
Produce los recursos de icono que empaqueta una app Electron. Esta página genera el máster de 1024 px con IA y lo previsualiza a tamaño de dock; electron-builder deriva después .icns, .ico y los PNG de Linux de ese único archivo durante el empaquetado.
¿Qué tamaños de icono necesita una app Electron?
Un máster cuadrado de al menos 512 px, idealmente 1024 px, guardado como build/icon.png. Desde él, electron-builder renderiza la escala .icns de macOS desde 16 px hasta 1024 px, los cortes .ico de Windows de 16 px a 256 px, y los tamaños de PNG de Linux.
¿Sigo necesitando un paquete npm tipo electron-icon-builder?
No si tu build usa el comportamiento por defecto de electron-builder: un único build/icon.png o icon.svg se convierte automáticamente. Los creadores npm siguen siendo útiles cuando tienes que entregar un .ico o .icns concreto a un pipeline que no ejecuta electron-builder, algo raro en un flujo de generador de iconos Electron.
¿Por qué mi app Electron muestra el icono por defecto?
La línea del log dice "Default electron icon is used, reason: application icon is not set". Las causas habituales son un build/icon.png ausente, un máster por debajo del tamaño mínimo, o una ruta win.icon personalizada que no resuelve. Arregla el archivo o la ruta y vuelve a compilar.
¿Cómo fijo el icono en la configuración de electron-builder?
Primero los valores por defecto: build/icon.png se recoge sin configuración. Para anular por plataforma, pon mac.icon a un .icns o un PNG de 512 px o más, win.icon a un .ico de 256 px o más, y linux.icon a tu ruta de PNG.
¿Puedo generar el icono en lugar de convertir una imagen existente?
Sí, ese es el sentido de esta página de generador de iconos Electron. Los conversores asumen que la marca existe; aquí describes la app y recibes candidatos, y después exportas el ganador a 1024 px listo para la carpeta de build.
¿Se puede probar este generador de iconos Electron gratis?
Los créditos gratis cubren las primeras generaciones. Cada candidato cuesta un crédito renderizarse, y los planes de pago añaden volumen y escalado; la sección de precios de arriba lista los niveles actuales del generador de iconos Electron.
¿Qué pasa con las distribuciones Linux con sus propios temas de iconos?
Los entornos de escritorio de Linux escalan los PNG a través de sus temas de iconos, así que un corte limpio de 512 px se comporta bien en todas partes. Publica el set estándar que emite electron-builder y deja que el tema gestione las máscaras.
.ico, .icns o .png: ¿cuál importa más?
El máster. Los tres archivos de plataforma son cortes derivados de la misma imagen cuadrada, así que invertir tu atención en un máster que se lee a 32 px rinde en todas las plataformas a la vez.
Windows muestra un icono obsoleto tras renovar la marca. ¿Mi build está mal?
Normalmente no. Windows cachea los iconos por ruta, así que el Explorador y la barra de tareas pueden conservar el glifo antiguo tras una recompilación. Limpiar la caché de iconos o renombrar el ejecutable revela el nuevo .ico.
Genera el icono de tu app Electron
El generador de iconos Electron convierte una frase en un máster de 1024 px, listo para que electron-builder corte .icns, .ico y los PNG de Linux desde él.