Use favicons and webclips on your Webflow websites.
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 –– used by most browsers to represent your website on browser tabs and in bookmarks.
Webclips –– also known as “touch icons,” these are used in places like Safari’s bookmarks. They also show up when your website link is saved to a smartphone’s home screen.
How to upload icons
To generate favicons and webclips for your site, upload one square image and Webflow will auto-generate all favicon and touch icon sizes. SVG uploads are automatically rasterized to PNG for cross-browser compatibility.
If your site visitors use dark mode in their browser or OS, you can upload a separate favicon optimized for dark backgrounds. This favicon is served using the browser's prefers-color-scheme media query. The dark mode favicon option appears after you upload a light theme favicon.
| Icon | Size | Purpose |
|---|
Favicon (light) | 32x32 | Browser tabs and bookmarks |
Favicon (light) | 48x48 | Google search results |
Favicon (dark) | 32x32 | Browser tabs in dark mode (optional) |
Webclip | 256x256 | Safari bookmarks, home screen |
Touch icon | 180x180 | Apple touch icon |
Touch icon | 192x192 | Android home screen |
To upload images for your icons:
Go to your Site Settings > General > Icons
Click Upload icon
Upload a single square image — Webflow generates all required sizes automatically
Select which icon(s) you want to update with your image
(Optional) Upload a dark mode favicon after your light favicon is set
Click Apply
Publish your site for the changes to go live
Refresh your live site in your browser to see the updated favicon
Note
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.