How to change favicon in Webflow
Learn how to change your favicon in Webflow.
At a glance:
- Project Setting > General tab > Icons
- Prepare images (32 x 32 & 256 x 256)
- Upload the images you prepared
- Publish your site for the changes to go live
- 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)
- Make two copies of the photo file on your computer
- Crop both to a square using preview
- 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”.
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.