The Free Favicon Generator Guide: Every File Your Site Needs from One Logo, and How to Make It Show
You finished the site, opened it in a new tab, and there it is: a blank grey page icon where your logo should be. A favicon is the small picture that fixes that, in the tab, the bookmarks bar, an iPhone home screen and Google results. This guide shows how a favicon generator turns one square logo into the whole set in one click, what each file is for, the HTML to paste, and what to check when the icon will not appear. Want just a quick favicon maker or an ico converter? It does that too.
1. What Is a Favicon, and What Size Should It Be?
A favicon started life as one tiny favicon.ico file at the root of a site. Today every place that shows your site wants a different size, so the honest answer to what size should a favicon be is “several”.
For anyone looking up favicon sizes 2026, the set that covers the places people actually see your icon is short:
- 16 and 32px for the tab and the bookmarks bar, plus 48px, all bundled together inside favicon.ico.
- 48 and 96px PNGs, which meet Google’s rule that a search-result favicon must be a square whose side is a multiple of 48px.
- 180px for the apple-touch-icon an iPhone or iPad uses when someone adds your site to the home screen.
- 192 and 512px for Android shortcuts and the web app manifest.
The tool above produces every one of those from a single image.
2. How to Make a Favicon in Four Steps
Here is how to make a favicon with this favicon generator free online, with no account and no sign-up.
- Add your logo. Drop a square PNG, SVG or JPG, or paste one from the clipboard. 512px or larger works best.
- Set the options. Type the app name and short name for the manifest, and pick a theme and background colour. Padding (0 to 30%) adds room around the logo; Corner radius (0 to 50%) rounds the background square.
- Check the preview. Live thumbnails at 16, 32, 48, 180 and 512px update as you adjust, so you can judge whether the logo still reads at tab size.
- Generate the ZIP. Press Generate ZIP and download favicons.zip. A ready HTML snippet for your head appears alongside it, to copy or save as a file.
Press the button with no image added and the tool asks for one, rather than handing you an empty package.
3. The Twelve Files in the Package, and Where Each One Shows
Most pages stop at “download your favicons”. Here is exactly what is in the ZIP and why each file exists.
Tabs, bookmarks and search results
favicon.ico holds 16, 32 and 48px versions in one file, so it works as a favicon.ico generator and a png to ico step in one go. Next to it sit favicon-16x16.png, favicon-32x32.png, favicon-48x48.png and favicon-96x96.png for tabs and Google results.
Phones, home screens and web apps
apple-touch-icon.png at 180x180 for iPhone and iPad. android-chrome-192x192.png and android-chrome-512x512.png for Android. favicon-192x192.png and favicon-512x512.png as general large icons. Then site.webmanifest and a README.txt.
One run doubles as an apple touch icon generator, a pwa icon generator and a web app manifest generator. The manifest carries your names and colours, standalone display, a start URL of your site root, and the 192 and 512px icons, including a 512px maskable entry. If a template or console warning asked for android chrome 192x192 png, it is in the package under exactly that name. The theme colour goes into the manifest and a meta tag only; it does not change the pictures.
It is an app icon generator for websites, not app stores: the largest icon is 512px, with no iOS asset catalogue or Android adaptive-icon XML. For other sizes, use the image resizer. The ICO sizes are fixed at 16, 32 and 48px, and no Cortexis tool writes an ICO at another size such as 64 or 256px. In practice that rarely matters: PNG icons are widely supported for larger sizes, so a 64px or 256px PNG from the image resizer, linked with its own sizes attribute, does the same job.
4. How to Add a Favicon to a Website
Knowing how to add a favicon to a website takes two moves: put the files at your site root and paste six lines into the page head. If you searched how to add favicon in html, this is the snippet the tool gives you:
<link rel="icon" href="/favicon.ico" sizes="32x32"> <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="#2e6bff">
Every path starts with a slash, so the files belong at the root, not a subfolder. The manifest fields follow the web app manifest reference on MDN if you want to extend them.
- Favicon for React app projects: replace the default favicon in the public folder with all twelve files, and swap the old icon lines in index.html for the snippet.
- Favicon for WordPress site without plugin: copy the files to the site root with your host’s file manager and paste the snippet into a child theme’s header template.
5. Getting the Logo Right: Square, Transparent, Rounded
Most disappointing favicons come from the source image.
A wide or tall logo. The tool does not crop: a non-square image is fitted and centred, leaving empty space. To fill the square, trim it first with the image cropper.
Transparent logos. For a favicon from logo PNG transparent background files, note that the option “Fill background colour behind transparent icons” is on by default. Leave it on for the apple-touch-icon, since iOS shows transparent areas as black; turn it off for a see-through tab icon. Logo stuck on a white box? Clear it first with the background remover.
Rounded or maskable icons. As a rounded favicon generator, the Corner radius slider shapes the background square while the fill is on; the logo itself is never clipped. As a maskable icon generator it is simpler: the maskable entry reuses the same 512px image, not a separately padded one. Android may cut it to a circle, so raise Padding until the logo sits well inside the centre.
SVG to favicon. An SVG logo gives crisp PNG and ICO files, but no icon.svg or dark-mode variant comes out; to serve an SVG favicon by hand, tidy it with the SVG optimizer. There is no text or emoji mode; for a letter on a coloured square, make the picture first with the meme generator.
6. Favicon Not Showing? The Fixes
A favicon not showing after you added it to your site almost always has one of these causes.
- Favicon not showing in Chrome. Chrome caches old icons stubbornly. Add a version to the links, such as
/favicon.ico?v=2, and check in a private window. - Wrong path. Open yoursite.com/favicon.ico directly; if it does not load, the files are in the wrong folder.
- Snippet in the wrong place. The lines must sit inside the head, on every page template.
- Favicon not showing in Google search results. Google wants a square icon, favours sizes in multiples of 48px, and must be able to crawl both the icon and your home page; picking up a change can take a while. The package’s 48 and 96px PNGs fit that size advice, but the default snippet does not link them, so add a line such as
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">to your home page. The full rules are in Google’s favicon guidelines. - Favicon blurry. A fuzzy tab icon usually means one large image is being squeezed down. The 16 and 32px files here are made at their real sizes, and a simpler mark stays sharper.
- Apple touch icon not working. If the home-screen shortcut shows a screenshot, the apple-touch-icon link is missing or the file is not at the root. If it shows a black square, the icon was transparent: keep the background fill on.
The tool does not visit any live site, so it cannot check these for you, clear a cached icon, or fetch another site’s favicon.
7. Why Cortexis Is the Best Free Favicon Generator
Many pages make a favicon. Fewer tell you what you are getting. Here is what is different.
Free, with no account
No sign-up and no watermark. Drop a logo, press one button, download the ZIP.
The complete set in one click
favicon.ico, six PNG sizes, the apple-touch-icon, two Android icons, a manifest and a README, named the way templates expect.
A snippet you can paste
The head markup comes with your theme colour filled in, ready to copy or save.
Your logo stays private
Files are never stored on our servers and nothing is retained, so an unreleased brand stays unreleased.
Nothing is used for training
Your logo and icons are never used to train anything.
Honest about the edges
ICO sizes, the 512px ceiling and the shared maskable image are stated up front, with a tool for each gap.
It belongs to a wider set of free image and file tools built on the same terms, and pairs well with the colour picker for your exact brand hex.
8. Frequently Asked Questions (FAQ)
How do I make a favicon from my logo for free?
Drop a square logo into the favicon generator at the top of this page, set the names and colours, and press Generate ZIP. You get favicon.ico, PNG icons, an apple-touch-icon, a web manifest and the HTML for your head.
Can I convert a PNG to ICO here?
Yes. Every package includes a favicon.ico built from your image, holding 16, 32 and 48px versions in one file. Those three sizes are fixed, and no Cortexis tool writes an ICO at another size such as 256px. For a larger icon, make a PNG at that size with the image resizer and link it with its own sizes attribute; PNG icons are widely supported.
What size should my source image be?
A square image of 512px or larger works best, as a PNG, SVG or JPG. Anything larger is scaled to 1024px on its longest side first, still ample for the 512px icon.
Why does my logo have empty space around it?
The tool fits a non-square image inside the square and centres it rather than cropping it. Crop it square with the image cropper first, and lower Padding to let the mark fill more of the icon.
Does it make an SVG favicon or a dark-mode version?
No. The output is PNG and ICO files only, with no icon.svg and no dark-mode variant. The SVG optimizer can tidy an existing SVG logo to serve by hand.
Will the icons work when someone adds my site to their home screen?
Yes, if the files are at your site root and the snippet is in the head. iPhones and iPads use the 180px apple-touch-icon, and Android uses the 192 and 512px icons listed in site.webmanifest. Keep the background fill on so the iOS icon does not show a black background.
Why is my favicon not showing in Google search results?
Google needs a square icon, ideally at a multiple of 48px, and must be able to crawl both the icon and your home page. Link the 48 or 96px PNG from this package in your home page head, then allow time for Google to recrawl. This page cannot force an update; that happens on Google’s schedule.
Why is my favicon blurry?
Usually one large image is being scaled down to 16 or 32px. This package draws each size separately, so link favicon-16x16.png and favicon-32x32.png as the snippet does. If it is still soft, the logo has too much detail for tab size: simplify the mark, or lower Padding so it fills more of the square.
Why is my apple touch icon not working?
Check that apple-touch-icon.png sits at your site root and the apple-touch-icon line is in the head. A screenshot instead of your icon means Safari could not find it; a black square means the icon was transparent, so keep the background fill on. Remove the old home-screen shortcut and add it again to see the change.
Does it create Windows tiles or a Safari pinned-tab icon?
No. The package has no mstile images, no browserconfig.xml and no pinned-tab SVG. It covers tabs, bookmarks, Google results, Apple home screens and Android.
Is my logo kept anywhere?
No. Your files are never stored on our servers and nothing is retained after your session. They are never used for training either.
Polishing the rest of the site? Shrink images with the image compressor, squeeze PNGs with the PNG compressor, or link to the site with the QR code generator. To design the logo itself, our free graphic design course covers it, while the full-stack web development course covers building the site.