Skip to content
TryImager

Favicon Generator: Create ICO, PNG, Apple Touch & PWA Icons

Turn any square logo, PNG cutout, JPG graphic, WebP asset, or sanitized SVG into a complete website favicon package. Generate a genuine binary multi-resolution favicon.ico (16×16, 32×32, 48×48), crisp PNG icons up to 512×512, an iOS Apple Touch icon (180×180), a ready-to-paste HTML <head> snippet, and a site.webmanifest file—all packaged locally in your browser.

Loading favicon generator…

Your source graphic is rasterized and packaged into PNG, ICO, and ZIP files locally inside your browser on your own device and is never uploaded to a server.

How to generate a complete website favicon package

  1. 1Upload a square PNG, JPG, WebP, or SVG logo (at least 512×512 pixels is recommended so every icon size stays crisp).
  2. 2Configure optional canvas styling: keep transparency or fill a solid background color, add safe inner padding (0%–25%), or round the icon corners.
  3. 3Preview how your favicon looks inside a simulated Browser Tab and Bookmark Bar on both Light and Dark themes, and inspect the 8 rendered sizes from 16×16 to 512×512.
  4. 4Select the specific icon dimensions you need (16×16, 32×32, 48×48, 64×64, 128×128, 180×180, 192×192, 512×512) or leave all 8 sizes enabled.
  5. 5Download the complete ZIP package (containing favicon.ico, PNG icons, site.webmanifest, and HTML instructions) or download individual files, then copy the HTML <head> tags into your website.

Key features of the TryImager Favicon Generator

Genuine binary multi-size .ico encoder (not a renamed PNG)

Constructs a spec-compliant Windows ICONDIR binary header (00 00 01 00) and 16-byte ICONDIRENTRY directory table embedding 16×16, 32×32, and 48×48 32-bit RGBA frames, verified automatically before download.

All 8 standard web, iOS, and Android PWA icon sizes

Generates 16×16, 32×32, 48×48, 64×64, 128×128, 180×180 (apple-touch-icon.png), 192×192 (android-chrome-192x192.png), and 512×512 (android-chrome-512x512.png) in one pass.

Live light and dark mode browser tab preview

Shows your actual 16×16 and 32×32 rendered favicon inside simulated light and dark browser tabs before you download, catching dark logos that disappear against dark browser chrome.

One-click ZIP archive, HTML <head> snippet & site.webmanifest

Packages every generated asset into a single client-side ZIP download alongside custom-configured HTML <link> tags and a valid W3C Web App Manifest.

When to use the Favicon Generator

  • Launching a new website, SaaS app, or documentation portal that needs a complete set of root /favicon.ico, PNG icons, and mobile home-screen icons.
  • Converting a transparent vector logo using the built-in sanitizer (or after checking it in SVG to PNG) into a multi-resolution favicon.ico that legacy tools and RSS readers expect.
  • Fixing a dark brand mark that turns invisible in dark-mode browser tabs by adding a contrasting background fill and rounded corners before exporting.
  • Preparing 192×192 and 512×512 progressive web app (PWA) icons and a matching site.webmanifest file for Android home screen installation.
  • Cropping a non-square graphic first with Crop Image and then generating all required icon sizes in one ZIP bundle.

Supported input formats and generated output files

You can start from a raster image or a clean vector SVG. If your source logo has extra whitespace around it, trim it first with Crop Image so the 16×16 tab icon remains legible.

  • Accepted source files: PNG (image/png), JPG / JPEG (image/jpeg), WebP (image/webp), and sanitized SVG (image/svg+xml).
  • Generated binary ICO: favicon.ico containing 16×16, 32×32, and 48×48 32-bit RGBA frames with verified ICONDIR headers.
  • Generated PNG icons: favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, favicon-64x64.png, favicon-128x128.png, apple-touch-icon.png (180×180), android-chrome-192x192.png, and android-chrome-512x512.png.
  • Generated configuration files: site.webmanifest (JSON) and favicon-head-snippet.html.

Recommended favicon sizes, formats and how ICO files work

A favicon (short for 'favorites icon') is the small visual identifier browsers display in tabs, address bars, bookmark menus, history lists, search engine results, and mobile home screens. Because a single 16×16 image looks blurry on a 512×512 PWA splash screen—and a 512×512 PNG wastes bandwidth when a browser only needs a 16×16 tab icon—modern websites serve a coordinated set of files.

The classic .ico format is a container directory rather than a single bitmap. Its first 6 bytes (ICONDIR) declare how many images are inside, followed by a 16-byte directory entry (ICONDIRENTRY) for each resolution pointing to the exact byte offset of its image data. Renaming a single PNG file to favicon.ico is a common mistake that causes older parsers and command-line tools to fail header validation. This generator writes a genuine multi-frame binary ICO header and verifies every byte offset before enabling the download.

Difference between ICO, PNG, and Apple Touch icons

favicon.ico (with 16×16, 32×32, and 48×48 frames) sits at the root of your domain (/favicon.ico) as the universal fallback for desktop browsers, crawlers, and non-HTML routes like PDFs. PNG favicons (16×16 and 32×32) are linked explicitly in <head> for crisp alpha transparency. apple-touch-icon.png (180×180) is used by iOS and iPadOS Safari when a visitor saves your site to their home screen, while 192×192 and 512×512 PNGs are referenced inside site.webmanifest for Android and desktop PWAs.

How to install a favicon package on your website

Extract the downloaded ZIP archive into your website's public root directory (for example, /public in Vite, Next.js, Astro, or TanStack Start so the files resolve at https://example.com/favicon.ico and https://example.com/apple-touch-icon.png). Then paste the generated <link> tags inside your root document <head>.

Practical favicon configuration examples

Below are the three core deliverables generated by this tool and how each size serves a specific browser or operating system surface:

Minimal Modern HTML <head> Favicon Setup

Covers desktop tabs, Google Search results (48×48), iOS home screens, and Android PWAs.

  • <link rel="icon" href="/favicon.ico" sizes="48x48" />
  • <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" />

Size-by-Size Role Matrix (16×16 to 512×512)

Why each generated resolution is included in the complete package.

  • 16×16 & 32×32: Standard 1x and Retina 2x desktop browser tabs and bookmark bars.
  • 48×48 & 64×64: Windows desktop shortcuts, reading lists, and Google Search site icons (which require multiples of 48px).
  • 128×128 & 180×180: Chrome Web Store tiles and iOS/iPadOS Apple Touch home-screen icons.
  • 192×192 & 512×512: Android Chrome home-screen icons and PWA splash screens via site.webmanifest.

Browser compatibility and practical limitations

  • Aggressive browser favicon caching: Browsers cache /favicon.ico heavily and may not show your updated icon immediately on localhost or after deployment. Open a private window or append a version query string (such as href="/favicon.ico?v=2") when replacing an existing site icon.
  • Fine detail loss at 16×16 pixels: A 16×16 grid contains only 256 pixels total. Full company wordmarks or intricate illustrations become illegible at that scale; use a single bold lettermark or simplified symbol instead.
  • iOS opaque background behavior: iOS Safari automatically fills transparent regions of apple-touch-icon.png with solid black on the home screen. If your logo is dark, enable a light or brand-colored background fill in the generator settings.
  • SVG sanitization scope: External web fonts (@import) or linked external images inside an SVG will not load during offline canvas rasterization; convert text to outlines in your vector editor before exporting the SVG.

What happens to your file

Image decoding, SVG XML sanitization, multi-size HTML5 Canvas rendering, binary ICO container assembly, and PKZIP archiving all run in this browser tab's memory. No logo, icon, or manifest file is uploaded to a remote server. Closing or refreshing the tab clears the generated preview buffers, while downloaded ICO, PNG, or ZIP packages stay on your device.

Accepts PNG, JPG, JPEG, WebP, and SVG files up to 25 MB. SVG uploads are parsed and sanitized locally (removing script tags, foreignObject elements, and external URLs) before rendering.

Full details are in the Privacy Policy.

Troubleshooting favicon generation and display

Why does my new favicon not appear in Chrome after I upload it to my server?

Chrome caches favicons in a separate local database that ignores normal page refreshes. Test your site in an Incognito window or add a query parameter like ?v=2 to your <link rel="icon"> href attributes to force browsers to fetch the new file.

Why does my logo look squashed or tiny inside the 16×16 preview?

If the source image is rectangular (for example, a wide 600×150 header logo), fitting it inside a 16×16 square leaves only 4 vertical pixels for the lettering. Crop the icon mark into a 1:1 square using Crop Image first.

Why did my SVG file show an error during upload?

For security, the SVG parser rejects malformed XML and strips <script> or <foreignObject> elements. Export a standard SVG 1.1 file from Figma, Illustrator, or Inkscape, or rasterize it with the SVG to PNG converter.

To sample the exact HEX theme color from your logo for your web manifest and browser toolbar tags, use Image Color Picker.

Frequently asked questions

What size image should I upload to generate a favicon?

Start with a square (1:1 aspect ratio) PNG or SVG at 512×512 pixels or larger. Starting at 512×512 ensures the largest PWA splash icon is sharp and every smaller size (192×192, 180×180, 48×48, 32×32, and 16×16) is cleanly downsampled without upscaling blur.

Does this generator create a real .ico file or just a renamed PNG?

It creates a genuine binary Windows ICO file. The generator writes a 6-byte ICONDIR header and 16-byte ICONDIRENTRY directory entries containing embedded 16×16, 32×32, and 48×48 frames, and runs a binary header verification check before download.

Do I still need favicon.ico if modern browsers support PNG and SVG favicons?

Yes. Many browsers, RSS readers, bookmark managers, and web crawlers still request /favicon.ico automatically whenever someone views a direct PDF, image URL, or error page that lacks HTML <link> tags. Including both favicon.ico and PNG icons gives complete compatibility.

What is apple-touch-icon.png and why is it 180×180?

apple-touch-icon.png is the icon iPhones and iPads display when a user taps 'Add to Home Screen' in Safari. Apple's Retina displays expect a 180×180 pixel PNG for crisp rendering on the home screen grid.

Are my uploaded logos sent to an external server?

No. Every icon size, the binary .ico file, the site.webmanifest JSON, and the downloadable .zip archive are generated locally inside your browser using HTML5 Canvas and JavaScript typed arrays.

Why does Google Search require a 48×48 favicon?

Google Search documentation specifies that website favicons shown in search result snippets must be a multiple of 48px square (such as 48×48, 96×96, or 144×144) or a multi-size .ico containing a 48×48 frame. Our generator includes 48×48 both inside favicon.ico and as a standalone PNG.

Where should I place the generated favicon files on my website?

Place favicon.ico, apple-touch-icon.png, the PNG icons, and site.webmanifest in the root of your public static directory (so https://yourdomain.com/favicon.ico loads directly), then paste the generated <link> tags inside the <head> of your HTML layout.

How can I make a dark logo visible in dark-mode browser tabs?

Use the Background Mode control in the generator to switch from Transparent to Solid Fill (for example, white or a light brand tint), add 10%–15% padding, and round the corners. Check the Dark Browser Tab preview before downloading.

What is site.webmanifest and why is it included in the ZIP download?

site.webmanifest is a JSON file that tells Android Chrome and desktop Progressive Web Apps which 192×192 and 512×512 icons, app name, and theme colors to use when a visitor installs your website to their home screen or app launcher.

When not to use this

Avoid turning a wide horizontal wordmark or detailed photograph into a 16×16 favicon; tiny browser tabs only have room for a single bold letter or symbol.

Do not rename a PNG file to favicon.ico manually—use the genuine binary .ico download from the package so legacy desktop parsers read the directory header properly.

Related tools

Related guides