Favicons and touch icons

How to use favicons and touch icons on your Webflow websites.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

One of the most important finishing aspects when publishing a website is how you represent your site in a browser’s UI or on a mobile home screen.


Favicons are used by most browsers to represent your website on browser tabs and in bookmarks.


Touch icon or webclip

Touch icons or Webclips are used in places like Safari’s bookmarks.

Touch icon or Webclip

They also show up when your website link is saved to your smartphone’s home screen. 

Preparing your assets

When preparing your web icon image assets for upload, create a 32x32 pixel image to use as the favicon and a 256x256 pixel image for the Webclip or Touch icon.

Webflow Favicon and Touch icon sizes
The filename you use in these image assets will be visible in your HTML, so just be careful not to include anything in your filename that you don’t want indexed by search engines.

Uploading your icons

Once you’re done preparing your image assets:

  1. Go to your Project Setting → General tab → Icons section
  2. Upload the images you prepared
  3. Publish your site for the changes to go live
  4. Refresh your live site in your browser to see the updated favicon

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.