Open Graph Image vs Favicon: The Difference
A favicon is the small square icon a browser shows in a tab or bookmark, typically 16 to 48 pixels. An Open Graph image is the large rectangular preview (about 1200x630) that appears when your link is shared on social media or in chat. They're separate files declared differently, and one can't stand in for the other.
Two icons, two jobs
The favicon identifies your site inside the browser: a tiny square in the tab, the bookmark, the history list. The Open Graph image sells your link in a feed: a large landscape banner in a tweet, a Slack unfurl, an iMessage preview.
Because they differ in size, shape, and where they appear, they're declared separately: rel="icon" for the favicon, an og:image meta tag for the preview. Neither substitutes for the other.
Side by side
| Aspect | Favicon | OG image |
|---|---|---|
| Size | 16–48px | ~1200x630 |
| Shape | Square | Landscape |
| Declared with | rel="icon" | og:image meta |
| Shown in | Tab, bookmark | Social + chat previews |
OG image vs favicon FAQ
Is the favicon used for social previews?
No. Social and chat previews use the Open Graph image from an og:image meta tag. The favicon only appears inside the browser.
Can I use my favicon as the OG image?
Not usefully. It's the wrong size and shape. A 32px square scaled to a 1200x630 slot looks broken. They're separate assets.
Which one shows in a browser tab?
The favicon. The Open Graph image never appears in a tab; it only shows when the link is shared somewhere that renders a preview.