Favicon Not Showing in Safari? Fix It Fast

You open your site in Safari, glance at the tab, and see a generic globe or a blank square instead of your logo. If this sounds familiar, you're dealing with a favicon not showing in Safari — a common issue with a few likely culprits. The good news: most fixes take less than a minute.

Quick fix: force Safari to re-fetch the icon

Safari caches favicons aggressively. Before changing any code, try these steps in order:

1. Clear Safari's favicon cache by emptying the cache (Safari > Settings > Privacy > Manage Website Data, then remove your site). On iOS, go to Settings > Safari > Clear History and Website Data.
2. Hard reload the page with Cmd+Option+R (Mac) or by closing and reopening the tab.
3. Check the favicon URL directly in a new tab — e.g., https://yoursite.com/favicon.ico. If it 404s, the file path is wrong.

If the icon still doesn't appear, move on to the root causes below.

Root causes of favicon not showing in Safari

1. Missing or incorrect <link> tag

Safari follows the HTML spec for icon links, but it's stricter than some browsers. Ensure your <link rel='icon'> tag is in the <head> and points to an existing file. The WHATWG spec defines rel='icon' as the standard way to associate an icon with a page.

<link rel='icon' type='image/png' href='/favicon-32x32.png' sizes='32x32'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

Note: Safari on macOS may also request /favicon.ico from the root even if you specify a PNG. Keep a valid favicon.ico in your root directory as a fallback.

2. Unsupported format or corrupt file

Safari supports ICO, PNG, and SVG (since Safari 12). However, SVG must be well-formed XML — a single unclosed tag will cause Safari to ignore it. If you're using an SVG, validate it with an XML parser. For broader compatibility, stick to PNG or ICO.

3. Caching at the server or CDN level

If you recently updated the favicon, Safari might be serving a stale copy from its cache or your CDN. Add a version query string to the URL (e.g., favicon.png?v=2) to bust the cache. For a deeper dive, see our guide on clearing favicon cache in Safari.

4. iOS home screen icon missing

On iPhone and iPad, the home screen icon comes from apple-touch-icon, not the regular favicon. If that's missing, iOS shows a screenshot or a gray square. Ensure you have a 180×180 PNG linked with rel='apple-touch-icon'.

Prevention tips

• Always include a favicon.ico in your root directory.
• Use absolute paths for icons to avoid routing issues.
• Test in Safari after clearing cache — don't assume it will update automatically.
• For a complete setup, follow our iOS Safari favicon guide.

Most Safari favicon problems come down to caching, a wrong path, or an invalid file. Work through the quick fix first, then verify your HTML and file formats. With a clean setup, your icon will show up reliably in tabs, bookmarks, and favorites.