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?

Does anyone have a good example of using CSS shapes in Webflow?

Question: How can I prevent the classes in the original element from changing when I change the classes in a copied and pasted element in Webflow?

How can I change the color of the text on my nav bar when hovering over it in Webflow?

What are the recommended relative measures to use for font sizes in Webflow and how can they be applied effectively across different devices?

Is there a feature in Webflow that enables progressive loading of images as they come into view while scrolling?

Is there a way to achieve the scroll effect demonstrated in the given website on Webflow?

Is it possible to enable scrolling within a modal in Webflow for mobile/tablet modes?

Does anyone have an example of how to create a smooth, wave-like section divider using SVG in Webflow?

How can I troubleshoot the issues I am experiencing with my mobile views in Webflow, where changes I make are affecting the other platforms as well?

Can Figure Caption Links in a Rich Text element be styled separately from body copy links in Webflow?