UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

Favicon Generator

Generate PNG and ICO favicons from images

About Favicon Generator

A favicon appears in browser tabs, bookmark lists, iOS home screens, and Android app drawers. Getting it right means producing the correct files at the correct sizes with the correct HTML — not just a 16×16 PNG. Modern coverage requires a multi-resolution .ico file, standalone PNGs at 16, 32, and 48 pixels, an Apple Touch Icon at 180×180 for iOS pinning, and 192×512 PNGs for Android Chrome and PWA manifests. This tool takes one source image and outputs every required size plus the .ico bundle and a copy-ready HTML snippet in one click. Non-square sources are padded to a square canvas with your chosen background colour. Everything generates in your browser tab — no upload, no watermark, no trial limit. The result is a complete favicon package you can drop into any website in under two minutes.

Why use Favicon Generator

Multi-Resolution PNG + ICO

Generates 16×16, 32×32, and 48×48 PNGs plus a multi-resolution favicon.ico that bundles all three sizes in a single file. This combination covers every browser from legacy Internet Explorer to modern Chrome, ensuring your tab icon looks correct on all platforms without separate fallbacks.

Apple Touch Icon (180×180)

Produces apple-touch-icon.png at the 180×180 pixels Apple recommends for iOS home-screen pinning. Safari uses this file when users tap Add to Home Screen, and iOS automatically applies corner rounding — so the source image should use a square canvas without pre-rounded corners to avoid double-clipping.

Android and PWA Icons

Generates 192×192 and 512×512 PNGs required by Android Chrome for home-screen shortcuts and by the Web App Manifest spec for Progressive Web Apps. Includes an example manifest.json snippet showing the correct icons array format to copy into your site's manifest.

HTML Link Tag Snippet

After generation, the tool provides the complete set of link rel icon and link rel apple-touch-icon tags formatted for copy-paste into your HTML head element. No memorising which sizes to declare or what rel attribute values to use for each specific file type — the snippet is ready to use.

Square Crop with Padding

If the source image is not square, the tool centres it on a padded square canvas using your chosen background colour. This prevents logos from being stretched into a different aspect ratio and ensures the icon looks intentional rather than accidentally cropped or distorted.

Browser-Local Generation

All downscaling and ICO packing happens via Canvas in your browser tab — brand logos, unreleased project identities, and client assets stay private. There is no upload, no sign-in, and no watermark — the tool is free and fully functional for anyone who reaches the page.

How to use Favicon Generator

Upload a square or near-square source image — SVG, PNG, or JPG — ideally at least 512×512 pixels for sharp downscaling.
Set a background padding colour for non-square sources; white is the safe default for most logo types.
Click Generate to produce all seven sizes plus the multi-resolution favicon.ico bundle simultaneously.
Preview each output at its actual pixel dimension — verify the 16×16 and 32×32 are legible at tab size.
Download the ZIP containing all assets: favicon.ico, six PNG files, and a manifest.json snippet.
Copy the generated HTML <link> tags and paste them into your website's <head> section.

When to use Favicon Generator

Launching a new website or side project and replacing the default Vite, Next.js, or Create React App favicon with your own.
Completing a web design handoff and packaging the full favicon set for a developer to drop into the project.
Adding a home-screen icon for a PWA or web app that will be installed on iOS and Android devices.
Auditing an existing site and discovering the apple-touch-icon or Android icon is missing or low-resolution.
Rebranding a site and needing to replace all favicon assets from a new logo without a Photoshop subscription.
Building a browser extension that needs a 16×16 and 48×48 icon alongside the standard manifest requirements.

Examples

Logo SVG → full favicon set

Input: logo.svg (12 KB, square)

Output: favicon.ico (15 KB, multi-resolution), favicon-16.png, favicon-32.png, favicon-48.png, apple-touch-icon.png (180×180), android-chrome-192.png, android-chrome-512.png + HTML snippet

Brand letter F → favicon

Input: Letter F PNG: 1024×1024

Output: favicon.ico + 6 PNG sizes + manifest.json snippet

Non-square image padded

Input: Wide logo PNG: 800×400

Output: Centred and padded to 512×512 with white background, then exported in all sizes

Tips

Place favicon.ico at the root of your domain (/favicon.ico) — browsers fetch it automatically even without an HTML <link> tag, which is important for requests from RSS readers and other clients.
Keep the icon mark bold and high-contrast — at 16×16 in a browser tab, fine lines and gradients become indistinct smears. If your logo has a wordmark, use the icon mark alone at favicon sizes.
Do not pre-round the corners on your Apple Touch Icon source — iOS applies automatic corner rounding and a subtle shadow. Adding rounded corners yourself results in double-clipping at the corner edges.
Most modern browsers prefer PNG via <link rel='icon'> over favicon.ico; the .ico file exists mainly as a fallback for legacy Internet Explorer and Edge builds before Chromium.
Your PWA manifest.json needs both the 192×192 and 512×512 entries in its icons array. The tool provides a ready-to-paste manifest snippet showing the correct format for both entries.

Frequently Asked Questions

What size does a favicon need to be?▾

There is no single required size — you need multiple. At minimum: 16×16 and 32×32 PNGs for browser tabs and bookmarks, a 180×180 PNG for iOS home-screen icons, and 192×192 and 512×512 PNGs for Android and PWA manifests. A favicon.ico bundling 16, 32, and 48 provides legacy browser fallback.

Should I use favicon.ico or favicon.png in my HTML?▾

Use both. Declare PNGs via <link rel='icon' type='image/png' sizes='32x32'> for modern browsers, which prefer them. Place favicon.ico at the site root (/favicon.ico) for legacy browser fallback — older browsers fetch it automatically even without an HTML link tag declaring it.

Why do I need an apple-touch-icon?▾

When a user adds your website to their iPhone or iPad home screen, Safari looks for a file named apple-touch-icon.png at 180×180 pixels. Without it, Safari scales down the favicon and applies a low-quality screenshot, which looks unprofessional. The apple-touch-icon receives automatic corner rounding and shadow from iOS.

What's the difference between favicon.ico and the PNGs?▾

favicon.ico is a legacy container format that bundles multiple bitmap sizes in a single file — originally designed for Internet Explorer. Modern browsers strongly prefer PNG favicons declared in HTML, which support transparency and render more crisply. The .ico file is still needed for compatibility with older browsers and tools that fetch /favicon.ico directly.

How do I add the favicon to my website?▾

Copy the generated HTML snippet into the <head> section of every page (or your layout template). Place favicon.ico at the root of your public directory. Put the PNG files wherever your assets folder lives and update the paths in the HTML snippet to match. Most frameworks expect assets in /public or /static.

What about PWA icons — do I need 192 and 512?▾

Yes. The Web App Manifest spec requires a 192×192 icon for Android home-screen shortcuts and recommends 512×512 for high-DPI displays and the Chrome install prompt. The 512 icon also appears in Android's app drawer when the PWA is installed. Both are included in the generated ZIP.

Can I generate from an SVG?▾

Yes. SVG is actually the ideal source because the browser renders it at each target size without upscaling a small raster. Upload your .svg file and the tool rasterises it at each required pixel dimension using the browser's SVG renderer, producing crisp results at all sizes.

Is my source image uploaded?▾

No. All downscaling and ICO packing happens using Canvas in your browser tab. The source file is never sent to any server. This keeps brand logos, unreleased product identities, and client assets entirely private throughout the generation process.

Explore the category

Glossary

favicon.ico: A legacy image container format that bundles multiple bitmap sizes (typically 16×16, 32×32, and 48×48) in a single file. Modern browsers can read .ico files but prefer PNG favicons; the .ico format remains useful as a universal fallback at the site root.
Apple touch icon: A 180×180 PNG that Safari uses as the home-screen icon when a user adds a website to their iOS or iPadOS home screen. Apple automatically applies corner rounding, so the source image should use a square canvas without pre-rounded corners.
Web app manifest: A JSON file (manifest.json) that tells the browser how to install and display a Progressive Web App. The icons array inside the manifest specifies PNG files at 192×192 (home screen shortcut) and 512×512 (install prompt and high-DPI display) that the browser fetches when the user installs the PWA.
Multi-resolution ICO: A favicon.ico file that contains multiple raster images at different sizes embedded in a single file container. When a browser or OS needs a specific size, it picks the nearest embedded size rather than scaling a single image, resulting in sharper rendering at each resolution.
PWA icon: A PNG icon declared in a web app manifest, required for Progressive Web App installation on Android and iOS. The 192×192 variant is used for home-screen shortcuts; the 512×512 variant is used for install prompts and large-icon displays in the Android app drawer.
<link rel="icon">: An HTML element placed in <head> that explicitly declares a favicon file and its size and type to the browser. Modern browsers prefer these declared PNG favicons over the automatic /favicon.ico fetch, enabling separate optimised images for different device pixel ratios.