Why is my favicon not showing up in Webflow, even though I re-uploaded it and it displays correctly in project settings?
TL;DR
- Clear browser cache, perform a hard refresh, and test in incognito or different browsers.
- Ensure favicon is in supported format (ICO, PNG, SVG), saved in Project Settings, and the site is republished.
- Check live page source for correct favicon link and remove any conflicting custom code.
If your favicon is not showing up in Webflow, even though it displays correctly in the Project Settings, it's likely due to caching issues, incorrect favicon formats, or browser/device quirks.
1. Clear Cache and Hard Reload
- Browsers aggressively cache favicons. Clear your browser cache and perform a hard refresh (e.g., Cmd+Shift+R on Mac or Ctrl+F5 on Windows).
- Try viewing the site in an incognito (private) window or a different browser to test if the issue is cache-related.
2. Confirm the Favicon is Published
- After uploading a favicon in Project Settings > General, ensure you click Save Changes.
- Then, go to the Designer or Editor and publish the site again to your selected domain(s). Webflow does not auto-publish favicon changes.
3. Use Proper Favicon Format
- Webflow only supports .ICO, .PNG or .SVG files for favicons.
- For best compatibility, use a 32×32 pixel PNG file.
- Avoid using large or unusual image formats that may not be recognized across all browsers.
4. Confirm It's Applied in Live Metadata
- Visit your site and view the page source (right-click > View Page Source).
- Look for a
<link rel="icon" ...>tag pointing to your favicon. - If the tag isn’t there or points to an outdated file name, try re-uploading a new version with a different file name and republishing.
5. Check for Conflicting Custom Code
- If you've added any custom code in Webflow that includes a conflicting favicon or
<link rel="icon">tag, it could override Webflow’s settings. - Go to Page Settings or Site Settings > Custom Code and remove or update any conflicting tags.
6. Favicon May Not Show on Mobile or Home Screen
- Some mobile browsers or iOS home screens use Web App icons instead of favicons.
- You may also want to upload the Webclip image in Webflow Project Settings for better mobile support.
Summary
To fix a missing favicon in Webflow: clear your cache, ensure the file format is supported, republish your site after saving changes, and verify the favicon is correctly linked in the page source. Also check for any conflicting custom code or browser issues that may prevent it from displaying.