Why is my own uploaded Favicon not displaying on my Webflow site?

Published on
September 22, 2023

Reasons why your own uploaded Favicon is not displaying on your Webflow site:

  1. Incorrect file format:

    One possible reason is that you have uploaded a favicon in an incorrect file format. Webflow requires the favicon to be in either .ico or .png format. Ensure that your favicon is saved in one of these formats.

  2. Incorrect file size:

    Another reason could be that the file size of your favicon exceeds the limit set by Webflow. For .ico files, the maximum file size is usually 32x32 pixels and 1 MB. For .png files, the recommended size is 16x16 pixels. It's important to resize and compress your favicon accordingly to ensure it meets these requirements.

  3. Incorrect file name or location:

    If your favicon is not displaying, double-check that it has been properly named and placed in the root folder of your Webflow project. The file should be named "favicon.ico" or "favicon.png" and placed at the root level of your project (the same folder where your index.html file resides).

  4. Cache issues:

    Sometimes, even if you've correctly uploaded your favicon, your browser may still display the old favicon due to caching. To resolve this, try clearing your browser cache and refreshing the page. You can also try opening your site in an incognito or private browsing window to see if the updated favicon appears.

  5. Favicon not linked in the HTML code:

    Ensure that you have properly linked your favicon in the HTML code of your Webflow project. Open your project in the Designer, go to the Project Settings, and make sure the Favicon field is filled with the correct file name (e.g., "favicon.ico" or "favicon.png").

  6. Browser compatibility:

    Note that some older or less popular browsers may not support the use of favicons. If you've covered all the steps mentioned above and your favicon still doesn't display, test your site in different browsers to determine if it's a browser compatibility issue.

Remember, once you have made any changes to your favicon, you may need to republish your website for the changes to take effect.

Additional Questions:

  1. How do I create a favicon in Webflow?
  2. Can I use an animated favicon in Webflow?
  3. What is the ideal favicon size for high-resolution displays?