Favicons and touch icons

Use favicons and touch icons on your Webflow websites.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

In this lesson:

  1. Favicon
  2. Touch icons
  3. Image assets
  4. Upload your icons

Favicon

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

A google chrome window includes a google.com, apple.com, youtube.com and wikipedia tab. The favicon for the wikipedia tab is highlighted.

Touch icons

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

A safari browser window includes twelve touch icons. The wikipedia touch icon is highlighted.

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

Image 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.

A diagram includes two Webflow logo W icons. Dimensions are specified with arrows and a digit number. On the left, the favicon should be 32 px.
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.

Upload your icons

Once you’re done preparing your image assets:

  1. Go to your Project Setting > General tab > Icons
  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

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top