Favicons e Electron/Tauri: Identidade Visual do Seu App Desktop

Então você construiu um web app e agora quer empacotá-lo como aplicação desktop. Você inicia o Electron ou Tauri, roda o comando de build e... lá está aquele ícone genérico padrão olhando para você. Não é exatamente o visual profissional que você queria.

A questão é: ícones de apps desktop funcionam de forma completamente diferente dos favicons web. Aquele pequeno PNG de 32x32 na sua pasta public? Ele não vai dar conta. Apps desktop precisam de múltiplos formatos, tamanhos específicos e arquivos específicos por plataforma que a maioria dos desenvolvedores web nunca pensa.

Por Que Seu Favicon Não É Suficiente

Quando seu web app roda no navegador, o favicon aparece na aba. Simples. Mas quando você envolve esse mesmo app no Electron ou Tauri, de repente você precisa de ícones para:

A barra de título da janela da aplicação
O dock (macOS) ou barra de tarefas (Windows)
O instalador e assistente de configuração
A lista "Adicionar/Remover Programas"
Associações de arquivos
Busca do Spotlight e pré-visualizações do Finder

Cada um desses contextos espera tamanhos diferentes e às vezes formatos completamente diferentes. É por isso que um único arquivo de favicon deixa seu app desktop com aparência inacabada.

Os Três Formatos Que Você Realmente Precisa

ICO para Windows

O Windows usa o formato ICO, que na verdade é um container que contém múltiplos tamanhos em um único arquivo. Seu arquivo ico deve incluir camadas para 16, 24, 32, 48, 64 e 256 pixels. A camada de 256px é particularmente importante porque o Windows a usa para telas high-DPI e visualizações de ícones grandes.

Um erro comum é gerar um ico com apenas uma camada de 32px. Isso funciona para a barra de tarefas, mas seu app ficará borrado no Menu Iniciar e no explorador de arquivos.

ICNS para macOS

O formato ICNS da Apple é similar em conceito ao ICO - ele agrupa múltiplos tamanhos juntos. Mas os requisitos de tamanho são mais rigorosos. Você precisa de 16x16, 32x32, 128x128, 256x256 e 512x512 em versões 1x e 2x para telas Retina.

O comando iconutil no macOS pode converter uma pasta especialmente estruturada de PNGs em um arquivo icns, mas honestamente, ferramentas automatizadas são mais fáceis.

PNG para Linux

Ambientes desktop Linux são mais flexíveis. A maioria aceita um conjunto de arquivos PNG em tamanhos padrão (128, 256, 512). Algumas configurações do electron-builder e Tauri simplesmente apontam para um único PNG de alta resolução e deixam o sistema lidar com o redimensionamento.

Configurando o Electron

Se você está usando electron-builder (como a maioria dos projetos Electron), a configuração de ícones vai no seu package.json ou electron-builder.yml:

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

O electron-builder procura arquivos de ícone no diretório buildResources (padrão build). Coloque seus arquivos icon.icns, icon.ico e um conjunto de PNGs lá, e pronto.

Para o Electron Forge, o processo é similar mas usa um formato de configuração diferente. O arquivo forge.config.js lida com os caminhos dos ícones para cada plataforma.

Configurando o Tauri

O Tauri tem uma abordagem um pouco diferente. O comando tauri icon gera todos os formatos necessários a partir de uma única imagem fonte:

npm run tauri icon ./app-icon.png

Isso cria toda a pasta de ícones com arquivos formatados corretamente para todas as plataformas. A saída vai para src-tauri/icons/ por padrão.

Seu tauri.conf.json referencia esses ícones na seção bundle:

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

O Tauri 2.0 simplificou essa configuração - a chave bundle agora está no nível superior em vez de aninhada sob tauri.

Seu Favicon Web Ainda Importa

Algo que confunde as pessoas: mesmo após configurar os ícones desktop, seu favicon web ainda é usado dentro do app. Quando seu app Electron ou Tauri carrega seu conteúdo web, a webview ainda solicita o favicon.ico como um navegador faria.

Isso significa que você precisa de ambos:

Ícones da aplicação desktop (icns, ico, png) para a UI no nível do SO
Favicons web para o conteúdo interno da webview

Se você pular o favicon web, alguns elementos internos do navegador ou devtools podem mostrar um ícone quebrado. É um problema menor, mas fácil de resolver.

Gerando Ícones a Partir de uma Única Fonte

Ninguém quer criar manualmente mais de 15 variantes de ícone. Aqui estão ferramentas que realmente funcionam:

Para Electron:

electron-icon-builder - Dê um PNG de 1024x1024 e ele gera tudo que você precisa
electron-icon-maker - Funcionalidade similar, pacote npm

Para Tauri:

Comando integrado tauri icon - A opção mais fácil se você já está usando a CLI do Tauri

Uso geral:

Real Favicon Generator - Baseado na web, lida com favicons web e ícones desktop
IconVectors - Converte um único SVG para conjuntos ICO, ICNS e PNG

A chave é começar com uma imagem fonte de pelo menos 1024x1024 pixels. SVG é ainda melhor já que escala perfeitamente.

Considerações de Design

Ícones desktop vivem em contextos diferentes dos favicons web. Algumas coisas para ter em mente:

Simplicidade reduz bem. Seu ícone de 512px pode ficar ótimo, mas verifique como ele renderiza em 16px. Detalhes complexos se tornam borrões lamacentos.

Teste em fundos reais. Ícones do dock no macOS ficam sobre um fundo translúcido. Ícones da barra de tarefas do Windows podem estar em temas claros ou escuros. Certifique-se de que seu ícone tenha contraste suficiente em ambos os cenários.

Respeite as convenções da plataforma. Ícones do macOS frequentemente têm sombras sutis e cantos arredondados. Ícones do Windows tendem a ser mais planos. Você não precisa seguir exatamente, mas estar ciente ajuda seu app a parecer nativo.

Considere variantes maskable. Alguns contextos (particularmente Android se você também está fazendo mobile) recortarão seu ícone em um círculo ou quadrado arredondado. Projete com zonas seguras em mente.

Problemas Comuns e Correções

Ícone não atualiza após rebuild? Tanto o Electron quanto o Tauri armazenam ícones em cache agressivamente durante o desenvolvimento. Tente limpar o diretório de output do build completamente e reconstruir.

Ícones borrados no Windows? Seu arquivo ico está sem a camada de 256px. Regenere com uma ferramenta que inclua todos os tamanhos necessários.

macOS mostra ícone genérico? O arquivo icns pode estar malformado ou no local errado. Execute iconutil -c icns YourIcon.iconset -o icon.icns para regenerar do zero.

Ícone do Linux não aparece no dock? Alguns ambientes desktop precisam do ícone registrado através de um arquivo .desktop. Verifique sua configuração do electron-builder ou Tauri para configurações específicas do Linux.

Juntando Tudo

Uma configuração de ícone adequada para um app desktop multiplataforma se parece com isso:

build/
├── icon.icns          # Ícone da aplicação macOS
├── icon.ico           # Ícone da aplicação Windows
├── icon.png           # 512px para Linux
├── 256x256.png        # Tamanhos adicionais para Linux
└── 128x128.png

Mais seus favicons web normais no diretório public ou static para o conteúdo da webview.

O esforço extra compensa. Um ícone polido sinaliza aos usuários que seu app está completo e profissional - não apenas uma página web envolvida em um shell. É uma das primeiras coisas que as pessoas veem, e a primeira impressão importa.

Referências

Electron Forge Icon Guide - Documentação oficial para criar e adicionar ícones a apps Electron
electron-builder Icons - Referência de configuração para configuração de ícones do electron-builder
Tauri App Icons - Documentação do Tauri 2.0 para geração e configuração de ícones
Apple Icon Image Format - Referência Wikipedia para especificações do formato ICNS
Define Your App Icons - MDN - Guia da Mozilla sobre requisitos de ícones de app para PWAs