This free favicon generator turns a single image into everything your website needs to display a favicon correctly across browsers, phones, and search results. Upload a PNG or JPG, and you get back a ZIP containing a real multi-size favicon.ico, individual PNG icons for every common size, a web manifest, and a ready-to-paste block of HTML. No sign-up, no watermark.
Most “favicon” tools hand you a pile of images and leave the rest to you. This one includes the two pieces those tools skip: the favicon.ico file browsers still look for, and the code and manifest that make the icons actually work. Below the tool, this page explains which size is used where, which file format to use, and exactly how to install the result.
What Is a Favicon?
A favicon is the small square icon that represents your website. You see it in the browser tab, next to a bookmark, and in your browser history. It also becomes the app icon when someone saves your site to a phone home screen, and it now appears next to your site in Google’s search results on mobile. A favicon is small, but it does real work: it makes your site recognizable in a crowded row of tabs, signals that a site is maintained and professional, and adds a subtle trust cue wherever your link appears.
How to Create a Favicon (Step by Step)
Making your favicon takes four steps:
- Upload a square image. Use a PNG or JPG. A square source works best, and a bold, simple design reads far better than a detailed logo, because fine detail disappears at 16 pixels.
- Generate. The tool resizes your image into every icon size and builds the favicon.ico, the PNGs, the manifest, and the HTML for you.
- Download the ZIP. You get a single file containing all ten assets, ready to use.
- Install it. Unzip the files into your website’s root folder and paste the included HTML into your page. The install section below walks through it.
Favicon Sizes and Where Each One Is Used
A modern favicon is not one image, it is a small set, because different surfaces call for different sizes. This tool generates all of them. Here is what each size is for:
| Size | File | Where it is used |
|---|
| 16x16 | favicon.ico / PNG | Browser tab and address bar, the classic favicon |
| 32x32 | favicon.ico / PNG | High-DPI browser tabs, Windows taskbar shortcuts |
| 48x48 | favicon.ico / PNG | Windows site icons and higher-resolution displays |
| 180x180 | apple-touch-icon.png | iPhone and iPad home screen icon when a site is saved |
| 192x192 | android-chrome PNG | Android home screen and app icon, referenced by the manifest |
| 512x512 | android-chrome PNG | Android splash screens and installable web apps (PWAs) |
The favicon.ico bundles the three smallest sizes into the single file browsers look for at your site root, while the larger PNGs cover mobile and app icons. You do not have to choose between them; a complete favicon setup uses all of them together, which is exactly what this tool produces.
ICO vs PNG vs SVG: Which Favicon Format Should You Use?
Three formats show up in favicon setups, and they are complementary rather than competing. ICO is the original favicon format and the universal fallback: it can hold several sizes in one file, and browsers still expect a favicon.ico at your site root. PNG is what modern browsers prefer for individual sizes, giving crisp icons at each specific resolution, which is why the mobile and Android icons are PNGs. SVG is the newest option, a single scalable file that stays sharp at any size on current browsers, with ICO and PNG as the fallback for everything else. The practical answer for most sites is to use ICO and PNG together, which is what you get here; add an SVG later if you want the most future-proof setup.
How to Add a Favicon to Your Website
Installation is two steps: put the files where browsers can find them, then tell the browser about them. First, upload the unzipped files to your website’s root directory, the same folder as your homepage, so that favicon.ico sits at yoursite.com/favicon.ico. Then add the included HTML to the <head> section of your pages. The tool generates this block for you in favicon-code.html, and it looks like this:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Each line has a job: the first points browsers to the classic ICO, the next two give them sharp PNGs for standard and high-DPI tabs, the apple-touch-icon line handles the iPhone home screen, and the manifest line links the file that makes the Android icons work. For a full reference on this markup, see the HTML link element documentation. If you run WordPress, Shopify, or a similar platform, you can usually upload the favicon in your site or theme settings instead of editing code, though the manifest still belongs in your root folder.
Favicons in Google Search Results
Google now shows a site’s favicon next to its listing in mobile search results, which makes the humble favicon a small but real presence in the SERP. To qualify, your favicon needs to be a square image whose dimensions are a multiple of 48 pixels, hosted at a consistent URL that Google can crawl, and associated with your site through the link tag in your <head>. The icons this tool generates meet those requirements. The full, current rules are in Google’s favicon requirements for search results. It will not move your rankings, but a clean favicon next to your result looks more trustworthy than the generic globe Google shows when one is missing.
Favicon Best Practices
- Keep it simple. A single bold shape, letter, or mark reads clearly at 16 pixels; a full logo usually turns to mush.
- Use a transparent background where it fits. It lets the icon sit cleanly on light and dark browser themes.
- Match your brand color. The favicon is a tiny brand touchpoint; consistency helps recognition.
- Test on light and dark tabs. An icon that looks great on white can vanish on a dark theme; check both.
- Keep favicon.ico at the root. Even with modern PNG and SVG icons, the root favicon.ico is the fallback older browsers and some tools still look for.
Finish Your Site’s Images
A favicon is one piece of a polished site. While you are optimizing images, shrink your photos and graphics for faster loading with our free Image Compressor, and make sure your pages look right when shared on social media by generating preview cards with our Open Graph Generator. New to favicons? Our step-by-step favicon install guide walks through every file in the download and exactly where it goes.
