What size should a favicon PNG be?

For best results, use a square PNG of at least 256×256 pixels. The converter will resize it to all required favicon sizes (16, 32, 48, 64, 128, 256px). A larger source image produces sharper results at small sizes.

How do I use the downloaded favicon.ico on my website?

Upload favicon.ico to your website root directory, then add this tag to your HTML head: . For modern browsers, also add or a 32px PNG for better quality.

Does the ICO file contain multiple sizes?

Yes. The generated ICO contains 6 sizes: 16×16, 32×32, 48×48, 64×64, 128×128, and 256×256 pixels. Browsers automatically select the most appropriate size based on display context.

Can I use a JPG or WebP image to create a favicon?

Yes. The tool accepts PNG, JPG, and WebP images. For logos with transparent backgrounds, use a PNG source — transparency is preserved in the ICO output.

PNG to ICO Converter — Favicon Generator

Create a favicon.ico from any PNG, JPG, or WebP — 6 sizes included, free, 100% in your browser

Drop image here or click to upload

JPG, PNG, WebP, HEIC — max 20MB

You can also paste an image (Ctrl+V)

⚡ Generated in seconds·🔒 Images never leave your device·✓ Free, no sign-up

What Is a Favicon and Why Does It Matter?

A favicon is the small icon that appears in browser tabs, bookmarks, and search results next to your site name. It is one of the first visual identifiers users see — a missing or blurry favicon signals an unfinished or unprofessional site. Modern browsers automatically look for a /favicon.ico file at your domain root.

The ICO format is a container that holds multiple image sizes in a single file. Browsers select the most appropriate size for the context — 16×16 for browser tabs, 32×32 for taskbars, 48×48 for shortcuts, and 256×256 for high-DPI displays. The generated ICO from this tool contains all six standard sizes.

Favicon Sizes — What Is Included

Size	Used by	Context
16×16 px	All browsers	Browser tab, address bar
32×32 px	Chrome, Firefox, Edge	Taskbar pinned site, Windows shortcuts
48×48 px	Windows	Desktop shortcut, Start menu
64×64 px	Windows, high-DPI	Large icon views, HiDPI tab
128×128 px	Chrome Web Store	App store listings
256×256 px	Windows 7+, modern OS	Large icon view, 2× HiDPI

How to Add a Favicon to Your Website

After downloading favicon.ico, upload it to the root of your website and add the following to your HTML <head>:

<!-- Standard favicon (all browsers) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- Modern browsers: prefer SVG or PNG over ICO -->
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">

<!-- Apple touch icon (iOS home screen) -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">

For most sites, placing favicon.ico in the root directory is sufficient — browsers look for it automatically even without the <link> tag.

Best Practices for Favicon Design

Use a square source image

ICO requires square sizes (16×16, 32×32, etc.). A square source fills each size without cropping or padding. Non-square images are scaled to fit.

Minimum 256×256 px source

Starting from a larger source produces sharper downscaled results. Upscaling a 16×16 image to 256×256 produces a blurry favicon.

Simple designs work best

At 16×16 px, fine details disappear. Use bold shapes, high contrast, and minimal detail. A simple letter, symbol, or logo mark works better than a complex illustration.

Use PNG with transparency

PNG supports transparency, which is preserved in the ICO output. A transparent favicon adapts to different browser themes (light/dark mode tab bars).

Test at 16×16 px

Design for 16×16 first. Most users will see your favicon at this size in browser tabs. Zoom in to 16×16 in your design tool to preview.

High contrast colors

Low contrast icons become invisible against browser UI. Use high-contrast colors or a solid background that stands out on both light and dark themes.

Adding Favicon to Specific Platforms

Next.js

Place favicon.ico in the /app directory (Next.js 13+) or /public directory (older). Next.js automatically serves it at /favicon.ico.

WordPress

Go to Appearance → Customize → Site Identity → Site Icon. Upload your PNG or ICO. WordPress resizes it automatically for all contexts.

Shopify

Go to Online Store → Themes → Customize → Theme Settings → Favicon. Upload a square PNG (512×512 recommended). Shopify generates ICO internally.

Squarespace

Design → Browser Icon (Favicon). Upload a square image — Squarespace crops to square if needed.

Related Tools

SVG to PNG — convert vector logo to PNG before creating ICO
Crop image — crop to square before converting to ICO
PNG to JPG — convert PNG to JPEG for photos
Resize image — resize to specific pixel dimensions
Compress image — reduce PNG file size before creating ICO

Frequently Asked Questions

What size should I make my favicon PNG?▼

Use a square PNG of at least 256×256 pixels. Larger source images (512×512 or 1024×1024) produce sharper results when downscaled to 16×16. The converter handles all size generation automatically.

Does the ICO contain all 6 sizes automatically?▼

Yes. The generated ICO file contains 6 sizes: 16×16, 32×32, 48×48, 64×64, 128×128, and 256×256 pixels. Browsers and operating systems select the most appropriate size for their context automatically.

How do I install the favicon on my website?▼

Upload favicon.ico to your website root directory. Browsers look for /favicon.ico automatically. Optionally add <link rel="icon" href="/favicon.ico"> to your HTML head for explicit control.

Can I use a JPG or WebP image instead of PNG?▼

Yes. The tool accepts PNG, JPG, and WebP images. For logos with transparent backgrounds, use a PNG — transparency is preserved in the ICO output. JPEG does not support transparency.

Why does my favicon look blurry in the browser tab?▼

At 16×16 pixels, complex designs with fine details lose clarity. Use a simpler design with high contrast and bold shapes. Also verify your source image is at least 256×256 pixels for clean downscaling.

Are my images uploaded to a server?▼

No. All ICO generation happens entirely in your browser. Your files never leave your device.