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?

Is there a known bug with Webflow's IX2 off canvas animations that causes an ugly off canvas white space when scrolling left and right on touch screens?

What is the purpose of using a custom shape SVG to mask an image in Webflow?

What is the process for adding an "add to cart" button to a Collection List in Webflow?

What is causing the last section (Contact & Info) to shift to the left instead of staying centered on large displays in Webflow?

My question: Can you explain the issue I'm having with one of the horizontal scrolls on my Webflow portfolio website and why the image doesn't load properly?

How do I display featured posts from the videos-blog page on the main home page in Webflow?

How can I adjust the width of a Vimeo video in Webflow to scale proportionately with the images above?

How can I style the "current" state of a navigation single item in Webflow to have the yellow line effect shown in the image?

How can I fix the issue of my images appearing small on the browser in Webflow?

Can Webflow be used to show the second line of a headline as an outline on a portfolio page?