Test your favicon before production

Enter your website URL to fetch its title, description and favicon, swap in a new icon, and preview it full-screen on your real site. Files you upload never leave your browser.

Analyze your website

We read the page's title, meta description, social tags, theme colour and every icon it declares. Only public pages are fetched.

Competitors

Compare your favicon with competing sites. Let us search for them, or add the ones you already know.

Search phrase (describes what your site does)

Or add a competitor URL

1. Load your favicon

Drop a file here or click to browse .ico · .png · .svg · .jpg · .gif · .webp

…or load from a URL (staging / localhost)

Tip: paste a site root like https://example.com and we'll try /favicon.ico.

Page title for previews Domain for previews

2. Validation

Load a favicon to see file details and checks.

Try it in this tab

Applies your icon to this page's real favicon so you can see it in your actual browser tab, exactly as production would.

3. Live previews

Browser tab · address bar · bookmarks

My Awesome App×

Another tab

← → ⟳

example.com

My Awesome App

Docs

Google search results

Your position Tip: drag your result up or down to change its position

⌕search phrase

AI ModeAllImagesVideosShoppingNewsShort videosMore ▾Tools ▾

Home screen & app icons

iOS

Android (circle)

Windows tile

iOS / Android apply their own rounded masks. Use a 180×180 PNG (no transparency) for Apple and 192/512 for Android.

Tiny-size legibility (16×16 · 32×32)

16px ×4

32px ×3

actual

4. See it in every browser

White icon tile Enlarge icons

Your favicon and page title in the inactive, active and hovered tab styles of each browser, in light and dark mode. Turn off “Enlarge icons” to see the true 16 px size.

5. Export all sizes

Load a raster or SVG favicon to generate PNG sizes.

6. HTML to paste in <head>

Load a favicon to generate the snippet.

Favicon sizes & formats that actually matter

favicon.ico (32×32 or multi-size 16/32/48) – the universal fallback, placed at the site root.
SVG – one scalable icon for modern browsers; supports dark-mode tweaks via prefers-color-scheme.
apple-touch-icon.png – 180×180, opaque background, used when users add to the iOS home screen.
192×192 and 512×512 PNG – required by your web app manifest for Android and PWA install.

Why test before you deploy?

Browsers cache favicons aggressively, so a wrong icon can stick for days after you fix it. A blurry 16px render, a transparent background that disappears on dark tabs, or a non-square image are all easy to catch here, before your users see them.

FAQ

Is my file uploaded to a server?

No. Files you upload are read locally in your browser. Only when you analyze a URL does our server fetch that public page to read its tags and icons.

Why is my site blank in the full-screen preview?

The preview loads a script-free copy of your page, so sites that render entirely with JavaScript (some React/Vue apps) can look empty. Use “Sample page” to test your icon against a generic layout coloured with your brand colour.

Why does my favicon not update after I change it?

Browsers cache favicons separately from the page. Hard refresh, clear site data, or add a version query like favicon.ico?v=2 to bust the cache.

Can I test a favicon from localhost or staging?

Yes — paste the icon URL. If the server blocks cross-origin requests, download the file and upload it instead.

What size should a favicon be?

Provide at least a 32×32 icon, a 180×180 Apple touch icon, and 192×192 / 512×512 PNGs for your manifest. Square artwork is essential.

Should I use SVG or ICO?

Ship both: an SVG for modern browsers and a favicon.ico fallback for older ones and crawlers.