Favicon Generator
Generate favicon.ico files, PNG favicon icons, and complete favicon ZIP packages instantly online.
Why a Favicon Pack Needs So Many Different Files
A single PNG isn't enough because every platform that displays your icon expects a specific format and pixel size, and gracefully falls back to a generic placeholder if the file it's looking for isn't there.
What Each File in the Pack Is Actually For
favicon.ico is the oldest and most universally supported format — it's actually a small container that can hold several resolutions (16×16, 32×32, and sometimes 48×48) inside one file, and the browser picks whichever size fits the context (tab icon vs. bookmark). This is why favicon.ico still exists alongside PNGs even though ICO is a much older format.
favicon-16x16.png and favicon-32x32.png serve modern browsers directly at the exact pixel size they need, avoiding the (very minor) overhead of decoding an ICO container — most current browsers prefer these PNGs over the .ico file when both are present.
apple-touch-icon.png (typically 180×180) is what iOS uses when someone adds your site to their home screen — it needs to be larger and usually without transparency, since iOS applies its own rounded-corner mask and would show a transparent background as a visible hole in the icon otherwise.
android-chrome-192x192.png and -512x512.png are used by Android's home screen shortcuts and by Progressive Web App install prompts — the 512×512 version specifically is used for the splash screen Android shows briefly while a PWA is loading.
site.webmanifest is a small JSON file (not an image) that tells browsers which of the above icons to use for which purpose, along with your site's name and theme color — it's what makes "Add to Home Screen" behave correctly rather than falling back to a generic screenshot icon.
Designing a Logo That Still Reads at 16×16 Pixels
Simplify before you upload
A detailed logo with fine text or thin linework will turn into an unrecognizable blur at 16×16 pixels — the size most browser tabs actually display. If your full logo has a wordmark plus an icon or symbol, upload just the symbol/monogram for the favicon, not the whole lockup.
Use a square, centered subject
Non-square source images get letterboxed or cropped unpredictably when forced into square icon sizes. Starting from an already-square image with your subject centered and filling most of the frame produces the most consistent result across every size in the pack.
High contrast beats subtle gradients
Soft gradients and low-contrast color pairs (light gray on white, for example) tend to disappear entirely at browser-tab size. Bold, high-contrast shapes remain identifiable even when scaled down to a handful of pixels.
Consider transparency carefully
Transparent backgrounds work well for the browser-tab favicon (which sits on a colored tab bar) but can look broken as an Apple touch icon, since iOS doesn't render your transparency the way a browser tab does — it's worth checking the preview of each generated size before publishing.
How to Use the Favicon Generator
Upload Your Image
Upload your company logo, icon, or image from your device.
Generate Favicons
The tool automatically generates favicon.ico and multiple favicon sizes instantly.
Download Package
Download the complete favicon package ready for website integration.
Add to Website
Upload the generated favicon files to your website and browser configuration.
Adding the Files to Your Site
For a standard HTML website, upload every file from the ZIP to
your site's root folder, then add link tags inside your page's
<head> section referencing each file — most
browsers will pick up favicon.ico automatically from the root even
without an explicit link tag, but PNG and Apple touch icon
variants need to be explicitly declared to be used.
For WordPress, the simplest route is uploading the square source image (not the ZIP) as your "Site Icon" under Appearance → Customize, since WordPress generates its own set of sizes automatically from that one image — you generally don't need to manually place the individual files from this tool's ZIP on a WordPress site.
For platforms like Shopify, Wix, or Squarespace, look for a "favicon" upload field in the site's general or SEO settings — most only accept a single square image and generate their own variants internally, similar to WordPress.
Frequently Asked Questions
Explore More SA Tools
Discover more free online tools for productivity, PDFs, images, calculations, SEO and daily tasks.