Test your favicon before it goes live

A favicon is the tiny icon shown on a browser tab. Use this free tool to see how yours will look before your website goes live, or to try a new icon on a website that is already live. Your files never leave your browser.

Start here

Pick one option. Everything below updates by itself.

ATest your faviconUpload your icon image (PNG, SVG, ICO, JPG, GIF or WebP). It stays on your device.

⬆ Upload my icon

Test favicon preview

Sample iconThis is an example. No icon uploaded yet.Upload your own icon above to replace it.

Favicon found on your website

No website yetType your website in option B to see its current icon here.

BTest your site faviconsType your website address. We show its current icon. Then upload a new icon in option A to compare old and new.

1. Google search results

See how your icon, title and description look in Google search results. Drag a result up or down to change its position.

Your place in results Compare with original Tip: drag any result up or down to move itTip: press and drag the ⋮ handle to move a result

9:41●●●● ▮

⌕search phrase✕

AI ModeAllImagesVideosShoppingNewsShort videosMore ▾Tools ▾

2. See it in every browser

See your icon on the tabs of popular browsers (Chrome, Safari, Edge, Firefox, Opera).

White icon tile Enlarge icons

Your icon and page title on a tab that is not selected, selected, and under the mouse, in light and dark mode. Turn off “Enlarge icons” to see the real, tiny size.

3. Competitors

Optional: add other websites in your field to see your icon next to theirs.

Let us find similar websites for you, or add the ones you already know.

What does your website do? (a few words)

Or add a competitor website and choose its place in the results

Place

Full-screen preview & recent websites

See your icon on your real website, or go back to a website you tested before.

We read your website title, description and icons. We can only open public websites.

Your website at a glance

Your website title, description and all the icons we found. Press “Use this” to pick one.

4. Load your favicon

Choose the icon you want to test, and the title and website name shown in the previews.

Drop your icon here or click to choose a file .ico · .png · .svg · .jpg · .gif · .webp

…or paste a link to an icon image

Tip: you can paste a website address like https://example.com and we will look for /favicon.ico.

Page title (shown in previews) Website name (shown in previews)

5. Validation

Tells you if your icon is good enough, and what to improve.

Add an icon to see its details and tips.

Try it in this tab

See your icon on this very browser tab.

Puts your icon on this page tab so you can see how it really looks in your browser.

6. Tab, bookmarks & phone home screen

How your icon looks on a tab, in bookmarks and on a phone home screen.

Tab · address bar · bookmarks

My Awesome App×

Another tab

← → ⟳

example.com

My Awesome App

Docs

Home screen & app icons

iOS

Android (circle)

Windows tile

Phones round the corners of your icon automatically. Use a square image, at least 180×180 pixels, without a see-through background.

Is it clear at tiny size? (16×16 and 32×32)

16px ×4

32px ×3

real size

7. Export all sizes

Download your icon in every size websites need.

Add an icon to create all the sizes.

8. Code to add to your website

Copy this code and paste it into the top (head) part of your website pages.

Load a favicon to generate the snippet.

9. Favicon generator

Turn any picture into icons of every size, ready for your website.

Choose any picture. We resize it into all the icon sizes. Then download the files and copy the code. Everything happens in your browser, nothing is uploaded.

⬆ Choose image No picture yet. It will use the icon you added above.

Output Fit Padding 0% Make small sizes sharper Background

iPhone icons always get a solid background colour, because iPhones turn see-through areas black.

Code to add to your website

Choose an image to generate the code.

Which icon sizes and file types do you need?

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 your website goes live?

Browsers remember icons for a long time, so a wrong icon can stay for days even after you fix it. A blurry icon, an icon that disappears on a dark tab, or a stretched icon are easy to spot here, before your visitors see them.

FAQ

Is my file uploaded to the internet?

No. Files you choose stay on your device. Only when you type a website address do we open that public page to read its title and icons.

Why is my website empty in the full-screen preview?

The preview shows a simple copy of your page. Some modern websites need extra code to show anything, so they can look empty. Use “Sample page” to test your icon on an example layout instead.

Why is my old icon still showing after I changed it?

Browsers keep old icons in memory. Refresh the page a few times, clear your browser data, or add a number to the icon link, like favicon.ico?v=2 so the browser loads the new one.

Can I test an icon from my computer or a test website?

Yes. Paste the icon link, or simply upload the icon file from your computer.

What size should a favicon be?

Make a square picture. We suggest sizes 32×32, 180×180 (iPhone), 192×192 and 512×512 (Android). The Export step creates all of them for you.

Which file type is best, SVG or ICO?

Use both: an SVG file for new browsers and a favicon.ico file for older browsers and search engines.