skills.rest
HNULS-LabHub
HNULS-LabHubOFFICIAL
Explore all skills by this author →
GitHub

Electron Tray Icon Setup

Configure platform-aware Electron tray icons for dev and packaged builds.

Updated Jan 9, 2026
Search Tags:#packaging#macos#electron#linux#icon#windows#tray
One-click install
npx skills add https://github.com/HNULS-LabHub/HNULS-KnowledgeDatabase --skill electron-tray-icon-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Electron Tray Icon Setup
Source: https://github.com/HNULS-LabHub/HNULS-KnowledgeDatabase/tree/main/.agent/skills/Electron%20Tray%20Icon%20Setup
Command: npx skills add https://github.com/HNULS-LabHub/HNULS-KnowledgeDatabase --skill electron-tray-icon-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often experience unreliable or missing system tray icons in Electron apps when transitioning from development to packaged builds. Path handling and platform differences can cause icons to fail to render, degrade UX, and complicate distribution.

Core Features & Use Cases

  • Platform-aware icon path resolution for dev vs packaged builds across Windows, macOS, and Linux.
  • Support for Windows ICO with multiple sizes, macOS Template PNG, and Linux PNG icons.
  • Packaging integration with extraResources and lifecycle-safe Tray instantiation, including persistent tray and context menu.
  • User interaction patterns including click to show/hide main window and a robust right-click context menu.

Quick Start

Configure the tray icon by loading platform-appropriate icons after app is ready, create a Tray instance with a context menu, and ensure the main window toggles on tray interaction.

Frequently Asked Questions about Electron Tray Icon Setup

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Electron tray icon disappear in packaged builds?▼

Electron tray icons often disappear in packaged builds due to incorrect icon path resolution. Using app.isPackaged to switch between development and production paths ensures the Tray instance locates the bundled extraResources correctly across Windows, macOS, and Linux.

What icon formats do I need for an Electron system tray across Windows, macOS, and Linux?▼

Electron system tray requires platform-specific formats: Windows ICO with multiple sizes, macOS Template PNG for dark mode compatibility, and standard PNG for Linux. Using the correct format ensures your tray icon renders properly and maintains consistent visual quality.

How do I configure extraResources for Electron tray icon packaging?▼

Configure extraResources in your packaging configuration to bundle platform-specific tray icons. This ensures the Tray instance can resolve the correct icon paths via app.isPackaged, maintaining consistent tray icon rendering across development and packaged production environments.

How do I add a right-click context menu to an Electron tray icon?▼

To add a right-click context menu to an Electron tray icon, create a Menu instance and assign it to your persistent Tray instance. You can configure menu items to toggle main window visibility and manage the application lifecycle safely.

Does Electron tray icon setup handle lifecycle management to prevent app crashes?▼

Proper Electron tray icon setup maintains a persistent Tray instance with lifecycle management. This prevents premature garbage collection of the tray icon and ensures context menu interactions remain stable throughout the application runtime on all supported platforms.

Related Skills

Explore More Software Engineering Skills→
brianlovinbrianlovin
357

electron-wrapper

Bundle a Bun-based web server into an Electron desktop app with electron-builder.

Community
Advanced
rajavijayachrajavijayach
11

electrobun-native-ui

Integrate native UI components into Electrobun desktop applications.

Community
Intermediate
Chenm4Chenm4

desktop

Guide Electron desktop development with IPC patterns, window management, and menu configuration.

Community
Advanced
bughqbughq
2

stacks-desktop

Configure desktop windows and system trays via Tauri integration in Stacks.

Official
Intermediate