Bottom-line: I treat favicons and OG images as separate jobs from one brand master. Favicons cover tabs plus installs from 16 to 512 while OG images cover share cards at 1200 by 630. Build icons in the free favicon generator and cards for feeds, then verify tabs plus validators plus installs.
Teams mix these two assets constantly. I audited a launch where OG tags pointed at a 32 pixel icon and every share showed a blurry postage stamp. Another site used a 1200 pixel card as favicon and tabs loaded half a megabyte for a 16 pixel job. Separate exports from one master fixed both launches in a single deploy.
Size and purpose split between icons and cards
Favicons serve browser chrome plus OS surfaces at tiny sizes with icon link tags. OG images serve feed algorithms plus human scrollers at large sizes with meta tags. One file cannot serve both masters well.
| Asset shipped | Size range | Tag block | Shows where |
|---|---|---|---|
| Favicon ICO SVG PNG | 16 to 512 | Icon link tags | Tabs plus installs |
| Apple touch PNG | 180 plus fallbacks | Apple touch tag | iOS home screens |
| OG image JPG PNG | 1200 by 630 | og image plus twitter card | Feed share cards |
| Square feed art | 1080 square | Inline content | In feed posts |
- Icons for chrome at 16 to 512 with versioned paths.
- Cards for feeds at 1200 by 630 absolute HTTPS.
Tag blocks that must stay separate
Icon link tags with sizes control tabs plus installs while og image plus twitter card tags control share previews. Keep icon tags and OG tags in separate reviewed blocks with absolute URLs.
| Block | Tags inside | Points at | Breaks when |
|---|---|---|---|
| Icon block | icon plus apple touch plus manifest | 16 to 512 files | Mixed with OG paths |
| OG block | og image plus twitter card | 1200 by 630 file | Relative URL used |
Cache behavior per surface
Tabs cache aggressively for days while feed cards cache per scrape with validators. Version icon paths with v2 query and bust card cache with rescrape plus versioned filenames. Purge CDN once for all paths.
Consistency routine across both assets
Export icons once from a 512 master plus cards once from a 2400 master with matching palette plus versioned names. Test tabs plus validators plus installs in one pass after every brand change.
Next steps to parent L1 plus meta tags plus compress
Return to the parent L1 favicon generator guide for the full matrix, confirm cards in the meta tags guide at 1200 by 630 absolute HTTPS, and keep art lean with the compress images quality guide.
Generate both assets from one master artwork file to keep brand marks consistent. I export the 512-pixel master first, derive tab icons downward with pixel-snapped redraws at 32 and 16, then crop the 1200 by 630 share card from the same composition. Single-source art prevents the slow drift where tab and share images stop matching, and the image converter handles format hops between steps.
Know exactly where each asset surfaces so missing files get noticed fast. Tab icons appear in tabs, bookmarks bars, history lists and mobile home-screen shortcuts, while share cards render in link unfurls across social apps and messengers. A missing tab icon shows as a blank document glyph, but a missing share card silently degrades to a gray link box with no image at all.
Validate with platform debuggers after every publish, not just on launch day. Social crawlers cache share images aggressively, so version the OG filename and re-scrape through each network validator whenever art changes. Tab icons cache hard too, and a query-string version on the icon link forces refetch without renaming files.