Safari shows a blank tab, a generic icon, or an outdated logo while Chrome on the same Mac displays your favicon correctly. Safari follows the same link rel="icon" standard as other browsers but caches favicons aggressively and handles pinned tabs and iOS home screen icons differently.
This guide covers Safari on macOS and iOS tab icons, plus common confusion with apple-touch-icon. Scan your URL with Favicon Check to verify what Safari's fetch would see.
Safari tab icon vs other Safari icons
Safari uses multiple icon types. Fixing one does not fix the others.
| Feature | Tag or mechanism | Affects |
|---|---|---|
| Tab favicon | rel="icon" | macOS tabs, iOS browser tabs |
| Pinned tab glyph | rel="mask-icon" + color | macOS pinned tabs only |
| Home screen tile | rel="apple-touch-icon" | iOS shortcut, not tab |
| Reading list | Uses tab favicon | macOS Safari |
A user saying "Safari favicon broken" might mean the tab, a pinned tab silhouette, or the iOS home screen. Clarify which before debugging.
How Safari loads tab favicons
Safari reads link rel="icon" from the initial HTML document, same as Chrome and Firefox:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Safari also requests /favicon.ico at the domain root when no tag exists.
Safari maintains a persistent favicon database on disk per user profile. Clearing normal cache does not always clear favicons. Quit Safari completely (Cmd+Q) after server-side fixes to force a refresh in stubborn cases.
Step 1: Verify tags in view-source
Safari Web Inspector Elements can show client-injected tags. Use Develop > Show Page Source or right-click View Page Source.
If rel="icon" is missing from source HTML, Safari may still attempt /favicon.ico but fail if that 404s.
SPA frameworks that inject favicons after hydration cause intermittent Safari tab icons. Put tags in server-rendered layout. Reference: How to Add a Favicon to Your Website.
Step 2: Test icon URLs in Safari
Open each declared icon URL directly in a Safari tab:
https://yourdomain.com/favicon-32x32.png
https://yourdomain.com/favicon.ico
Safari should display the image inline. Downloads or error pages mean Safari cannot use that file.
Run Favicon Check on the page URL. Compare listed icons to what Safari should load.
Step 3: Safari favicon cache on macOS
Safari caches favicons separately from website data in many versions.
Try:
- Private window (
Cmd+Shift+N) - fastest check - Different Mac user or fresh Safari profile
- Quit Safari fully and reopen
- Develop > Empty Caches (enable Develop menu in Safari Settings > Advanced)
- Safari > Settings > Privacy > Manage Website Data - remove data for your domain
If private window shows the correct icon, the server is fine. Your main profile needs cache expiry or manual clear.
For deploy updates, rename icon files rather than overwrite URLs. Details: Favicon Not Updating After Change?.
Step 4: Pinned tab mask-icon (macOS)
Pinned tabs in Safari show a monochrome silhouette, not your full-color favicon. They need:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">The SVG must be a single-color vector. Missing mask-icon does not remove the normal tab favicon, but pinned tabs look broken or generic.
This is a common report: "favicon works until I pin the tab." Add mask-icon separately.
Step 5: Safari on iOS (browser tabs)
Mobile Safari tabs use rel="icon", not apple-touch-icon.
If the tab icon fails on iPhone Safari:
- Check HTTPS and reachable PNG or ICO
- Test on cellular and WiFi
- Compare with desktop Safari on same URL
If the tab works but Add to Home Screen shows wrong or generic art, that is apple-touch-icon. Different fix: Wrong Favicon on Mobile Home Screen? and Apple Touch Icon Missing on iOS.
iOS Safari also caches aggressively. Users may need to close all tabs for the site and reopen.
Step 6: ICO, PNG, and SVG support in Safari
Safari supports ICO and PNG for tab favicons. SVG support for rel="icon" exists in recent Safari versions but PNG fallback remains safer:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/svg+xml" href="/favicon.svg">Wrong Content-Type headers can make Safari skip a file silently. Verify in curl or Network tab.
Recommended sizes: Favicon Sizes Guide.
Step 7: iCloud Tabs and cross-device sync
Safari syncs open tabs across Apple devices via iCloud. A stale favicon on one device does not mean the server is wrong. Test on a device that has not visited the site before, or use Private Browsing on each device separately.
macOS Sonoma and iOS version differences
Apple updates WebKit frequently. A favicon setup that worked on iOS 16 may need PNG fallback added when you drop ICO on iOS 17+ Safari tabs. When users report Safari-only issues after an OS update, retest with explicit PNG tags before changing server config.
Private Relay and iCloud Private Relay do not block same-origin favicon fetches. Third-party analytics domains in icon hrefs may behave differently under ITP but same-origin /favicon.ico is unaffected.
For local development, Safari treats localhost favicons more leniently than production HTTPS. Always validate on the deployed domain.
Reader mode and Safari tab groups
Safari Reader strips most page chrome but keeps the tab favicon in the tab bar. If favicon fails only in Reader, the underlying cause is still missing server tags, not Reader itself.
Tab groups sync favicons across grouped tabs via iCloud. A stale icon in one tab of a group can persist visually until all tabs in that group are closed. When debugging, close the entire tab group and reopen fresh.
Safari vs Chrome when only Safari fails
| Cause | Safari-specific note |
|---|---|
| Favicon cache | Harder to clear than Chrome |
| Missing mask-icon | Affects pinned tabs only |
| apple-touch-icon confusion | iOS home screen, not tab |
| Intelligent Tracking Prevention | Rarely blocks same-origin favicons |
| Local file testing | file:// URLs behave differently |
If Chrome works and Safari does not on the same URL after private window test, suspect Safari cache or pinned-tab mask-icon expectations.
Chrome-specific guide: Chrome Tab Icon Missing?.
General missing icon workflow: Favicon Not Showing in Browser?.
Common Safari favicon mistakes
Expecting home screen icon from rel="icon" only
iOS needs apple-touch-icon for tiles. Tab tag alone is insufficient.
White or low-contrast favicon invisible in light mode
Safari light tabs use light backgrounds. Pale icons disappear. Test on dark and light tab bar appearances.
Relative paths on nested pages
Same issue as other browsers. Use /favicon.ico root-relative paths.
Only clearing history, not website data
Safari may keep favicons when you clear history alone. Use Manage Website Data for the domain.
Blurry icon after upscaling
Safari scales small PNGs. Source art too small looks broken. See Favicon Looks Blurry?.
Step-by-step Safari fix workflow
- Identify symptom: tab, pinned tab, or iOS home screen.
- View-source. List all icon-related link tags.
- Open each href in Safari. Fix 404s and HTTP URLs.
- Add mask-icon if pinned tabs are the issue.
- Add apple-touch-icon if home screen is the issue.
- Deploy. Scan with Favicon Check.
- Test Safari Private Browsing on macOS and iOS.
- Quit Safari (
Cmd+Q) if normal window still stale. - Optional: Open Graph scanner for broader pre-launch audit.
FAQ
Why is my favicon not showing in Safari but works in Chrome?
Usually Safari favicon cache or missing tags in server HTML. Private window test separates cache from server issues.
How do I clear Safari favicon cache?
Private window, quit Safari completely, or remove website data for the domain under Privacy settings. Empty Caches in Develop menu helps page assets, not always favicons.
Does Safari need apple-touch-icon for tabs?
No. Tabs use rel="icon". apple-touch-icon is for iOS home screen shortcuts only.
Why does my pinned tab look wrong in Safari?
Pinned tabs need rel="mask-icon" with a single-color SVG. Normal favicon PNG does not apply to the pinned silhouette.
Safari on iPhone shows wrong icon on home screen
That is apple-touch-icon, not tab favicon. Add a 180×180 PNG and update the href. User may need to re-add shortcut.
Does Safari support SVG favicons?
Recent versions do for rel="icon". Keep PNG fallback for reliability and older iOS versions.
Favicon works on macOS Safari but not iOS Safari
Compare private windows on both. Check same URL including www vs non-www. iOS may cache longer; rename icon file to bust.
How do I verify icons without Safari cache?
Use Favicon Check on production URL, then confirm in Safari Private Browsing on a device that never visited the site.
Bottom line
Safari tab favicons use the same rel="icon" tags as other browsers but cache them persistently. Fix server HTML and paths first, add mask-icon for pinned tabs and apple-touch-icon for iOS home screen separately, then validate with Favicon Check and Private Browsing. Quit Safari when the server is correct but your profile still shows an old icon.
