Favicons y Electron/Tauri: Branding de tu aplicación web de escritorio

Has construido una aplicación web y ahora quieres empaquetarla como aplicación de escritorio. Inicias Electron o Tauri, ejecutas el comando de compilación y... ahí está ese icono genérico predeterminado mirándote. No exactamente el aspecto profesional que buscabas.

El asunto es este: los iconos de aplicaciones de escritorio funcionan completamente diferente de los favicons web. Ese pequeño PNG de 32x32 en tu carpeta public no va a ser suficiente. Las aplicaciones de escritorio necesitan múltiples formatos, tamaños específicos y archivos específicos por plataforma en los que la mayoría de los desarrolladores web nunca piensan.

Por qué tu favicon no es suficiente

Cuando tu aplicación web se ejecuta en un navegador, el favicon aparece en la pestaña. Simple. Pero cuando envuelves esa misma aplicación en Electron o Tauri, de repente necesitas iconos para:

La barra de título de la ventana de la aplicación
El dock (macOS) o la barra de tareas (Windows)
El instalador y el asistente de configuración
La lista "Agregar o quitar programas"
Asociaciones de archivos
Búsqueda Spotlight y vistas previas del Finder

Cada uno de estos contextos espera diferentes tamaños y a veces formatos completamente diferentes. Por eso un solo archivo favicon deja tu aplicación de escritorio con aspecto inacabado.

Los tres formatos que realmente necesitas

ICO para Windows

Windows usa el formato ICO, que en realidad es un contenedor que contiene múltiples tamaños en un solo archivo. Tu archivo ico debe incluir capas para 16, 24, 32, 48, 64 y 256 píxeles. La capa de 256px es particularmente importante porque Windows la usa para pantallas de alta DPI y vistas de iconos grandes.

Un error común es generar un ico con solo una capa de 32px. Esto funciona para la barra de tareas, pero tu aplicación se verá borrosa en el menú Inicio y el explorador de archivos.

ICNS para macOS

El formato ICNS de Apple es similar en concepto a ICO - agrupa múltiples tamaños juntos. Pero los requisitos de tamaño son más estrictos. Necesitas 16x16, 32x32, 128x128, 256x256 y 512x512 en versiones tanto 1x como 2x para pantallas Retina.

El comando iconutil en macOS puede convertir una carpeta especialmente estructurada de PNGs en un archivo icns, pero honestamente, las herramientas automatizadas son más fáciles.

PNG para Linux

Los entornos de escritorio Linux son más flexibles. La mayoría aceptará un conjunto de archivos PNG en tamaños estándar (128, 256, 512). Algunas configuraciones de electron-builder y Tauri simplemente apuntan a un único PNG de alta resolución y dejan que el sistema maneje el escalado.

Configurando Electron

Si estás usando electron-builder (que la mayoría de proyectos Electron usan), la configuración de iconos va en tu package.json o electron-builder.yml:

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

electron-builder busca archivos de iconos en el directorio buildResources (por defecto build). Coloca tu icon.icns, icon.ico y un conjunto de archivos PNG allí, y estás listo.

Para Electron Forge, el proceso es similar pero usa un formato de configuración diferente. El archivo forge.config.js maneja las rutas de iconos para cada plataforma.

Configurando Tauri

Tauri toma un enfoque ligeramente diferente. El comando tauri icon genera todos los formatos requeridos desde una única imagen fuente:

npm run tauri icon ./app-icon.png

Esto crea toda la carpeta de iconos con archivos correctamente formateados para todas las plataformas. La salida va a src-tauri/icons/ por defecto.

Tu tauri.conf.json referencia estos iconos en la sección bundle:

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

Tauri 2.0 simplificó esta configuración - la clave bundle ahora está en el nivel superior en lugar de anidada bajo tauri.

Tu favicon web todavía importa

Aquí hay algo que confunde a la gente: incluso después de configurar los iconos de escritorio, tu favicon web todavía se usa dentro de la aplicación. Cuando tu aplicación Electron o Tauri carga tu contenido web, el webview sigue solicitando favicon.ico igual que lo haría un navegador.

Esto significa que necesitas ambos:

Iconos de aplicación de escritorio (icns, ico, png) para la UI a nivel de sistema operativo
Favicons web para el contenido interno del webview

Si omites el favicon web, algún chrome interno del navegador o devtools podría mostrar un icono roto. Es un problema menor, pero fácil de arreglar.

Generando iconos desde una única fuente

Nadie quiere crear manualmente más de 15 variantes de iconos. Aquí hay herramientas que realmente funcionan:

Para Electron:

electron-icon-builder - Dale un PNG de 1024x1024 y genera todo lo que necesitas
electron-icon-maker - Funcionalidad similar, paquete npm

Para Tauri:

Comando integrado tauri icon - La opción más fácil si ya estás usando Tauri CLI

Propósito general:

Real Favicon Generator - Basado en web, maneja tanto favicons web como iconos de escritorio
IconVectors - Convierte un único SVG a conjuntos ICO, ICNS y PNG

La clave es comenzar con una imagen fuente de al menos 1024x1024 píxeles. SVG es aún mejor ya que escala perfectamente.

Consideraciones de diseño

Los iconos de escritorio viven en contextos diferentes a los favicons web. Algunas cosas a tener en cuenta:

La simplicidad escala hacia abajo. Tu icono de 512px puede verse genial, pero verifica cómo se renderiza a 16px. Los detalles complejos se convierten en manchas borrosas.

Prueba en fondos reales. Los iconos del dock de macOS se sientan sobre un fondo translúcido. Los iconos de la barra de tareas de Windows pueden estar en temas claros u oscuros. Asegúrate de que tu icono tenga suficiente contraste en ambos escenarios.

Respeta las convenciones de plataforma. Los iconos de macOS a menudo tienen sombras sutiles y esquinas redondeadas. Los iconos de Windows tienden a ser más planos. No tienes que seguir esto exactamente, pero ser consciente de ello ayuda a que tu aplicación se sienta nativa.

Considera variantes enmascarables. Algunos contextos (particularmente Android si también estás haciendo móvil) recortarán tu icono en un círculo o cuadrado redondeado. Diseña con zonas seguras en mente.

Problemas comunes y soluciones

¿El icono no se actualiza después de recompilar? Tanto Electron como Tauri cachean iconos agresivamente durante el desarrollo. Intenta limpiar el directorio de salida de compilación completamente y recompilar.

¿Iconos borrosos en Windows? A tu archivo ico le falta la capa de 256px. Regenera con una herramienta que incluya todos los tamaños requeridos.

¿macOS muestra icono genérico? El archivo icns podría estar malformado o en la ubicación incorrecta. Ejecuta iconutil -c icns TuIcono.iconset -o icon.icns para regenerar desde cero.

¿El icono de Linux no aparece en el dock? Algunos entornos de escritorio necesitan que el icono se registre a través de un archivo .desktop. Verifica tu configuración de electron-builder o Tauri para ajustes específicos de Linux.

Poniéndolo todo junto

Una configuración de iconos correctamente configurada para una aplicación de escritorio multiplataforma se ve así:

build/
├── icon.icns          # Icono de aplicación macOS
├── icon.ico           # Icono de aplicación Windows
├── icon.png           # 512px para Linux
├── 256x256.png        # Tamaños adicionales de Linux
└── 128x128.png

Más tus favicons web regulares en el directorio public o static para el contenido del webview.

El esfuerzo extra vale la pena. Un icono pulido señala a los usuarios que tu aplicación está completa y es profesional - no solo una página web envuelta en una shell. Es una de las primeras cosas que la gente ve, y las primeras impresiones importan.

Referencias

Electron Forge Icon Guide - Documentación oficial para crear y añadir iconos a aplicaciones Electron
electron-builder Icons - Referencia de configuración para configuración de iconos de electron-builder
Tauri App Icons - Documentación de Tauri 2.0 para generación y configuración de iconos
Apple Icon Image Format - Referencia de Wikipedia para especificaciones del formato ICNS
Define Your App Icons - MDN - Guía de Mozilla sobre requisitos de iconos de aplicación para PWAs