How do I convert a PNG to a favicon?

Upload your PNG, choose how it should fit the square, and download a favicon package with favicon.ico and every PNG size. It all runs in your browser.

Does this upload my image to a server?

No. Your image is decoded and resized in your browser with the Canvas API. The file never leaves your computer.

What image formats can I convert?

PNG, JPG, WebP, and SVG. SVG is rendered to a high-resolution master before being resized to each size.

What size should my source image be?

A square image of at least 512x512 gives the best result. Non-square images can be fit with contain, cover, or stretch.

Why does my small favicon look blurry?

Detailed images lose clarity at 16x16. This converter downsamples in steps to stay sharp, but simple, high-contrast artwork always reads best at tiny sizes.

Browser-based image to favicon converter

Convert an Image to a Favicon

Upload a PNG, JPG, WebP, or SVG and download a complete favicon package — favicon.ico, every PNG size, Apple and Android icons, and a manifest. Your image is processed in your browser and never uploaded.

TextImage

Drop an image here, or choose a file

PNG, JPG, WebP, or SVG · up to 5 MB · processed in your browser

No image yet.

Choose or drop an image above to see a live preview and download options.

Complete favicon package

favicon.ico plus every PNG size, generated locally.

Where to put files

Place all generated files in your website public root.

Install code

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

AI install prompt

You are working in my web project. Add the favicon package I downloaded.

Target stack: HTML

Tasks:
1. Identify the actual project structure before editing.
2. Place favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png, android-chrome-512x512.png, and site.webmanifest according to this rule: Place all generated files in your website public root.
3. Add the required favicon metadata or <link> tags for the target stack.
4. Preserve existing unrelated metadata and links.
5. Verify that /favicon.ico and /site.webmanifest are reachable after running the dev server.
6. Tell me exactly which files were changed.

Reference install code:
<!-- Add these tags inside <head> -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

Does it upload my image?

No. Unlike most online converters, this tool decodes and resizes your image directly in your browser with the Canvas API. The file never leaves your computer, and nothing is stored on a server.

Frequently Asked Questions

How do I convert a PNG to a favicon?: Upload your PNG, choose how it should fit the square, and download a favicon package with favicon.ico and every PNG size. It all runs in your browser.
Does this upload my image to a server?: No. Your image is decoded and resized in your browser with the Canvas API. The file never leaves your computer.
What image formats can I convert?: PNG, JPG, WebP, and SVG. SVG is rendered to a high-resolution master before being resized to each size.
What size should my source image be?: A square image of at least 512x512 gives the best result. Non-square images can be fit with contain, cover, or stretch.
Why does my small favicon look blurry?: Detailed images lose clarity at 16x16. This converter downsamples in steps to stay sharp, but simple, high-contrast artwork always reads best at tiny sizes.