Crear un icono de app Electron desde un favicon

Si tu app Electron empaquetada sigue mostrando el logotipo predeterminado de Electron, el icono nativo del bundle no está configurado. Crear un icono de aplicación Electron a partir de archivos favicon requiere recursos para cada plataforma; el recurso de la página declarado con rel='icon' es distinto del icono de la app instalada ([HTML Standard](https://html.spec.whatwg.org/multipage/links.html#rel-icon)).

Prerrequisitos

• Un proyecto Electron, electron-builder e ImageMagick disponibles en tu PATH.
• Un SVG cuadrado o el favicon PNG de mayor tamaño disponible. No amplíes una imagen rasterizada de 16 píxeles y esperes que conserve la nitidez.
• Para los comandos de macOS, abre un shell de macOS con sips e iconutil.

Si falta el archivo de origen, consulta Cómo descargar un favicon de cualquier sitio web. Mzu favicondl puede convertirlo a PNG e ICO.

Crear un icono de aplicación Electron a partir de archivos favicon

1. Crea una imagen maestra de 1024 píxeles. Mantén la ilustración centrada en un lienzo cuadrado transparente:

   magick -background none favicon.svg -resize '1024x1024>' -gravity center -extent 1024x1024 icon.png

   Sustituye favicon.svg por tu archivo. Prefiere el arte vectorial; vuelve a dibujar una imagen rasterizada muy pequeña antes de exportarla.
2. Genera un ICO multirresolución. Renombrar un PNG no crea un ICO:

   magick -background none favicon.svg -define icon:auto-resize=256,128,64,48,32,24,16 icon.ico

   Sustituye la entrada favicon.svg por tu archivo real y deja icon.png junto a icon.ico.
3. Crea el ICNS nativo de macOS en macOS a partir de esa imagen maestra:

   mkdir -p icon.iconset
   sips -z 16 16 icon.png --out icon.iconset/icon_16x16.png
   sips -z 32 32 icon.png --out icon.iconset/[email protected]
   sips -z 32 32 icon.png --out icon.iconset/icon_32x32.png
   sips -z 64 64 icon.png --out icon.iconset/[email protected]
   sips -z 128 128 icon.png --out icon.iconset/icon_128x128.png
   sips -z 256 256 icon.png --out icon.iconset/[email protected]
   sips -z 256 256 icon.png --out icon.iconset/icon_256x256.png
   sips -z 512 512 icon.png --out icon.iconset/[email protected]
   sips -z 512 512 icon.png --out icon.iconset/icon_512x512.png
   cp icon.png icon.iconset/[email protected]
   iconutil -c icns icon.iconset -o icon.icns

   Esto produce un contenedor ICNS nativo.
4. Indica a electron-builder la ruta de cada asset en electron-builder.yml:

   win:
     icon: build/icon.ico
   mac:
     icon: build/icon.icns
   linux:
     icon: build/icon.png

   Copia los tres archivos en build/. Ejecuta npx electron-builder y revisa el paquete de esa plataforma.

Errores comunes

• Usar únicamente el favicon del navegador. El favicon de una pestaña no sustituye al icono del paquete de la aplicación. Consulta la diferencia entre un favicon y un icono de aplicación para conocer las distintas consideraciones de diseño.
• Cambiar el nombre de un PNG a ICO. La extensión no crea el contenedor con varios tamaños; utiliza el comando de conversión indicado anteriormente.
• Perder la marca al recortarla. Mantén las formas importantes lejos de los bordes y prueba el tamaño de visualización más pequeño. Los iconos nativos necesitan una ilustración más sencilla que un logo completo.
• Usar rutas que no coinciden. Las rutas del YAML son relativas a la configuración del proyecto y, en Linux, distinguen entre mayúsculas y minúsculas. Confirma que todos los archivos existen antes de compilar.

Conclusión

Usa el favicon como arte fuente, exporta los contenedores nativos de cada plataforma y deja que la herramienta de empaquetado coloque el icono correcto en cada paquete de la aplicación. Mzu favicondl prepara la conversión del favicon a PNG y la generación del ICO para que puedas centrarte en una marca limpia y en una compilación reproducible de Electron.