Favicon generator: every icon your website needs in one ZIP
Upload your logo or type one or two letters. See how it looks in a browser tab, in light and dark themes, and download favicon.ico, the PNGs, the iPhone and Android icons and the HTML code for your site.
One or two characters: your business initial, two initials or an emoji.
Preview
The ZIP contains: favicon.ico (16, 32, 48), PNG 16, 32 and 48, apple-touch-icon 180, 192 and 512 icons for Android, site.webmanifest and a README with the code.
Code for your <head>
Upload the files to your website's root folder and put these lines inside <head>.
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#2f5bd6">On WordPress you need no code: Appearance → Customize → Site Identity → Site Icon, and upload icon-512.png.
- Made in your browser
- Your image is not uploaded
- A real favicon.ico
What a favicon is and why you need more than one
The favicon is the small icon next to your page title: in the browser tab, in bookmarks, in history, and in Google's mobile search results. It is often the first sign of your brand someone sees.
Each place wants a different size: 16 and 32 pixels for the tab, 180 for the iPhone when someone adds your site to their home screen, 192 and 512 for Android. Here you make them all at once from one image, together with the code that links them.
How it works
- 1
Upload a logo or type letters
PNG, JPG, SVG or WebP, or one or two initials in your brand colour.
- 2
Choose shape and background
Square, rounded or circle, with a transparent or solid background.
- 3
Check the preview
In a light and a dark browser tab, because a dark logo on a transparent background disappears in dark mode.
- 4
Download and upload
The ZIP to your website's root folder and the HTML lines into <head>.
Why a proper favicon is worth it
People find you among their tabs
With ten tabs open, titles get cut off and only the icon remains. Without a favicon, your page is a grey blank.
It shows on Google
In search results Google shows the favicon next to your site name. A clean icon makes the result look more trustworthy.
A professional look
The default WordPress or site-builder icon says something was left unfinished. Your own says you care.
A complete icon set for every browser and phone
The same files we put on the websites we build, with the names browsers expect.
For the browser tab
The small sizes, where the icon is always in view.
- favicon.ico with 16, 32 and 48 pixels inside
- PNG 16×16, 32×32 and 48×48
- An SVG favicon if you upload an SVG
For iPhone and Android
When someone adds your site to their home screen.
- apple-touch-icon 180×180 with a solid background
- 192×192 and 512×512 icons
- site.webmanifest with name and colour
Ready to upload
Everything in one file, with instructions.
- One ZIP with every file
- The HTML lines for <head>
- Instructions for WordPress too
About favicons
What size should a favicon be?
There isn't one size. The browser tab shows 16×16 or 32×32, the iPhone wants 180×180 and Android 192×192 and 512×512. That's why this tool makes every size from one image. Start from a square logo of at least 512×512, or an SVG.
Do I still need a favicon.ico file?
Yes, it's worth having. Many tools, RSS readers and older browsers request /favicon.ico directly without reading your page's code. The favicon.ico made here holds three sizes (16, 32 and 48 pixels), so each program can pick the right one.
I uploaded a new favicon but still see the old one. Why?
Browsers cache favicons for a long time. Open the page in a private window to see the new one. In Google's results the change shows once Google crawls your home page again, which can take from days to a few weeks.
How do I add a favicon in WordPress?
In the dashboard: Appearance → Customize → Site Identity → Site Icon. Upload icon-512.png from the ZIP and WordPress makes the other sizes itself. In block themes with the site editor, the same setting is in the Site Logo block.
Is my image uploaded anywhere?
No. The image is processed inside your browser and the files are made on your device. We only record that the tool was used, with the settings and the file name, not the image itself.
The favicon is a start. What about the rest of your brand?
Logo, colours, typefaces and a website that ties them together. We design brand identities and websites for businesses that want to look as professional as they are.