Do you have any tips for getting a custom favicon to display on Safari in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Tips for getting a custom favicon to display on Safari in Webflow

Customizing the favicon (an icon that represents a website) is an important aspect of branding and enhancing the user experience. While Webflow makes it easy to set a custom favicon for your website, there are sometimes issues with getting it to display correctly in Safari. Here are some tips to ensure that your custom favicon appears as intended in Safari:

Choose the right file format: Safari requires the favicon to be in the .ico format. While other browsers like Chrome and Firefox can use other formats like .png or .svg, Safari is more particular. You can convert your favicon to the .ico format using online tools or graphic design software.
Resize your favicon: Favicon sizes can vary depending on the device and browser. However, for Safari, it is recommended to create a favicon that is 32x32 pixels or 16x16 pixels in size. This ensures the best compatibility across different versions of Safari.
Upload the favicon in Webflow: To upload your custom favicon in Webflow, follow these steps:

Go to the Project Settings in your Webflow dashboard.
Click on the Custom Code tab.
Scroll down to the "Favicon Code" section.
Replace the existing code with the code for your custom favicon.
Save the changes.

Clear Safari cache: After making changes to your custom favicon, Safari may still display the old favicon due to cache issues. To clear the cache in Safari, go to Safari Preferences, click on the Privacy tab, and click on Manage Website Data. Search for your website and click on Remove to clear the cache.
Test on multiple devices: It's important to test your custom favicon across different devices and versions of Safari to ensure it displays correctly. Use real devices, simulators, or online browser testing tools to check how your favicon appears.

Remember, it may take some time for Safari to update its cached version of your website, so don't be alarmed if you don't see the changes immediately. Following these tips should help you get your custom favicon to display correctly in Safari.

Additional Questions:

How can I create a favicon in the .ico format?
What are the recommended sizes for a favicon in other popular browsers?
Why is it important to have a custom favicon for my website?

What could be the reason behind the links disappearing and being unclickable when hovering over the dropdown list in the navbar created with Webflow?

Why does the Webflow's Responsive Image option require a keyboard shortcut to trigger it and why is it hidden?

Are there any specific steps I should be taking in the Webflow navigator tab to successfully move a section to a different section of my site without it nesting into something else?

How can I list only the items that belong to a specific subcategory in Webflow?

Where can I locate an animation in Webflow if it is not showing up in the style tab or element settings?

How can I recreate a sub-template with three steps and graphics on alternating sides in Webflow?

Is there a way to fix the issue of button overlap on small screens and extra space on large screens while creating a mobile landing page in Webflow?

Does anyone have or could send me some embed code for a comment section in Webflow that doesn't require a monthly payment?

How can I unlink the hero image on different pages in my Webflow template?

Can Webflow hide special characters like ñ or ó?