A favicon is the small square icon that represents your website in browser tabs, bookmarks, history lists and search results. It reinforces your brand and helps users spot your tab among dozens of others. Modern sites ship several sizes plus a touch icon and PWA icons so the same logo looks crisp on every device and surface.

What size should a favicon be?

There is no single size. Use 16x16 and 32x32 for browser tabs and bookmarks, 48x48 for Windows and high-DPI tabs, 180x180 for the Apple touch icon on iOS home screens, and 192x192 plus 512x512 for Android and PWA installs. Our generator builds every size from one upload so each surface gets a pixel-perfect version.

How do I convert a PNG or JPG to an ICO favicon?

Upload your PNG or JPG and the generator packages it into a multi-resolution favicon.ico containing 16x16, 32x32 and 48x48 frames, alongside standalone PNG icons. For the sharpest result, start from a square source at least 512x512 with a transparent or solid background. Everything runs in your browser, so conversion is instant and your file never leaves your device.

What is the difference between a favicon.ico and a PNG favicon?

favicon.ico is a legacy container that bundles several pixel sizes in one file, guaranteeing support in older browsers and the default /favicon.ico lookup. PNG favicons are single-size, lighter, and support sharper alpha transparency for modern browsers. Best practice is to ship both: favicon.ico as the universal fallback and 32x32 and larger PNGs declared in your HTML for crisp rendering.

Why is my favicon not showing up in the browser?

Browsers cache favicons aggressively, so a new icon often hides behind the old one. Do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), then try a private window to bypass the cache entirely. Confirm the file actually exists at the path in your link tag, check there are no 404s in the network panel, and make sure the icon is a valid square image.

How do I add a favicon to my HTML website?

Upload the generated files to your site root, then add link tags inside the : , and . The generator gives you this exact snippet so you can copy and paste it.

How do I add a favicon to a Next.js app?

With the App Router, drop favicon.ico, icon.png and apple-icon.png directly into the app directory and Next.js wires up the correct links automatically — no manual tags needed. For PWA icons, reference 192x192 and 512x512 PNGs in your manifest. In the older Pages Router, add the link tags inside a custom component instead.

How do I add a favicon in WordPress?

Go to Appearance, then Customize, then Site Identity, and upload your icon under Site Icon — WordPress recommends at least 512x512 and generates the smaller sizes for you. The setting also feeds the Apple touch icon. If your theme or a caching plugin overrides it, clear the site cache and your browser cache, then hard refresh to see the new icon.

Can I use an SVG as a favicon?

Yes. Modern browsers including Chrome, Edge, Firefox and Safari support SVG favicons declared with , giving you a resolution-independent icon that stays sharp at any size. Because older browsers and many platforms still ignore SVG, always pair it with a favicon.ico and PNG fallback so every visitor sees an icon.

What favicon sizes do I need for a PWA or Android?

Progressive web apps and Android home screens read icons from your web app manifest. Provide at least a 192x192 PNG for the home screen and a 512x512 PNG for the splash screen and app stores, declared in the manifest icons array with the correct sizes and type. Adding a maskable 512x512 version ensures your logo fills adaptive icon shapes without awkward cropping.

What is an apple-touch-icon and do I need one?

The apple-touch-icon is the 180x180 PNG iOS and iPadOS use when someone adds your site to their home screen, plus other Apple surfaces. Without it, Safari falls back to a blurry screenshot of your page. Add to your and use a solid background, since iOS does not honour transparency here.

How do I create a dark mode favicon?

Use the media attribute on your icon links to serve different files per color scheme: and a second link with the dark variant. This is mainly useful for SVG favicons and lets your logo stay legible against both light and dark browser chrome, such as Safari and some tab themes that tint the background.

Is this favicon generator free, and is my logo uploaded to a server?

It is completely free with no sign-up, watermarks or limits on how many icons you generate. Just as important, every conversion runs 100% in your browser using client-side code — your logo is never uploaded to or stored on any server. That makes it safe for confidential brand assets and unreleased products, and it is why generation is instant even on large images.

What image works best as a favicon?

Pick a square, simple, high-contrast mark that stays recognisable when shrunk to 16x16 pixels. Bold shapes, a single letter or a distinctive symbol read far better than detailed illustrations or small text, which turn into mush at tab size. Start from a large source (512x512 or more), keep generous padding, and test the result against both light and dark tabs.

Professional Tool

Free Favicon Generator — PNG/SVG to ICO, All Sizes

Works with Next.js, WordPress, React & any website

Upload your logo once and instantly generate favicon.ico plus icons for every platform — browser tabs, iOS home screens, Android and PWAs. Everything is produced right in your browser with no upload required.

100% in-browserNo uploadFree foreverAll sizes

Upload Your Logo

Supports PNG, JPG, SVG formats, max 10MB

or drag and drop files here

Everything You Need for Perfect Favicons

One upload generates production-ready icons for every browser, device and platform.

Sharp, High-Quality Scaling

Your logo is resampled at each size with crisp edges, so icons stay clean from tiny 16x16 tabs to large 512x512 PWA tiles.

PNG, JPG & SVG Input

Upload raster or vector source files. SVG keeps your artwork perfectly sharp at every generated resolution.

All Platform Sizes at Once

Generate favicon.ico (16/32/48), apple-touch-icon 180, android-chrome 192 & 512, and mstile 150 in a single click.

Dark Mode Favicon

Provide a dedicated dark-mode favicon so your icon stays legible against dark browser themes and tab bars.

Next.js, WordPress & React Ready

Copy a ready-to-paste HTML snippet and drop the files in — works with any framework, CMS or static site.

100% Private, Zero Upload

All conversion runs locally in your browser. Your logo never leaves your device and nothing is sent to a server.

How to Generate a Favicon

Create every favicon asset in 3 simple steps.

Upload Logo

Upload your logo in PNG, JPG or SVG format

Auto Generation

We automatically generate all required sizes and formats

Download & Use

Download all assets and integration code

How This Generator Compares

See why an all-in-one in-browser generator beats single-format tools and manual editing.

Capability	This Generator	PNG-only Tools	Manual Editing
Runs fully in browser
All sizes in one pass
True multi-size .ico
Apple Touch Icon
PWA / Android icons
Dark mode support
Private, no upload
Free to use

Yes means fully supported, No means unavailable or manual.

Results based on the assets this tool produces and typical limitations of alternative workflows.

New to favicons? Favicon optimization across browsers

Favicon Sizes & Where They Are Used

A complete reference for every icon this tool generates.

Modern sites need several icon sizes so your brand looks sharp everywhere, from browser tabs to mobile home screens.

Size	File	Used For
16x16	favicon.ico	Browser tabs
32x32	favicon.ico	Taskbar & bookmarks
48x48	favicon.ico	Windows site icons
180x180	apple-touch-icon.png	iOS home screen
192x192	android-chrome-192x192.png	Android home screen
512x512	android-chrome-512x512.png	PWA splash & install

The favicon.ico file bundles the 16, 32 and 48 pixel sizes so browsers pick the best one automatically.

What You Get in the Download

A complete, ready-to-deploy favicon package plus the HTML to wire it up.

favicon.ico

Multi-size icon (16/32/48) for browser tabs, bookmarks and Windows.

apple-touch-icon.png

180x180 icon for iOS and iPadOS home screen shortcuts.

android-chrome-192x192.png

192x192 icon for Android home screens and PWA install.

android-chrome-512x512.png

512x512 high-resolution icon for PWA splash screens and stores.

HTML snippet

Copy-paste link tags to reference every icon in your page head.

How to reference your favicons in HTML

Drop the downloaded files at your site root, then add these tags inside the page head so every browser picks the right icon:

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png" />

Frequently Asked Questions

Sizes, formats, installation and caching — everything you need to ship a favicon that works everywhere.

Related Tools

Logo Maker

Create a text or icon logo free, then generate favicons and app icons in one click.

Favicon Checker

Test and validate your website favicon across all platforms

PNG to ICO Converter

Convert PNG images to ICO favicon format

Want to go deeper?

Favicon optimization across different browsers