Add the favicon to your website

The favicon is the small icon that appears in browser tabs, bookmarks, and on mobile home screens when someone saves your site. It's not a ranking factor, but it's a trust signal — a site without a favicon looks unfinished, and an unfinished-looking site doesn't convert.

From a brand and SEO perspective: when your pages appear in Google search results on mobile, your favicon appears next to the URL in the result listing. Google started displaying favicons prominently in mobile SERPs in 2019. A well-designed favicon that represents your brand at small sizes makes your listing more recognizable in a list of results. Recognition drives clicks.

The favicon needs to work at small sizes — 16x16px to 32x32px on most devices. A logo that looks great at full size often becomes an unreadable blob at 16 pixels. Design or adapt your favicon specifically for small sizes. Simple shapes and high contrast work best. If your logo is a wordmark, it won't read at favicon size — use an icon or initial instead.

In Webflow, upload your favicon in Site Settings → General → Favicon. Upload a PNG at least 32x32px. Webflow recommends 32x32px or 64x64px. For Apple touch icons (used when someone adds your site to their iOS home screen), upload a 180x180px PNG in the same section. After uploading, publish your site for the change to take effect. Clear your browser cache and reload to see the updated favicon in your tab.

Google recommends providing a favicon in the root of your domain as well (a file literally named favicon.ico). Webflow handles the meta tag that references your favicon automatically when you upload via Site Settings. The icon is served from Webflow's CDN, not from your domain root, but Google reads the meta tag and displays it correctly.

Add the favicon before launch. Once added, check it across different browsers (Chrome, Firefox, Safari) and on mobile by adding the site to your home screen. If it doesn't display correctly, check the file format and dimensions, then republish.