Reusable, correctly-sized BLANK CANVAS templates for common graphic assets (OG cards, banners, favicons, social posts). These are NOT website templates.
Copy the blank <name>_<WxH>.png (transparent, exact dimensions), design your
asset on it, export. Open the matching <name>_<WxH>_guides.png alongside to see
the safe-zone box, center cross-lines, and spec caption. Never design on the
_guides copy - it is reference only.
Guide overlay legend: magenta lines = center cross. Cyan rectangle = safe zone (keep text/logos/faces inside it). Caption = asset, dimensions, safe zone, notes.
Regenerate everything with: bash gen-templates.sh
| Asset | Platform | Dimensions (WxH) | Aspect | Safe zone | Notes | Source |
|---|---|---|---|---|---|---|
| Open Graph image | OG (FB/LinkedIn/Slack/Discord) | 1200x630 | 1.91:1 | 1080x600 center | Universal share card; keep text 60-80px from edges; <1MB ideal | https://www.krumzi.com/blog/open-graph-image-sizes-for-social-media-the-complete-2026-guide |
| Summary large image card | X / Twitter | 1200x628 | 1.91:1 | ~1200x600 center | min ratio 1.91:1; X also accepts 1200x675 | https://influencermarketinghub.com/twitter-image-size/ |
| In-stream image | X / Twitter | 1600x900 | 16:9 | ~1456x819 center | FLAG: X guides most often cite 1200x675 for in-stream; 1600x900 is the same 16:9 at higher res | https://www.tweetarchivist.com/twitter-image-size-guide |
| Profile header/banner | X / Twitter | 1500x500 | 3:1 | ~1380x380 center | avatar overlaps lower-left; keep text out of bottom-left | https://opentweet.io/tools/twitter-header-size |
| Favicon master | Web | 512x512 | 1:1 | mark inside ~80% | Derive: 16/32/48 (.ico), 180 (apple-touch), 192 & 512 (PWA manifest) | https://favicon.io/tutorials/favicon-sizes/ |
| Channel banner | YouTube | 2560x1440 | 16:9 | 1546x423 TV-safe center | safe box = visible on ALL devices; min upload 2048x1152; max 6MB | https://kreatli.com/guides/youtube-banner-resizer |
| Thumbnail | YouTube | 1280x720 | 16:9 | ~1180x620 | keep text clear of lower-right (duration stamp); min width 640 | https://snappa.com/blog/youtube-channel-art-size/ |
| Profile banner | Discord | 600x240 | 5:2 | ~540x200 | Nitro only; per-server variant = 680x240; top sits behind avatar+name | https://moda.app/resources/sizes/discord-banner |
| Server banner | Discord | 960x540 | 16:9 | ~880x480 | Boost Lvl 2; upload 1920x1080 for sharpness; name overlays top-left | https://www.krumzi.com/size-guide/discord-banner-size |
| Invite splash | Discord | 1920x1080 | 16:9 | ~1760x980 | Boost Lvl 1; heavy UI overlay left+bottom; keep focal point center | https://www.krumzi.com/size-guide/discord-banner-size |
| Page cover | 820x312 | ~2.63:1 | 640x312 center | Mobile shows 640x360 (sides cropped); safe zone = central 640x312 | https://snappa.com/blog/facebook-cover-photo-size/ | |
| Profile picture | 170x170 | 1:1 | n/a (circle crop) | Upload 800x800+; desktop displays 170, mobile 128; circular | https://www.socialez.com/blog/facebook-image-sizes/ | |
| Shared / OG link image | 1200x630 | 1.91:1 | 1080x600 center | same as OG; max 8MB | https://snappa.com/blog/facebook-cover-photo-size/ | |
| Personal background banner | 1584x396 | 4:1 | ~1404x320 | avatar overlaps lower-left; keep text out of bottom-left; max 8MB | https://postfa.st/sizes/linkedin/cover | |
| Company page cover | 1128x191 | ~5.9:1 | ~1008x150 | logo box overlaps lower-left; very short canvas | https://www.linkedin.com/help/linkedin/answer/a563309/image-specifications-for-your-linkedin-pages-and-career-pages | |
| Post image | 1200x627 | 1.91:1 | ~1080x540 | landscape; square 1080x1080 also valid | https://www.socialez.com/blog/linkedin-image-sizes/ | |
| Square post | 1080x1080 | 1:1 | ~980x980 | standard width is always 1080 | https://buffer.com/resources/instagram-image-size/ | |
| Portrait post | 1080x1350 | 4:5 | ~980x1250 | recommended feed default (most screen real estate) | https://buffer.com/resources/instagram-image-size/ | |
| Story / Reel | 1080x1920 | 9:16 | 1080x1330 center | avoid top 250px + bottom 340px (UI overlay) | https://buffer.com/resources/instagram-image-size/ | |
| Profile banner | Twitch | 1200x480 | 5:2 | ~1080x400 | FLAG: 2026 spec is 1200x480; older guides say 1920x480. Offline screen is separate (1920x1080) | https://www.streamscheme.com/twitch-image-sizes/ |
| Video | TikTok | 1080x1920 | 9:16 | ~1080x1420 | right + bottom carry UI (caption/buttons); keep content center | https://postfa.st/sizes/tiktok/video |
| Pin | 1000x1500 | 2:3 | ~920x1420 | vertical; best-performing ratio; max 20MB | https://postfa.st/sizes/pinterest/pin | |
| Header image | Email (HTML) | 600x200 | 3:1 | ~560x160 | 600px width = email industry standard; height 150-200px; keep <200KB | https://tabular.email/blog/email-template-size-width-and-height |
| Apple touch icon | iOS home screen | 180x180 (+120/152/167) | 1:1 | ~90% | OPAQUE, no alpha, no rounded corners (iOS masks). 120=@2x, 152=iPad, 167=iPad Pro | https://www.iconikai.com/blog/ios-app-icon-size-guidelines-guide |
| App Store icon | iOS App Store | 1024x1024 | 1:1 | full | Flat, opaque, no alpha/rounded corners; also the Xcode-15 layered source | https://www.iconikai.com/blog/app-icon-size-chart-2026 |
| Launch screen | iOS | 1170x2532 / 1284x2778 / 1290x2796 | ~9:19.5 | center logo | Representative iPhone @3x sizes (12-15 / Plus / Pro Max) | https://developer.apple.com/documentation/xcode/specifying-your-apps-launch-screen |
| Launcher icon | Android | 48/72/96/144/192 | 1:1 | ~80% | mdpi..xxxhdpi raster set; manifest 'any' uses 192 + 512 | https://www.tekeye.uk/android/android-icon-size |
| PWA icon | PWA manifest | 192 & 512 | 1:1 | inner 80% | manifest minimum pair; purpose:"any" (separate maskable file) | https://imagcon.app/pwa-icon-sizes |
| Adaptive icon | Android | 432x432 | 1:1 | 264px center CIRCLE | 108dp source @4px/dp; visible 72dp(288), safe 66dp(264); outer 18dp masked | https://web.dev/articles/maskable-icon |
| Maskable icon | PWA / Android | 512x512 | 1:1 | inner 410 box + 40%r circle | purpose:"maskable"; bg must be full-bleed; never combine "any maskable" | https://web.dev/articles/maskable-icon |
| Play Store icon | Google Play | 512x512 | 1:1 | ~90% | 32-bit PNG; Google applies own mask/shadow | https://median.co/blog/google-play-store-app-icon-design-best-practices-guidelines |
| Feature graphic | Google Play | 1024x500 | ~2:1 | ~880x380 | MANDATORY listing banner; 24-bit PNG/JPG, NO alpha | https://www.applaunchflow.com/blog/play-store-feature-graphic-size-guide |
| Tile (square) | Windows (legacy) | 70/150/310 + wide 310x150 | 1:1 / 2:1 | ~90% | mstile / browserconfig.xml; Win8.1/IE11 era, deprecated but still requested | https://realfavicongenerator.net/faq |
| Pinned-tab master | Safari | 512x512 | 1:1 | inner 80% | REAL asset is a MONOCHROME SVG; this PNG only drafts the silhouette | https://realfavicongenerator.net/faq |
| Podcast cover | Apple/Spotify/YT Music | 3000x3000 | 1:1 | ~90% | min 1400; Apple <512KB -> export JPEG 80-90%, no transparency | https://moda.app/resources/sizes/spotify-podcast-cover |
| Highlight cover | 1080x1080 | 1:1 | ~620px center CIRCLE | only the center circle shows in the highlight ring | https://buffer.com/resources/instagram-image-size/ | |
| Virtual background | Zoom / Teams | 1920x1080 | 16:9 | ~1740x940 | you cover center-frame; keep branding off-center | https://mediasizes.com/zoom-image-size/ |
| Offline / video banner | Twitch | 1920x1080 | 16:9 | ~1740x940 | shown when offline; DISTINCT from 1200x480 profile banner | https://snappa.com/blog/twitch-offline-banner-size/ |
This is the big section. Blank canvases for every size are included
(favicon_<N>x<N>.png, apple-touch-icon_<N>x<N>.png, android-launcher_<N>x<N>.png,
mstile_*, plus the maskable/adaptive/PWA/Play/App-Store icons). Tiny icons
(<=96px) ship as blank-only (no _guides copy - too small to be useful).
| File / size | Purpose |
|---|---|
| favicon_16x16 | Browser tab / bookmark (goes into favicon.ico) |
| favicon_32x32 | Tab high-DPI / taskbar (into favicon.ico) |
| favicon_48x48 | Windows site icon (into favicon.ico) |
| favicon_64x64, _96x96 | Extra raster sizes some platforms request |
| favicon_128x128, _256x256 | High-DPI tab / app contexts |
| favicon-master_512x512 | Master to derive everything below |
| apple-touch-icon_180x180 | iOS home screen (@3x) - primary |
| apple-touch-icon_120/152/167 | iPhone @2x, iPad, iPad Pro |
| ios-appstore-icon_1024x1024 | App Store + Xcode-15 layered source |
| ios-splash_1170x2532/1284x2778/1290x2796 | iPhone launch screens (representative) |
| android-launcher_48/72/96/144/192 | mdpi..xxxhdpi launcher raster |
| pwa-icon_512x512 | PWA manifest purpose:"any" |
| android-adaptive_432x432 | Adaptive icon source (264px safe circle) |
| maskable-icon_512x512 | PWA manifest purpose:"maskable" (80% safe) |
| play-store-icon_512x512 | Google Play listing icon |
| play-feature-graphic_1024x500 | Google Play feature banner (mandatory) |
| mstile_70/150/310 + mstile-wide_310x150 | Windows tiles (legacy) |
| safari-pinned-tab-master_512x512 | Draft only - real asset is a monochrome SVG |
magick favicon-master_512x512.png -resize 16x16 favicon-16.png
magick favicon-master_512x512.png -resize 32x32 favicon-32.png
magick favicon-master_512x512.png -resize 48x48 favicon-48.png
magick favicon-master_512x512.png -resize 64x64 favicon-64.png
magick favicon-master_512x512.png -resize 96x96 favicon-96.png
magick favicon-master_512x512.png -resize 180x180 apple-touch-icon.png
magick favicon-master_512x512.png -resize 192x192 icon-192.png
magick favicon-master_512x512.png -resize 512x512 icon-512.png
# multi-res favicon.ico (16/32/48 packed in one file):
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico
# apple-touch-icon MUST be opaque (no alpha) - flatten onto a bg:
magick apple-touch-icon.png -background white -alpha remove -alpha off apple-touch-icon.png
<!-- Favicons -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<!-- Apple -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<!-- PWA manifest (icons + maskable declared inside) -->
<link rel="manifest" href="/site.webmanifest">
<!-- Windows tiles (legacy) -->
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="/browserconfig.xml">
<meta name="theme-color" content="#ffffff">manifest.json icons block (note any and maskable are SEPARATE files):
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]The real Safari pinned-tab asset is a monochrome SVG (a single solid color,
Safari recolors it). We do NOT ship a fake colored SVG. Use
safari-pinned-tab-master_512x512.png only to draft the silhouette, then export
a 1-color SVG by hand (or via your icon tool).
Instagram profiles do not have a cover/banner image (unlike X, Facebook, LinkedIn, YouTube, Twitch). So there is intentionally no Instagram banner template here. The Instagram canvases provided are: square post, portrait post, story/reel, and highlight cover (1080x1080, only the center ~620px circle shows in the highlight ring).
- X in-stream image: prompt asked for ~1600x900; the figure X help/guides most commonly publish for in-stream is 1200x675 (same 16:9). 1600x900 is generated here as a higher-res equivalent. Flagged on the guide caption too.
- X summary_large_image: commonly stated as 1200x628 (1.91:1). Note that card validators have historically also accepted 800x418 minimum; 1200x628 is the current recommendation.
- Twitch profile banner: 2026 sources converge on 1200x480 (5:2). Older widely-circulated guides say 1920x480. The separate offline/video banner is 1920x1080 - do not confuse the two.
- Facebook cover: 820x312 desktop but mobile renders 640x360 and crops the sides, so the true cross-device safe zone is the central 640x312.
- Android adaptive icon: the source is a 432x432 (108dp) canvas but only the inner 72dp (288px) is ever visible and the true safe zone is just the central 66dp (264px) CIRCLE - the launcher can mask it to circle/squircle/rounded square/teardrop. The outer 18dp on every side WILL be cropped on some devices.
- Maskable vs "any" icons: you must ship SEPARATE files. Declaring
purpose: "any maskable"on one file forces the padded maskable art to be used as the standard icon, where it looks too small. Keep two files. - Apple icons must be opaque: no alpha channel, no manual rounded corners - iOS applies its own superellipse mask. A transparent apple-touch-icon renders with a black background on the home screen.
- Windows tiles are legacy: 70/150/310/310x150 mstile + browserconfig.xml are Windows 8.1 / IE11 era (unsupported since Jan 2023). Included because audits and generators still request them, but they are optional for new sites.
- Podcast cover file-size trap: 3000x3000 is the universal spec, but Apple caps the file at 512KB - a PNG at that resolution blows past it, so export JPEG at 80-90% quality.
102 PNGs total: 45 _guides.png reference overlays + 57 blank canvases (the 12
tiny app icons <=96px are blank-only). Covers ~57 distinct asset sizes across
social cards, banners, favicons, app icons (iOS/Android/PWA/Windows/Play), splash
screens, podcast, email, and virtual-background canvases. Plus this README and
gen-templates.sh. Regenerate everything with bash gen-templates.sh.