About

Placing a logo or symbol inside an icon frame requires precise arithmetic. A 1-pixel offset at 16×16 is a 6.25% positional error - visible on every browser tab. This tool computes the exact scale factor s = min(W − 2pw, H − 2ph) to fit your image within the target canvas while preserving aspect ratio, then derives pixel-perfect center offsets. It handles transparent backgrounds, solid colors, linear gradients, configurable border-radius via arcTo clipping, and drop shadows. All rendering happens on an HTML Canvas element in your browser. No image data leaves your machine.

The tool covers standard platform requirements: favicons at 16, 32, 48px, Apple Touch at 180px, Android adaptive at 512px, Open Graph at 1200×630px. Mismatched icon sizes cause blurry rendering on high-DPI screens or rejection by app store validators. Pro tip: Apple requires no transparency and no rounded corners in submitted assets - the OS applies its own mask.

Formulas

The core centering algorithm computes a uniform scale factor that fits the source image into the padded canvas area without distortion:

s = min(W − 2pw, H − 2ph)

Center offsets position the scaled image exactly in the middle:

o_x = W − w ⋅ s2

o_y = H − h ⋅ s2

Where W, H = canvas width and height in pixels. w, h = source image natural width and height. p = padding in pixels (derived from percentage: p = P_% ⋅ min(W, H) ÷ 100). s = uniform scale factor. o_x, o_y = drawing offset from top-left corner.

Border radius clipping uses a rounded rectangle path. The effective radius is clamped: r = min(R_% ⋅ min(W, H) ÷ 200, min(W, H) ÷ 2). At R_% = 100, the shape becomes a circle (when W = H).

Reference Data

Platform / Context	Size (px)	Format	Transparency	Notes
Favicon (classic)	16×16	ICO / PNG	Yes	Browser tab. ICO supports multi-size.
Favicon (modern)	32×32	PNG	Yes	High-DPI tabs and bookmarks.
Favicon (large)	48×48	PNG	Yes	Windows taskbar shortcut.
Apple Touch Icon	180×180	PNG	No	iOS home screen. No transparency allowed.
Android Chrome	192×192	PNG	Yes	manifest.json icon.
Android Adaptive	512×512	PNG	Yes	Play Store listing, splash screens.
Microsoft Tile (small)	70×70	PNG	Yes	Windows Start menu small tile.
Microsoft Tile (medium)	150×150	PNG	Yes	Windows Start menu medium tile.
Microsoft Tile (large)	310×310	PNG	Yes	Windows Start menu large tile.
Open Graph / Twitter	1200×630	PNG / JPEG	No	Social media share preview.
Slack App Icon	512×512	PNG	Yes	Workspace app directory.
Discord Bot Avatar	256×256	PNG / JPEG	Yes	Minimum 128px recommended.
macOS App Icon	1024×1024	PNG	Yes	Xcode iconset master size.
watchOS Icon	1024×1024	PNG	No	Circular mask applied by OS.
PWA Splash (portrait)	640×1136	PNG	No	iPhone SE splash screen.
YouTube Channel	800×800	PNG / JPEG	No	Rendered as circle at 98px.
Instagram Profile	320×320	JPEG	No	Circular crop. Minimum 110px.
Twitch Emote (large)	112×112	PNG	Yes	Must also provide 28 and 56px.
Electron / Desktop App	256×256	PNG / ICO	Yes	Tray icon. Use 16px for tray.
Custom (square)	Any × Any	PNG / JPEG / WebP	Optional	User-defined dimensions.

Frequently Asked Questions

High-DPI screens render CSS pixels at 2× or 3× physical resolution. A favicon declared as 32×32 CSS pixels needs a 64×64 or 96×96 source PNG to appear sharp. Export at the largest target size and let the browser or OS downscale. This tool renders at exact pixel dimensions on the canvas, so a 512×512 export contains 512×512 actual pixels with no upscaling artifacts.

Padding is computed as a fraction of the shorter canvas dimension: p = P_% ⋅ min(W, H) ÷ 100. For a 512×512 canvas with 10% padding, each side gets 51.2px of inset, leaving a 409.6px drawing area.

The algorithm uses the minimum of horizontal and vertical scale factors. This guarantees the entire image fits inside the padded region without cropping. The remaining space on the shorter axis is split equally on both sides, producing centered letterboxing filled by the chosen background.

Border-radius applies a clip path to the entire canvas before any drawing occurs. Both the background fill and the image are clipped. This matches how iOS and Android apply icon masks. At 100% radius on a square canvas, the output is a perfect circle.

PNG preserves transparency and is lossless. Use it for favicons, app icons, and any asset requiring an alpha channel. JPEG discards transparency (fills with white) and uses lossy compression - suitable for social media previews where file size matters. WebP offers both transparency and superior compression ratios but lacks support in older Safari versions before 14.

Yes. Select a batch preset (e.g., 'Favicon Set') which queues sizes 16, 32, 48, 180, 192, and 512. The tool renders each size sequentially on the same canvas configuration and triggers individual downloads. For ICO format bundling, you would need an external tool - this generator outputs standard raster images.