How do I set up favicons and app icons in Webflow?

Why does my Webflow site show a blank or blurry icon?

Your site shows a blank or blurry icon because the favicon and touch icons are missing or the wrong size. The favicon is the tiny image in a browser tab, and the touch icon, called a webclip, is what appears when someone saves your site to a phone home screen. When these are not set correctly, browsers show a generic globe or a fuzzy crop.

This is one of the smallest jobs in a Webflow build and one of the most visible. A crisp icon makes a site feel finished. A missing one makes it feel abandoned. This guide walks through setting favicons and app icons the right way, including Webflow's newer approach that does most of the resizing for you.

What is the difference between a favicon and a webclip?

A favicon is the small icon in browser tabs, bookmarks, and history, while a webclip, also called a touch icon, is the larger icon used when someone adds your site to a phone home screen. They serve different surfaces, so they have different size needs.

Historically in Webflow you uploaded two separate images, a 32 by 32 pixel favicon and a 256 by 256 pixel webclip. The favicon needs to stay legible at a tiny size, so simple shapes win. The webclip has room for a little more detail because it renders larger on iOS and Android home screens. Getting both right covers every common place your brand mark appears.

How do I add a favicon in Webflow?

You add a favicon in your project's Site Settings, under the Favicon and Webclip area, by uploading your image files and then publishing. The setting lives at the site level, so one upload covers every page. After you publish, the new icon appears in the browser tab, though you may need to hard refresh to clear the old one.

The steps are short. First, open Site Settings for your project. Second, go to the Favicon and Webclip section. Third, upload your favicon and your webclip images. Fourth, publish the site. That publish step matters, since icon changes, like most Webflow changes, only go live once you push them.

What is the easier way to handle icons in 2026?

The easier way is to upload a single square image and let Webflow generate the sizes for you. Webflow's 2026 favicon update lets you provide one high resolution square file, ideally 512 by 512 pixels, and it produces the full set your site needs automatically. That removes most of the old resizing headache.

From that one image, Webflow creates the common sizes, including 32 by 32 and 48 by 48 favicons, 180 by 180 and 192 by 192 touch icons, and a 256 by 256 webclip. If you upload an SVG, Webflow rasterizes it to PNG for broad browser support. I now design a single 512 pixel square in Figma, export it once, and let Webflow do the rest.

Should I use a PNG or an SVG for my favicon?

Use a PNG for reliable results everywhere, and an SVG only if you want a crisp vector that scales cleanly. PNG is the safe default because every browser handles it. SVG is sharper at any size, but since Webflow rasterizes SVG uploads to PNG anyway, the practical difference for icons is small.

My habit is to keep the source as a clean vector in Figma, then export a 512 pixel PNG for upload. That gives me a sharp master file I can reuse and a format Webflow is happy with. Whatever you choose, start from a square canvas with your mark centered and a little breathing room, so nothing gets cropped awkwardly.

How do I set a dark mode favicon?

You set a dark mode favicon by uploading a separate icon that reads well on dark backgrounds, which Webflow supports through the browser's prefers-color-scheme setting. Browsers that detect a dark theme then show your dark friendly version instead of the default.

This solves a real problem. A dark logo on a dark browser tab disappears. If your primary mark is dark, provide a lighter variant for dark mode so it stays visible in both themes. I treat the favicon as part of a full brand system rather than an afterthought, which I explain in my post on dark mode favicons and brand systems in Webflow.

How do I make sure my icon actually looks good?

You make it look good by designing for the smallest size first. At 32 by 32 pixels, thin lines vanish and small text turns to mush. Test your mark by shrinking it in Figma to tab size before you ever upload it. If you cannot tell what it is at that size, simplify it.

Simple, bold shapes win. Many strong favicons are a single letter, a monogram, or one clear symbol on a solid background. Save the detailed lockup for your header logo. If you want to preview how your icon renders across many devices before launch, a tool like RealFaviconGenerator is handy for a quick sanity check.

Why does my favicon look fine on desktop but wrong on mobile?

Your favicon can look fine on desktop and wrong on mobile because the two use different icons at different sizes. The browser tab uses the small favicon, while a phone home screen uses the larger touch icon. If you only set the favicon and skip the touch icon, saving your site to a home screen can produce a cropped or blank result.

This is exactly why the newer single image approach helps. When you upload one clean square file and let Webflow generate every size, the small tab icon and the larger home screen icon both come from the same source and stay consistent. If you still upload sizes by hand, make sure you provide both the favicon and the webclip, so no surface is left guessing what to show.

Do favicons matter for SEO or AI search?

Favicons do not directly boost rankings, but they do show up in search results and they shape trust, which matters more than people think. Google displays a site's favicon next to mobile search listings, so a missing or ugly icon makes your result look less credible right where buyers decide which link to tap.

I treat the favicon as a small brand asset that earns its keep in tiny spaces. It appears in tabs, bookmarks, history, phone home screens, and mobile search results. None of those alone wins a customer, but together they make your brand feel present and cared for. A sharp, recognizable icon is a quiet signal that the whole operation is run with attention, and that impression carries weight.

What should I check after uploading my icons?

After uploading, publish the site, then hard refresh and check the browser tab, a bookmark, and a phone home screen. Icons cache aggressively, so an old icon lingering in your tab usually means a cache issue, not a failed upload. A private browser window gives you a clean test.

While you are in settings, it is a good moment to confirm your other basics are in order, like your page titles, sitemap, and robots rules, which I cover in my guide to Webflow SEO settings. Small details like a sharp favicon are what make a site feel professional. If you want help polishing these final touches, let's chat and I will run through your setup.