How to change favicon in Webflow

At a glance:

1. Project Setting > General tab > Icons
2. Prepare images (32 x 32 & 256 x 256) 
3. Upload the images you prepared
4. Publish your site for the changes to go live
5. Refresh your live site in your browser to see the updated favicon 

‍

Go to the icons section in project settings

To change the Webflow favicon (or the little icon that shows up in the browser tab) you will need to open “Project Settings”. You can get there two different ways:

‍

‍

Prepare your images 

You will need to prepare and upload two different sizes of your logo for your favicon in Webflow. The first size will need to be 32 x 32 pixels, and the second needs to be 256 x 256 pixels. 

Reminder: name these photos something you are OK with showing up on google as the names will be indexed by search engines

‍

If your photos are not currently this size (mac)

1. Make two copies of the photo file on your computer
2. Crop both to a square using preview
3. Resize one square Webflow favicon to 256 x 256 px and the other to 32 x 32 px

‍

‍

‍

‍

Upload your images

One you have your two Webflow favicon files in the correct size, upload them in “Project Settings” → “General Tab” → “Icons”.

‍

Publish changes

‍

‍

Refresh your live site in your browser to see the updated Webflow favicon

‍

Note: if you don’t see it updated right away, sometimes you will need to clear cache. You can also try looking in incognito to make sure it is updated correctly.