Favicon vs Open Graph Image - What You Need

A favicon is a small square icon for browser tabs, bookmarks, and home screen shortcuts. An Open Graph image (og:image) is a large landscape image for link previews on Slack, LinkedIn, Facebook, and iMessage. They are different files, different HTML tags, and different test tools. You need both for a complete brand presence.

This guide compares favicon vs OG image side by side, explains what breaks when you confuse them, and shows how to audit each on opengraph-check.com.

Quick comparison

Same logo, different crops and exports. Do not reuse one file for both roles.

What a favicon does

Browsers request favicons early when loading a page. Users see them in:

• Tab bar (16×16 or 32×32 rendered)
• Bookmark lists and history
• iOS home screen (180×180 apple-touch-icon)
• Android PWA shortcut (192×192, 512×512 from manifest)
• Browser UI chrome (password managers, reading lists)

Tags live in the document head:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Legacy clients still fetch /favicon.ico without reading HTML.

Favicon setup details: Favicon Sizes Guide and How to Add a Favicon (HTML).

What an Open Graph image does

When someone pastes your URL into Slack or LinkedIn, the platform crawler reads Open Graph meta tags. og:image is the hero image in the preview card.

<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Typical specs:

• 1200×630 px (1.91:1 aspect ratio) works across most platforms
• JPG or PNG under platform size limits
• Absolute HTTPS URL (relative URLs fail on many crawlers)

Full tag reference: Open Graph Tags Explained.

OG images do not appear in browser tabs. Favicons do not appear in Slack link cards. Platforms ignore cross-purpose tags.

Why teams confuse them

Both assets represent your brand. CMS dashboards (WordPress Site Icon vs Yoast social image) sit near each other. Design exports one square logo and developers reuse it everywhere.

Problems when you mix them up:

Square favicon as og:image

A 512×512 logo pasted into og:image renders as a small square with empty margins or aggressive crop on LinkedIn. Looks unprofessional in share previews.

OG landscape image as favicon

A 1200×630 banner shrunk to 16×16 becomes an illegible smear in tabs. Browsers pick the center crop. Text disappears.

Only setting one

Perfect tab icon, blank social preview. Or beautiful Slack cards, generic globe in bookmarks because /favicon.ico is missing.

Same URL in both tags

Technically possible with a square 1200×1200 OG image used as favicon. Tabs still look wrong because downsampling kills detail. Use purpose-built files.

What to ship (minimum viable set)

Favicon bundle

• favicon.ico at domain root
• PNG 16×16 and 32×32
• apple-touch-icon 180×180
• Manifest icons 192×192 and 512×512 if PWA

Scan with Favicon Check.

Open Graph bundle

• og:image at 1200×630
• og:title, og:description, og:url
• Twitter Card tags if you care about X previews

Scan with Open Graph Check.

Run both scans on the same production URL before marketing launches. See How to Test Favicons Before Launch and How to Test Open Graph Tags.

Design workflow: one brand, two exports

Start from brand guidelines, split outputs:

1. Square master at 512×512 or larger for favicon derivatives
2. Landscape template at 1200×630 with logo, headline safe zone, and background

Design tools often export both from one Figma frame set. Keep layer names clear (favicon-32, og-default) so build scripts do not swap files.

Favicon legibility rules differ from OG composition:

• Favicon: bold simple mark, no small text, high contrast at 16 px
• OG image: headline readable at card thumbnail size, brand bar, optional photo

Framework notes

Next.js

metadata.icons for favicons. metadata.openGraph.images for OG. Same layout.tsx, different keys. Guide: Favicon in Next.js.

WordPress

Site Icon for favicon. Yoast or Rank Math for OG image per page. Guide: Favicon in WordPress.

React SPA

Favicon in static index.html. OG tags often broken if client-only. Prerender or SSR for reliable shares. Favicon guide: Favicon in Vite/React.

Debugging checklist

Tab shows wrong or missing icon:

1. Favicon Check on production
2. Confirm /favicon.ico and PNG tags
3. See Favicon Not Showing

Shared link shows wrong or missing image:

1. Open Graph Check on production URL
2. View Source for og:image (not JS-injected)
3. See How to Fix Missing OG Image

Both broken after deploy:

Cache purge, confirm HTTPS, check staging URLs in meta tags. Different root causes, fix in parallel.

SEO and discovery angle

Google may show favicons in search results (small icon beside title). OG images affect click-through on social, not traditional blue-link favicon display.

Sitemap and structured data do not replace either asset. They solve visibility in different channels:

• Favicon: browser chrome, bookmarks, some SERP features
• OG image: social and messaging previews

Audit both with opengraph-check.com

opengraph-check.com hosts two focused tools on purpose:

Using one tool for the other job leaves gaps. A passing OG scan does not mean favicons work. A passing favicon scan does not mean Slack previews show your banner.

Developer checklist covering both: Favicon Audit Checklist.

Per-page vs site-wide assets

Some sites use one favicon globally but different og:image values per blog post or product page.

WordPress SEO plugins handle per-page OG images automatically. Site Icon remains global. Next.js App Router can set default OG in layout and override in generateMetadata per route.

When auditing:

• Favicon scan on homepage may be enough if tags are identical site-wide
• OG scan should run on representative URLs (homepage, blog post, product)

Do not copy a page-specific OG image URL into favicon tags. The dimensions will be wrong.

Platform-specific OG behavior (favicon unchanged)

Platforms read og:image differently. Favicon behavior in Chrome tabs stays constant regardless of Slack or LinkedIn settings.

• LinkedIn crops tall images aggressively
• Slack caches OG images heavily
• iMessage prefers absolute HTTPS URLs
• Discord uses OG tags, ignores favicon for embeds

Favicon testing does not replace platform-specific OG debugging. Use Open Graph Check first, then platform debuggers if needed.

Brand consistency without file reuse

Your square favicon mark can appear inside the OG banner without using the same file:

• Favicon file: 32×32 PNG with icon only
• OG file: 1200×630 with icon plus headline plus background

Export both from one design system, not one resized file. Designers appreciate a shared color token file even when outputs differ.

For technical tag details beyond images, see Open Graph Tags Explained. That guide covers og:title, og:url, and Twitter Card companions that work alongside, not instead of, your favicon bundle.

FAQ

Is favicon the same as og:image?

No. Favicon uses link rel="icon" for small square browser icons. OG image uses meta property="og:image" for large social preview images.

Can I use one image for favicon and Open Graph?

Not recommended. Square favicons and 1200×630 OG images need different dimensions and composition. Reusing one file produces blurry tabs or awkward share cards.

Which matters more, favicon or OG image?

Both matter for different channels. Favicon affects every site visit in a browser tab. OG image affects every link share on social platforms. Prioritize both before public launch.

Does Facebook use favicon or og:image?

Facebook link previews use Open Graph tags, especially og:image. Favicons are not used in Facebook share cards.

Do I need og:image if I have a favicon?

Yes, if you care about link previews when URLs are shared. Favicon does not populate social cards.

What size is favicon vs OG image?

Favicons: 16×16, 32×32, 180×180, up to 512×512 square. OG image: typically 1200×630 landscape.

How do I test favicon vs OG image?

Favicon Check for icons. Open Graph Check for OG tags. Same URL, two scans.

Where do I learn all Open Graph tags?

See Open Graph Tags Explained for the full tag list beyond og:image.

Conclusion

Favicon and Open Graph image serve different surfaces. Ship square multi-size favicons for browsers and mobile shortcuts. Ship a 1200×630 OG image for social link previews. Test each with the right tool: Favicon Check and Open Graph Check.

For tag fundamentals beyond images, read Open Graph Tags Explained. For launch QA, combine Favicon Audit Checklist with your OG testing workflow.