Favicon and OG Image Guide: ICO, PNG, and Social Preview Sizes That Work

Favicon and OG Image Guide: ICO, PNG, and Social Preview Sizes That Work

Favicons and social previews are tiny but high-stakes: they decide whether tabs look credible and whether shared links earn clicks. Most failures come from wrong sizes, missing ICO fallbacks, or Open Graph art with text outside the safe zone.

What Are Favicons and OG Images?

• Favicon: the small icon in tabs, bookmarks, and history. ICO remains the most compatible container, PNG covers modern contexts.
• App icons: larger PNGs for home screens and shortcuts, including 180 x 180 Apple touch icons and 192 x 192 plus 512 x 512 PWA icons.
• OG image: the preview card for link shares, standardized at 1200 x 630 with 1.91:1 ratio.

Get these three right and your brand looks sharp from tab to timeline.

Why Small Sizes Cause Big Problems

• Missing ICO fallback leaves blank or broken tab icons in some contexts
• Single 16 x 16 favicons look blurry on high-density screens
• OG images with edge text get cropped in feed cards
• Oversized OG files slow link previews and scrapers
• Text-heavy previews saved as low-quality JPG turn fuzzy exactly where credibility matters

A privacy-focused and performant export routine avoids all of it, with secure processing where no data leaves your device.

How to Build a Complete Favicon Set

1. Start from a large square master

Design at 1024 x 1024 or larger with a simple mark that reads at 16 px. Avoid fine text and thin strokes.

2. Export the core set

Convert with PNG to ICO for the ICO fallback and JPG to PNG when starting from JPG masters. Set exact pixels in the image resizer.

3. Wire the HTML basics

Include ICO fallback plus PNG variants and a web manifest reference. Test in a private window after deploy since favicons cache aggressively.

How to Build OG Images That Render

The standard

• 1200 x 630 px, 1.91:1 ratio, JPG or PNG
• Keep under 300 KB where possible, always under 1 MB
• Center title and brand inside a safe zone roughly 1000 x 540
• Use large type: titles readable at 300 px wide previews

Export steps

1. Design at exactly 1200 x 630 in the image resizer
2. Photos backgrounds: JPG at quality 80-85. Text-forward cards: PNG.
3. Compress with the image compressor and verify text edges at small preview sizes
4. For web delivery variants, convert with JPG to WebP or PNG to WebP
5. Validate with each platform's card debugger and fix caching with a versioned filename

Brand protection

Add a small logo lockup rather than a full-width watermark on OG art. For downloadable brand assets, use logo watermark variants. Strip internal metadata from public art with the JPG metadata remover and confirm with view metadata.

Best Practices

• Keep favicon marks brutally simple: one shape, one or two colors
• Test favicons on light and dark tabs plus mobile bookmarks
• Keep OG titles under 6-8 words for feed readability
• Maintain one OG template so new posts ship consistent previews
• Version OG filenames when updating art to defeat scraper caches
• Document sizes in the social image sizes cheat sheet for the wider team

Platform-Specific Notes

X, Facebook, and LinkedIn

All three prefer 1200 x 630. LinkedIn crops aggressively on mobile, so keep critical text centered. See best image formats for Twitter, best image formats for Facebook, best image formats for LinkedIn.

Messaging apps

Slack, Teams, and chat apps use similar cards but smaller crops. See optimizing images for Slack, Teams, and email.

YouTube and profiles

Channel art follows different ratios. See best image formats for YouTube and TikTok image sizes 2026.

Common Mistakes to Avoid

• Shipping only SVG favicons with no ICO or PNG fallback
• Reusing a detailed logo that collapses into mush at 16 px
• Putting headlines at OG edges where feeds crop them
• Uploading 3 MB OG images that delay previews
• Forgetting cache: updating the file but testing the old cached card

Conclusion

Credible tab-to-timeline branding needs three artifacts: a multi-size ICO plus PNG favicon set, PWA icons at 192 and 512 px, and a centered 1200 x 630 OG image under 300 KB. Build them once from a strong master, then reuse the template.

Start from your logo today: resize in the image resizer, create the ICO in the image converter, and trim previews in the image compressor.

Related Guides

• Social Image Sizes 2026: One Cheat Sheet
• Best Image Formats for Websites
• How to Fix Slow Loading Email Signatures