Quick answer: Upload an image, or type a letter or emoji, in the generator above. Pick a colour and shape, check the preview, then download the full favicon set as a ZIP. It includes an ICO file, PNG sizes, an Apple touch icon, Android icons, an SVG and a web manifest, plus the code to paste into your site. Everything is created in your browser.
What this favicon generator does
A favicon is the tiny icon you see in a browser tab, in bookmarks, on a phone home screen and next to a website in search results. It is a small thing, but it helps people spot your site among many open tabs, and it makes a site look finished and trustworthy.
Making one properly used to mean exporting the same logo in half a dozen sizes and formats. This tool does that for you. Start from a logo, a letter or an emoji, style it, and you get every file a modern website needs, along with a ready-made block of HTML.
How to make a favicon, step by step
- Choose a source. Pick Text or emoji for a quick icon, or Image to upload your logo. You can also paste an image with
Ctrl+V. - Style it. Choose a quick style, set the background colour or a gradient, and pick square, rounded or circle corners.
- Check the preview. Look at the light and dark tab previews, the real 16 px size, and the phone icons. If it is hard to read, make the content bigger or simplify it.
- Add your site details. Enter your site name, short name and theme colour. They go into the web manifest.
- Download. Press Download all (ZIP), or download single files from the list.
- Install it. Upload the files to your site's root folder and paste the code from step 4 into your pages.
Where each icon is used
Different places ask for different sizes. That is why a single image is not enough.
| File | Size | What it is for |
|---|---|---|
| favicon.ico | 16, 32, 48 px | The classic file. Browsers look for it at your site's root by default. |
| favicon-16x16.png and favicon-32x32.png | 16 and 32 px | Browser tabs on normal and high-resolution screens. |
| favicon-48x48.png | 48 px | Desktop shortcuts and a size search engines like. |
| apple-touch-icon.png | 180 px | The icon when someone adds your site to an iPhone or iPad home screen. |
| android-chrome-192x192.png and 512x512.png | 192 and 512 px | Android home screens and installable web apps. |
| maskable-icon-512x512.png | 512 px | Android adaptive icons that get cropped into different shapes. |
| favicon.svg | Scales to any size | A sharp, small file for browsers that support SVG icons. |
| site.webmanifest | Text file | Tells Android your site name, colours and icon files. |
You do not have to use every file. A simple site can get by with the ICO, one PNG and the Apple touch icon. But having the full set costs nothing and covers the most devices.
How to add your favicon to a website
On any website
Upload all the files to the root folder of your site, so that /favicon.ico opens in a browser. Then paste this code between the <head> tags of your pages. The generator gives you this block with your own colour already filled in.
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<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="#93e547">On WordPress
- Go to Appearance, then Customize, then Site Identity.
- Under Site Icon, choose Select site icon and upload the 512 px PNG from your ZIP.
- Crop if asked, then publish.
WordPress then adds the icon tags for you. If you also paste the code above into your theme, you may end up with duplicate tags, so choose one method.
Design tips for a favicon people can read
- Keep it simple. One bold letter, a simple shape or an emoji works better than a detailed logo.
- Use strong contrast. Dark on light, or light on dark. The tool warns you when the colours are too close.
- Avoid small text. A full name cannot be read at 16 pixels. One or two letters can.
- Fill the space. Too much padding makes the icon look tiny in a tab. Try 5 to 12 percent.
- Check light and dark tabs. A dark icon can vanish on a dark browser theme. The preview shows both.
What the maskable icon is for
Android may crop your icon into a circle, a rounded square or another shape, depending on the phone. A maskable icon is designed for that. The important part of your design must sit inside a safe zone in the middle, which is a circle covering about 80 percent of the icon width. The generator shrinks your content for the maskable file so it stays safe.
Troubleshooting
My new favicon is not showing
Browsers store favicons for a long time. Do a hard refresh (Ctrl+Shift+R), clear your cache, or open the site in a private window. Also check that /favicon.ico opens directly in the browser.
It does not appear in Google search results
Google can show your favicon next to your site, but it decides when. The icon file must be reachable by Google, its address should stay stable, and the size should be a multiple of 48 px, such as 48 by 48. After you change it, it can take days or weeks to update, and there is no guarantee it will be shown.
The icon looks blurry
Start from a larger source image, ideally 512 px or more and square. Simple shapes also stay sharper than fine detail.
It disappears on a dark tab
Use a background colour instead of a transparent one, or pick a lighter icon colour.
Things this tool cannot do
Here are the limits, so you know what to expect.
- SVG favicons are for text and emoji only. When you upload an image, the tool creates PNG and ICO files, not an SVG.
- Emoji look different on each device. The emoji in your PNG and ICO files comes from the font on the device you used to make them. The SVG uses the viewer's own emoji font.
- Fonts are system fonts. The text options use fonts already on your device, not custom web fonts, so letter shapes may vary slightly between computers.
- No background removal. If your logo has a white box around it, the icon will have one too. Use a logo with a transparent background.
- Transparent backgrounds change on phones. The Apple and Android files use a white background when you choose transparent, because iPhones turn transparency black.
- It does not install the icon for you. You still upload the files and add the code, and it does not check that your site is set up correctly.
- Static icons only. Animated favicons are not supported.
Your images stay private
The icons are made in your browser. Your logo or image is not uploaded to our servers. A small helper library that builds the ZIP file loads from a public CDN when the page opens. It is code only and does not receive your image.
Frequently asked questions
What size should a favicon be?
A 32 by 32 px PNG and an ICO file covering 16, 32 and 48 px work for most browsers. Add a 180 px Apple touch icon and 192 and 512 px Android icons for phones. Google Search prefers a size that is a multiple of 48 px.
What is the difference between ICO, PNG and SVG favicons?
ICO is the classic format and can hold several sizes in one file. PNG is a simple image at one size. SVG is a vector that stays sharp at any size, but not every browser supports it, so keep PNG or ICO as a fallback.
Can I make a favicon from my logo?
Yes. Choose Image, upload your logo, and adjust the fit and padding. A square logo with a transparent background gives the best result.
Can I use an emoji as a favicon?
Yes. Choose Text or emoji and type or pick an emoji. It is a quick way to get a recognisable icon without any design work.
How do I add a favicon to WordPress?
Go to Appearance, Customize, Site Identity, then upload the 512 px PNG as your Site Icon. WordPress handles the tags for you.
Why is my favicon not updating?
Browsers cache favicons for a long time. Do a hard refresh, clear your cache, or try a private window. Make sure the new files were uploaded to your site's root.
What is a maskable icon?
It is an Android icon designed to be cropped into different shapes. Your design stays inside a central safe zone so nothing important is cut off.
What is the site.webmanifest file?
It is a small text file that tells browsers and Android your site name, theme colour and icon files, which lets people install your site like an app.
Is this favicon generator free?
Yes. There is no signup, no watermark and no limit. The site may show ads, which cover its running costs.
More tools
Hi, I’m Waqas, the person behind WIKITECHLIBRARY. I started this site because I wanted online tools that simply work, without sign-ups or watermarks. I build each tool myself and keep improving them based on your feedback. Questions or feedback?
