Image

Favicon Generator

Generate PNG and ICO favicons from images

Loading interactive tool…

Embed this tool on your site

About this tool

A favicon appears in browser tabs, bookmark lists and history menus, and at 16 or 32 pixels every detail counts. This tool turns one image into a single favicon file quickly. Choose an image, pick a size from 16×16, 32×32 (the default), 48×48, 64×64 or 128×128, and a pixelated, enlarged preview shows exactly how the downscaled icon will look. Download it as favicon.png, or as favicon.ico — a standard ICO container holding that one PNG image, which browsers fetch automatically from /favicon.ico. The image is drawn straight into a square, so start from a square logo or icon mark; wide or tall images are stretched to fit. For a full set of sizes (including the 180 px Apple Touch Icon and 192/512 px Android icons) in a ZIP, use the Favicon Set Generator instead. Everything runs in your browser tab — no upload, no watermark, no trial limit.

Why use it

  • PNG or ICO in One Click: Save the same icon as favicon.png for <link rel="icon"> tags or as favicon.ico for the /favicon.ico path that browsers request automatically.

  • Five Common Sizes: 16×16 and 32×32 cover browser tabs and bookmarks, 48×48 suits Windows shortcuts and extensions, and 64×64 or 128×128 give a larger icon for high-DPI displays and app listings.

  • Pixel-Accurate Preview: The preview canvas is shown enlarged with pixelated scaling, so you see the real pixels of a 16×16 icon instead of a smooth blow-up — the honest way to judge legibility.

  • Instant Updates: Changing the size redraws the preview straight away, so you can compare how your logo survives at 16 versus 32 pixels before downloading.

  • 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.

How to use

  1. Choose a square source image (PNG, JPG, SVG or WebP) with the Image file picker — ideally at least 512×512 for sharp downscaling.
  2. Pick a favicon size from the Size menu: 16, 32, 48, 64 or 128 pixels (32×32 is the default).
  3. Check the enlarged, pixelated preview to make sure the icon is still legible at that size.
  4. Click Download PNG to save favicon.png, or Download ICO to save favicon.ico.
  5. Repeat with another size if you need more than one, then upload the files to your site's root or assets folder.

When it helps

  • Launching a new website or side project and replacing the default Vite, Next.js, or Create React App favicon with your own.
  • Needing a single favicon.ico for the site root of a static site, docs page or internal tool.
  • Checking how a logo reads at 16×16 before committing to it as a tab icon.
  • Building a browser extension that needs a 16×16, 48×48 or 128×128 PNG icon.
  • Making a quick 32×32 PNG icon for a bookmarklet, dashboard tile or local dev server.

Examples

Logo SVG → tab icon

Input

logo.svg (12 KB, square), Size 32x32

Expected result

favicon.png (32×32) or favicon.ico containing one 32×32 image

Brand letter F → small favicon

Input

Letter F PNG: 1024×1024, Size 16x16

Expected result

16×16 favicon.ico for the site root

Extension icon

Input

Square icon PNG: 512×512, Size 128x128

Expected result

128×128 favicon.png ready to rename for a browser extension manifest

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.
  • Start from a square image — this tool stretches non-square sources to fit, so crop first if your logo is wide.
  • 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.
  • Need Apple Touch and Android icons too? The Favicon Set Generator exports 16 to 512 px PNGs in one ZIP with an HTML snippet.

Frequently Asked Questions

What size does a favicon need to be?
There is no single required size. 16×16 and 32×32 cover browser tabs and bookmarks, which is why 32×32 is this tool's default. Home-screen icons need larger files (180×180 for iOS, 192×192 and 512×512 for Android), which this tool does not produce — the Favicon Set Generator does.
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.
Does the ICO contain several sizes?
No. The downloaded favicon.ico contains exactly one image at the size you selected, stored as PNG inside the ICO container. That is enough for browsers; if you want separate sizes, download each one as its own file.
What's the difference between favicon.ico and the PNGs?
favicon.ico is a legacy container format that can bundle bitmap images 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 useful for older browsers and tools that fetch /favicon.ico directly.
How do I add the favicon to my website?
Place favicon.ico at the root of your public directory, and put favicon.png wherever your assets live. Then add a tag such as <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png"> to the <head> of your layout. Most frameworks serve static files from /public or /static.
What happens if my image is not square?
It is stretched to fill the square, which distorts wide or tall logos. Crop the image to a square first (for example with the Image Crop tool) or use just the icon mark from your logo.
Can I generate from an SVG?
Yes, as long as your browser can open the SVG as an image. It is drawn at the chosen pixel size by the browser's SVG renderer, so you get crisp edges without upscaling a small raster.
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

Favicon Set Generator Upload an image and generate a complete favicon set (16px to 512px) with HTML snippet. Download as ZIP. Image Rotate Tool Rotate images 90° CW, 90° CCW, or 180° in your browser. Canvas-based, instant PNG download. Simple Collage Grid Maker Combine multiple images into a grid collage in your browser. Pick a layout, set padding and background, download as PNG. Face Blur — Auto Detect & Blur Faces Automatically detect and blur faces in images using AI. Add manual regions. Download anonymized PNG. Raster to Vector Converter Convert PNG, JPG, or GIF images to scalable SVG vectors in your browser. Adjust colors, smoothness, and download. Convert Images to JPG in Bulk Convert many images between JPG, PNG, and WebP and download as a ZIP
Image Formats Explained: JPEG, PNG, WebP, AVIF, GIF Compared Choosing the wrong image format can double your page weight or break compatibility in older browsers. This guide cuts through the noise with Apr 2026 · 9 min WebP: Why You Should Switch from JPEG and PNG Today WebP typically achieves 25-35% smaller file sizes than JPEG at equivalent quality, and browser support is now essentially universal. The cas Apr 2026 · 8 min

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.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities