Favicon Generator

The Favicon Generator turns any image into a complete set of favicon PNGs for browser tabs, iOS home screens, Android devices, and PWAs, and hands you the HTML snippet that wires them up. It is built for site owners and developers who want a polished tab presence without resizing one logo six times by hand.

What the Tool Produces

Upload a single image and the tool generates six square PNGs at the sizes that matter today:

Size	Typical use
16x16	Browser tab icon
32x32	Retina tab and bookmark icon
48x48	General-purpose desktop fallback
180x180	Apple touch icon for iOS home screens
192x192	Android home-screen and PWA icon
512x512	PWA splash screen and store listing

Each size is rendered live in a preview grid, so you can see exactly how the artwork holds up before you download anything. Every card has its own download button, and a separate panel shows the ready-to-paste HTML.

The crop is a center square. If the source is wider than it is tall, equal strips are trimmed from the left and right; if it is taller, strips come off the top and bottom. The crop origin is computed with a floor, so odd-pixel dimensions round toward the top-left by one pixel.

Step by Step

1. Open or drop an image. Click the dashed drop zone to browse, or drag a file onto it. Formats the browser can decode — PNG, JPEG, WebP, GIF, and SVG — all work.
2. Check the preview grid. Compare the smallest 16x16 against the 512x512. If the small one is an unreadable smudge, simplify the artwork before continuing.
3. Download each size. Use the button under each preview. Remember that the three largest files share the name apple-touch-icon.png, so rename the 192 and 512 after saving.
4. Copy the HTML snippet. The copy button on the code panel places the whole block on your clipboard.
5. Place files and paste the snippet. Put the PNGs in your site root and paste the snippet into the <head> of every page, preferably just before </head>.

The HTML Snippet and File Naming

The generated block is a summary of what each platform expects, not a mystery incantation:

• Three <link rel="icon" type="image/png"> tags cover the 16, 32, and 48 pixel sizes.
• <link rel="apple-touch-icon" sizes="180x180"> tells iOS which image to use when someone adds your site to the home screen.
• The 192 and 512 Android icons use rel="icon".
• <link rel="mask-icon"> points at a Safari pinned-tab SVG, which this tool does not generate.
• <link rel="manifest"> points at a web app manifest, also not generated here.
• The two msapplication-* metas set a Windows tile color and an optional config file.
• <meta name="theme-color"> tints the browser UI on mobile; white is a safe default but you should match your brand.

If you already use a framework that injects favicons, keep only the lines you need rather than pasting the whole block.

The snippet assumes specific filenames. Download the 16, 32, and 48 PNGs as favicon-16x16.png, favicon-32x32.png, and favicon-48x48.png. The 180px download is already named apple-touch-icon.png. Rename the 192px and 512px downloads to android-chrome-192x192.png and android-chrome-512x512.png. Without that rename, your layout will reference files that do not exist and the 404s will show up in the console.

Two referenced assets are simply out of scope: the Safari mask icon SVG and the web manifest. Create them separately if you want pinned-tab styling or PWA installability, or delete those lines.

Designing a Readable Favicon at 16px

The 16x16 favicon is the hardest test, and detailed logos almost always fail it. A few rules help:

• Use a simple silhouette with one or two shapes; drop taglines and small text entirely.
• Keep strong contrast between the mark and its background. Thin gray lines vanish at tab size.
• Test the mark on both light and dark tab bars, since browsers vary.
• If your logo includes a wordmark, use just the symbol for the favicon.
• Transparency works on modern browsers, but some Android and iOS contexts place the icon on their own background, so check the 180 and 192 variants carefully.

Limitations to Know

The tool generates PNG only — no ICO, SVG, or web manifest. It offers no padding, background color, or per-size repositioning, so a logo that fills the whole canvas will lose its edges to the center crop. The HTML snippet is labeled for “Your Site” in a comment and does not include your real domain; adjust the paths if you host assets under a subdirectory rather than the root. Everything is rendered client-side, so very large source images may be slow to process but are never uploaded.

Testing and Deploying the Set

After the files are in place, favicons can appear stale because browsers cache them aggressively. Hard-refresh the page, or open it in a private window, to see the new icons instead of the old cached ones. The tab icon and the bookmark icon are cached separately, so check both. On iOS, add the site to the home screen to confirm the apple-touch-icon renders without a screenshot fallback. For Android and PWA installs, use the browser’s install prompt and inspect the manifest in developer tools to make sure the 192 and 512 files resolve.

Serve the icons from the site root at stable paths so the snippet works on every route, including nested pages. If your build pipeline hashes filenames, exclude the favicon files or update the snippet paths accordingly, because a hashed favicon-16x16.abc123.png will not be found at /favicon-16x16.png. Finally, set the theme-color meta to your brand color rather than leaving the default white — it tints the mobile browser address bar and is one of the few favicon-adjacent settings users notice.

Related Tools

• Image Cropper
• Image Format Converter
• Meta Tag Generator