Favicon Generator
Generate favicon.ico plus every PNG size browsers, iOS, and Android actually need.
What is Favicon Generator?
A favicon is the small icon shown in a browser tab, bookmark list, and address bar to represent a website, typically the tiny logo that appears next to a page's title. Modern browsers and mobile platforms request it in several formats and sizes at once: a classic favicon.ico for desktop tabs, an apple-touch-icon PNG for iOS home screens, and larger PNGs declared in a site.webmanifest for Android and PWA installs. The .ico format itself is a small container that can bundle multiple image sizes, commonly 16, 32, and 48 pixels, into a single file. Shipping the full set rather than just one favicon.ico ensures the site's icon looks crisp on every device and surface where it appears.
How to Use Favicon Generator
- Drag a logo or image onto the drop zone, or click it to choose a file — a square image with a transparent or simple background works best.
- The tool generates a real favicon.ico (16, 32, and 48px combined) plus individual PNGs at every size modern browsers, iOS, and Android actually request.
- Download each file individually, or click "Download all as .zip" to get every file in one archive.
- Place the files in your site's root (or public) folder, then copy the HTML snippet into your page's <head> and the site.webmanifest JSON into a file of that name alongside them.
Examples
Square logo
Input: 512×512 PNG logo
Output: favicon.ico + 5 PNG sizes, no padding
Non-square image
Input: 1200×630 wide banner
Output: Same 6 files, each centered with transparent padding to stay square
Common Mistakes
- Only uploading favicon.ico and forgetting the apple-touch-icon/android-chrome PNGs, leaving home-screen icons looking wrong on mobile.
- Uploading a very low-resolution source image — the 512×512 icon will look soft or pixelated if the original is smaller than that.
- Forgetting to actually add the <link> tags to your page's <head> — the files existing in your project doesn't do anything until a page references them.
- Placing the generated files in the wrong directory — they need to be served from your site's root (e.g. yoursite.com/favicon.ico) unless you update the paths in the snippet to match wherever you put them.
Why Use This Tool
- Generates a real, spec-correct .ico container, not just a renamed PNG.
- Covers every size modern browsers, iOS, and Android actually request, not just the classic 16×16 favicon.
- Non-square sources are centered with transparent padding instead of being distorted.
- Ready-to-paste HTML <head> snippet and site.webmanifest JSON included — no guessing at the right markup.
- One-click "Download all as .zip" bundles every file instead of clicking Download six separate times.