About

Icon design demands precision in visual hierarchy. A poorly contrasted icon becomes invisible at 16×16 pixels, while excessive detail creates visual noise at any scale. This tool generates bold, high-contrast icons using calculated luminance ratios conforming to WCAG 2.1 guidelines. The contrast ratio CR between foreground and background must exceed 4.5:1 for accessibility compliance - a threshold this generator enforces automatically.

Export formats matter for deployment context. PNG provides pixel-perfect rendering for web favicons and app stores requiring raster assets. SVG output preserves vector precision for infinite scaling without interpolation artifacts. Both formats embed the complete visual specification, eliminating rendering inconsistencies across platforms.

Formulas

Accessibility compliance requires calculating relative luminance and contrast ratios between foreground text and background color.

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Where R, G, B are linearized sRGB values (0 to 1). The contrast ratio CR between two luminance values follows:

CR = L₁ + 0.05L₂ + 0.05

Where L₁ is the lighter color luminance and L₂ is the darker. WCAG AA requires CR ≥ 4.5 for normal text. For icon sizing, the display scale factor S determines canvas resolution:

S = max(1, window.devicePixelRatio)

Canvas dimensions multiply by S while CSS dimensions remain constant, ensuring crisp rendering on high-DPI displays.

Reference Data

Platform	Icon Size	Format	Corner Radius	Safe Zone
iOS App Store	1024×1024 px	PNG	22.37%	10% margin
Android Play Store	512×512 px	PNG	20%	15% margin
Favicon (Standard)	32×32 px	PNG/ICO	0%	None
Favicon (Retina)	180×180 px	PNG	0%	None
macOS App Icon	1024×1024 px	PNG	18.75%	5% margin
Windows Tile (Large)	310×310 px	PNG	0%	20% margin
Twitter Profile	400×400 px	PNG/JPG	50% (circle)	Center-weighted
Discord Server Icon	512×512 px	PNG	50% (circle)	10% margin
Slack Workspace	512×512 px	PNG	20%	10% margin
PWA (Manifest)	512×512 px	PNG	Variable	Maskable zone
YouTube Channel	800×800 px	PNG/JPG	50% (circle)	Center 70%
Instagram Profile	320×320 px	PNG/JPG	50% (circle)	Center-weighted
LinkedIn Company	300×300 px	PNG	0%	10% margin
Chrome Extension	128×128 px	PNG	0%	None
Electron App (Tray)	16×16 px	PNG	0%	High contrast required

Frequently Asked Questions

Apple requires exactly 1024×1024 pixels in PNG format with no transparency. The system automatically applies the iOS superellipse mask (22.37% continuous corner radius). Keep critical elements within 80% of the canvas center to avoid clipping.

WCAG 2.1 mandates a minimum contrast ratio of 4.5:1 between text and background for accessibility compliance. At small sizes (16×16px favicons), ratios below 7:1 cause legibility degradation. The tool calculates luminance using the formula L = 0.2126R + 0.7152G + 0.0722B and displays real-time contrast warnings.

Standard 1x exports render at CSS pixel density. Enable the 2x or 3x multiplier option to generate assets at 2048×2048 or 3072×3072 physical pixels respectively. These scale down sharply when displayed at 1024×1024 CSS pixels on high-DPI screens.

Gradients work for most platforms but introduce complexity. iOS flattens gradients under certain lighting conditions in their parallax effect. Android adaptive icons may clip gradient edges. For maximum compatibility, use solid colors or subtle gradients with stops no more than 30% apart in luminance.

Font weights between 700-900 maintain stroke visibility at 32px and below. Weights above 900 (Black/Ultra) can cause stroke merging in characters like "B", "R", "S" at favicon scale. Test exports at actual deployment size before finalizing.

PWA maskable icons require critical content within the center 80% (safe zone). Set corner radius to 0% and ensure your character/design doesn't extend beyond 80% of canvas width. The outer 10% on each edge may be cropped by various platform masks.