How to use the Favicon Generator
- Choose Text / emoji and type a letter or pick an emoji, or switch to Image and drop your logo (SVG or a square PNG of 512 px or more works best).
- Adjust colours, text size, padding and corner rounding while watching the browser-tab preview at real 16 px size.
- Enter your site name and theme colour for the web manifest.
- Click Download all (ZIP), upload the files to your site’s root folder and paste the HTML snippet into
<head>. On Webflow, upload the 32×32 favicon and 256×256 webclip in Site settings instead.
What is a favicon?
A favicon is the small icon browsers show in tabs, bookmarks and history, and that Google displays next to your site name in mobile and desktop search results. Phones also use larger versions when someone adds your site to their home screen. A complete set today is small: one ICO file for legacy and default /favicon.ico requests, a PNG for modern browsers, an Apple touch icon, two Android/PWA icons referenced from a web app manifest — and optionally an SVG.
What this generator creates
| File | Size | Used by |
|---|---|---|
favicon.ico | 16, 32, 48 px in one file | All browsers, Windows shortcuts, tools that request /favicon.ico directly |
favicon-32x32.png | 32 × 32 | Modern browser tabs; the size Webflow asks for |
apple-touch-icon.png | 180 × 180 | iPhone/iPad home screen and Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Android home screen, PWA install and splash screen |
webclip-256x256.png | 256 × 256 | Webflow’s Webclip setting |
site.webmanifest | JSON | Name, colours and icon list for installable sites |
The ICO file is assembled directly in your browser: a small ICO header and directory followed by three PNG-compressed images, a format every current browser and Windows version reads. Nothing is uploaded.
Favicon best practices
- Design for 16 px. Fine detail and long words disappear at tab size. A single bold letter, a simple mark or an emoji reads far better than a full logo with a tagline.
- Apple touch icons must be opaque. iOS rounds the corners itself and fills transparent pixels with black, so this tool always exports the 180 px icon (and the Webflow webclip) as a full square with a solid background.
- Check dark mode. A dark logo on a transparent background vanishes in a dark browser tab — the preview shows both themes. Add a background colour or padding if needed.
- Google Search requires a square favicon that is crawlable and recommends something larger than 48×48 px, which is why the snippet also links the 192 px PNG. Changes can take days to appear in search results.
- Caching: browsers cache favicons aggressively. If you replace one, test in a private window or add a version query such as
/favicon.ico?v=2.
Adding a favicon in Webflow
Open Site settings → General and scroll to Favicon & Webclip. Upload a 32×32 px image as the favicon and a 256×256 px image as the webclip (used as the Apple touch icon), save, and publish the site. Webflow generates the <link> tags automatically, so you don’t need the HTML snippet or the manifest unless you add them via custom code. To check what’s live afterwards, the Meta Tag Checker reports favicon and Apple touch icon tags.
Tools that pair well with the Favicon Generator
- Image Resizer — Resize a photo to exact pixel dimensions or a percentage, crop it to fill a social-media size, or fit it inside a frame with a background colour — all locally in your browser.
- OG Image Generator — Create a polished link-preview image for Facebook, LinkedIn, X, Slack and WhatsApp in seconds — pick a template, type your title, add a logo, then download the PNG and matching meta tags.
- Meta Tag Generator — Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme colour and icons — with live previews and Webflow-specific output.
- Image to Base64 — Turn a PNG, JPEG, SVG, WebP or GIF into a Base64 data URI with copy-ready CSS and HTML — or paste a Base64 string to preview and download the image.
Frequently asked questions
What size should a favicon be?
favicon.ico, a 32×32 PNG, a 180×180 Apple touch icon and 192×192 plus 512×512 PNGs for Android. This generator produces all of them from one source.Do I still need a favicon.ico file?
/favicon.ico from the site root even without a <link> tag, so keeping one there avoids 404s and missing icons.What favicon sizes does Webflow need?
favicon-32x32.png and webclip-256x256.png from the ZIP.Can I use an emoji as a favicon?
Why isn’t my new favicon showing?
?v=2) to the icon URLs. Google Search may take days or weeks to recrawl it.