Фавиконы и Electron/Tauri: брендирование десктопного веб-приложения

Итак, вы создали веб-приложение и хотите упаковать его как десктопное приложение. Запускаете Electron или Tauri, выполняете команду сборки и... видите стандартную иконку по умолчанию. Не совсем тот профессиональный вид, на который вы рассчитывали.

Дело в том, что иконки десктопных приложений работают совершенно иначе, чем веб-фавиконы. Тот маленький PNG 32x32 в вашей папке public? Его недостаточно. Десктопные приложения требуют нескольких форматов, определённых размеров и специфических для платформы файлов, о которых большинство веб-разработчиков даже не задумывается.

Почему вашего фавикона недостаточно

Когда веб-приложение работает в браузере, фавикон отображается во вкладке. Просто. Но когда вы оборачиваете то же приложение в Electron или Tauri, внезапно нужны иконки для:

Заголовка окна приложения
Dock (macOS) или панели задач (Windows)
Установщика и мастера настройки
Списка «Установка и удаление программ»
Ассоциаций файлов
Поиска Spotlight и превью Finder

Каждый из этих контекстов ожидает разные размеры, а иногда и совершенно разные форматы. Вот почему один файл фавикона делает ваше десктопное приложение незавершённым.

Три формата, которые вам действительно нужны

ICO для Windows

Windows использует формат ICO, который по сути является контейнером, содержащим несколько размеров в одном файле. Ваш ico-файл должен включать слои для 16, 24, 32, 48, 64 и 256 пикселей. Слой 256px особенно важен, потому что Windows использует его для дисплеев с высоким DPI и крупного отображения иконок.

Распространённая ошибка — генерировать ico только со слоем 32px. Это работает для панели задач, но приложение будет выглядеть размыто в меню «Пуск» и проводнике файлов.

ICNS для macOS

Формат Apple ICNS схож по концепции с ICO — он объединяет несколько размеров вместе. Но требования к размерам строже. Нужны 16x16, 32x32, 128x128, 256x256 и 512x512 в версиях 1x и 2x для Retina-дисплеев.

Команда iconutil на macOS может конвертировать специально структурированную папку PNG в icns-файл, но, честно говоря, автоматизированные инструменты проще.

PNG для Linux

Десктопные среды Linux более гибки. Большинство примут набор PNG-файлов стандартных размеров (128, 256, 512). Некоторые конфигурации electron-builder и Tauri просто указывают на один PNG высокого разрешения и позволяют системе масштабировать.

Настройка Electron

Если вы используете electron-builder (как большинство проектов на Electron), конфигурация иконок указывается в package.json или 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 ищет файлы иконок в директории buildResources (по умолчанию build). Поместите туда icon.icns, icon.ico и набор PNG-файлов — и готово.

Для Electron Forge процесс аналогичен, но используется другой формат конфигурации. Файл forge.config.js обрабатывает пути иконок для каждой платформы.

Настройка Tauri

Tauri использует несколько иной подход. Команда tauri icon генерирует все необходимые форматы из одного исходного изображения:

npm run tauri icon ./app-icon.png

Это создаёт целую папку иконок с правильно отформатированными файлами для всех платформ. Результат по умолчанию сохраняется в src-tauri/icons/.

Файл tauri.conf.json ссылается на эти иконки в секции bundle:

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

Tauri 2.0 упростил эту конфигурацию — ключ bundle теперь находится на верхнем уровне, а не вложен в tauri.

Ваш веб-фавикон всё ещё важен

Вот что сбивает людей с толку: даже после настройки иконок десктопного приложения, ваш веб-фавикон по-прежнему используется внутри приложения. Когда Electron или Tauri загружают ваш веб-контент, webview запрашивает favicon.ico точно так же, как браузер.

Это значит, что вам нужны оба:

Иконки десктопного приложения (icns, ico, png) для интерфейса ОС
Веб-фавиконы для внутреннего содержимого webview

Если пропустить веб-фавикон, некоторые внутренние элементы интерфейса или инструменты разработчика могут показать сломанную иконку. Мелочь, но легко исправимая.

Генерация иконок из одного исходника

Никто не хочет вручную создавать 15+ вариантов иконки. Вот инструменты, которые действительно работают:

Для Electron:

electron-icon-builder — дайте ему PNG 1024x1024, и он создаст всё необходимое
electron-icon-maker — аналогичная функциональность, npm-пакет

Для Tauri:

Встроенная команда tauri icon — простейший вариант, если вы уже используете Tauri CLI

Универсальные:

Real Favicon Generator — веб-сервис, генерирует и веб-фавиконы, и десктопные иконки
IconVectors — конвертирует один SVG в ICO, ICNS и наборы PNG

Ключ — начать с исходного изображения размером не менее 1024x1024 пикселей. SVG ещё лучше, так как масштабируется идеально.

Типичные проблемы и решения

Иконка не обновляется после пересборки? И Electron, и Tauri агрессивно кэшируют иконки при разработке. Попробуйте полностью очистить директорию сборки и пересобрать.

Размытые иконки в Windows? В вашем ico-файле отсутствует слой 256px. Перегенерируйте инструментом, который включает все необходимые размеры.

macOS показывает стандартную иконку? Файл icns может быть повреждён или находиться не в том месте. Запустите iconutil -c icns YourIcon.iconset -o icon.icns для перегенерации с нуля.

Иконка не отображается в Linux dock? Некоторые десктопные среды требуют регистрации иконки через .desktop-файл. Проверьте конфигурацию electron-builder или Tauri для специфических настроек Linux.

Собираем всё вместе

Правильно настроенная система иконок для кросс-платформенного десктопного приложения выглядит так:

build/
├── icon.icns          # Иконка приложения macOS
├── icon.ico           # Иконка приложения Windows
├── icon.png           # 512px для Linux
├── 256x256.png        # Дополнительные размеры Linux
└── 128x128.png

Плюс ваши обычные веб-фавиконы в директории public или static для содержимого webview.

Дополнительные усилия окупаются. Качественная иконка сигнализирует пользователям, что ваше приложение завершено и профессионально — а не просто веб-страница, обёрнутая в оболочку. Это одно из первых, что видят люди, а первое впечатление имеет значение.

Ссылки

Electron Forge Icon Guide — Официальная документация по созданию и добавлению иконок в приложения Electron
electron-builder Icons — Справочник по конфигурации иконок electron-builder
Tauri App Icons — Документация Tauri 2.0 по генерации и настройке иконок
Apple Icon Image Format — Справочник по спецификациям формата ICNS
Define Your App Icons - MDN — Руководство Mozilla по требованиям к иконкам приложений для PWA