Tray Icon Manikin: Best Practices for Cross-Platform Tray Icons

Customizing Tray Icon Manikin — Tips, Tools, and Examples

What “Tray Icon Manikin” refers to

Assuming “Tray Icon Manikin” means a lightweight helper or library for creating and managing system tray (notification area) icons across desktop platforms (Windows, macOS, Linux), this guide covers practical customization tips, recommended tools, and concrete examples.

Tips

• Keep icons simple: Use a clear silhouette and minimal details so the icon remains legible at small sizes (16×16, 24×24, 32×32).
• Provide multiple sizes: Include at least 16, 24, 32, and 48 px variants, and supply vector (SVG) when supported.
• Use platform-aware design: Follow platform conventions — Windows favors flat icons, macOS prefers rounded shapes and translucency, Linux can vary by desktop environment.
• Support light/dark themes: Offer both light and dark variants or export icons with adaptive colors; detect theme when possible and switch dynamically.
• Include animated states sparingly: Use subtle frame-based animations or animated PNG/WebP for short alerts; avoid continuous motion that distracts.
• Accessibility and contrast: Ensure sufficient contrast with typical tray backgrounds; provide text tooltips and keyboard-accessible menu items.
• Graceful fallbacks: Detect unsupported features (badges, click behaviors) and provide functional alternatives.
• Efficient resource use: Load icons lazily and reuse resources to minimize memory and battery usage.

Tools and libraries

• Icon design: Figma, Adobe Illustrator, Inkscape (for SVG/vector export).
• Raster editing: Photoshop, GIMP.
• Icon generation: ImageMagick, svgexport, icnsutils (for macOS .icns), rsvg-convert.
• Cross-platform UI libraries:
  • Electron: built-in Tray API + nativeImage utilities.
  • Qt: QSystemTrayIcon with QIcon/QPixmap support.
  • wxWidgets: wxTaskBarIcon.
  • Java: java.awt.SystemTray / TrayIcon.
  • .NET: NotifyIcon (Windows Forms), or cross-platform libraries like Avalonia.
• Packaging utilities: electron-builder (creates proper icon bundles), iconutil (macOS), gtk-update-icon-cache (Linux).
• Testing: Virtual machines or platform-specific simulators to verify appearance and behavior.

Examples (concise)

1. Electron — dynamic theme-aware icon

   • Create SVG templates for light/dark.
   • At runtime, rasterize SVG to nativeImage at required sizes and call tray.setImage(nativeImage).
   • Swap icon on system theme change event.

2. Qt — status indicator with badge

   • Use QIcon built from multiple QPixmap sizes.
   • Compose badge by painting onto QPixmap via QPainter, then setIcon on QSystemTrayIcon.

3. Windows (.NET) — animated alert

   • Prepare a small sequence of 16×16 PNG frames.
   • Use a Timer to cycle NotifyIcon.Icon property during alert window; restore original icon afterwards.

4. Linux (GTK) — menu-integrated actions

   • Use libappindicator or Gtk.StatusIcon (deprecated on some distros) with context menu items.
   • Ensure icons are exported to multiple sizes and included in the app’s icon theme.

Example assets and code snippet (Electron)

javascript
Copy CodeCopied
// main.js (Electron) — load theme-aware tray icon
const { app, Tray, nativeImage, nativeTheme } = require(‘electron’);
let tray;
function loadTray() {
const theme = nativeTheme.shouldUseDarkColors ? ‘dark’ : ‘light’;
  const img = nativeImage.createFromPath(</span><span class="token template-string" style="color: rgb(163, 21, 21);">assets/tray-</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation">theme</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);">.png</span><span class="token template-string template-punctuation" style="color: rgb(163, 21, 21);">);
  tray = new Tray(img);
  tray.setToolTip(‘My App’);
}
app.whenReady().then(loadTray);
nativeTheme.on(‘updated’, () => {
  if (tray) {
    const theme = nativeTheme.shouldUseDarkColors ? ‘dark’ : ‘light’;
    tray.setImage(nativeImage.createFromPath(</span><span class="token template-string" style="color: rgb(163, 21, 21);">assets/tray-</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">${</span><span class="token template-string interpolation">theme</span><span class="token template-string interpolation interpolation-punctuation" style="color: rgb(57, 58, 52);">}</span><span class="token template-string" style="color: rgb(163, 21, 21);">.png</span><span class="token template-string template-punctuation" style="color: rgb(163, 21, 21);">));
  }
});

Quick checklist before release

• Icons included for all required sizes and formats (.ico, .icns, PNG, SVG).
• Light/dark and high-DPI variants verified.
• Tooltips and keyboard/menu accessibility implemented.
• Behavior tested on target OS versions and common desktop environments.

If you want, I can generate icon size exports from an SVG or produce a tailored code sample for a specific framework (Electron, Qt, .NET, Java).