Favicon Generator: How to Create a Favicon from a PNG

Every website needs a favicon. It is the small square icon that appears in browser tabs, the bookmarks bar, browser history, and on the iOS or Android home screen when a visitor saves a shortcut to your site. It also appears in Google Search results next to your site name — a detail that affects how your brand looks to anyone who finds you through organic search. Without a favicon, browsers fall back to a generic blank-page icon that makes even a polished site look unfinished. If you already have a logo as a PNG, a favicon generator turns it into a working favicon.ico in under a minute, with no install and no account required.

What favicon sizes do you actually need?

There is no single universal favicon size because different contexts pull different resolutions from the same set of files. The practical set covers six sizes:

Size	Format	Use case
16×16	ICO / PNG	Browser tab strip, address bar
32×32	ICO / PNG	Taskbar shortcut, tab on high-DPI screens
48×48	ICO	Windows desktop shortcut
180×180	PNG	Apple touch icon — iOS home screen
192×192	PNG	Android home screen shortcut via web manifest
512×512	PNG	Android splash screen via web manifest

The favicon size you start from matters. Always work from a large square source — 512×512 or bigger — so every smaller size scales down cleanly. Scaling up from a 16×16 thumbnail creates blur that no amount of sharpening fixes.

For most sites, the ICO file handles the 16×16, 32×32, and 48×48 layers in one container. The 180×180, 192×192, and 512×512 sizes are separate PNGs referenced in HTML or a web manifest.

ICO vs PNG vs SVG

All three formats work as favicons for a website. The right answer is to use more than one.

ICO is a Microsoft container format that bundles multiple sizes into a single file. Drop favicon.ico into the root of your domain and every browser — including older ones — finds it automatically without any HTML markup. One file, zero configuration.

PNG is supported by all modern browsers when declared with a <link> tag. It is the only format that works for Apple touch icons and Android manifest icons. PNG also preserves full alpha channel transparency, so your icon looks clean against any tab background color.

SVG is a vector format supported by Chrome, Firefox, and Edge. Because it scales to any resolution without pixelation, a single SVG file covers every display density. SVG also supports embedded prefers-color-scheme media queries, which lets the favicon switch automatically between a dark and light version. Safari still does not support SVG favicons, so SVG cannot replace ICO — but it is a strong complement.

Practical recommendation: ship favicon.ico (containing 16×16, 32×32, 48×48) as the fallback, add an SVG for modern browsers and dark mode, and include a 180×180 PNG for Apple touch icon. That combination covers every major browser and device.

How to create a favicon from a PNG

The following steps walk through creating a favicon for a website using the PNG to ICO converter at privateconvert.org. The tool runs entirely in your browser — the file never leaves your device, there is no account to create, and no watermark is added to your output.

1. Prepare your source PNG. Use a square image at 512×512 pixels or larger. If your logo is a horizontal wordmark, crop to just the symbol or first initial — wordmarks become unreadable at 16 pixels wide. Make sure the PNG has a transparent background if you want the icon to look clean against any tab color.

2. Open the converter. Go to privateconvert.org/tools/png-to-ico.

3. Drop your PNG onto the page. No upload button to hunt for — drag the file directly onto the drop zone.

4. Download the ICO file. The converter generates a favicon.ico containing the standard 16×16, 32×32, and 48×48 layers. Click download. The file is ready to deploy.

5. Create the additional PNG sizes if needed. For the Apple touch icon, resize your source PNG to 180×180. For Android manifest icons, produce a 192×192 and a 512×512. Any image editor or online resizer works; the ICO converter at privateconvert.org handles the ICO side.

A few tips before converting:

• Start from the highest-resolution version of your logo, not a compressed thumbnail.
• The converter preserves alpha channel transparency, so a PNG with a shaped or transparent edge stays sharp in the ICO output.
• If you are running a staging environment alongside production, use a different background color on the staging favicon. The instant visual difference in the tab tells you at a glance which environment you are in.

How to add a favicon to your website (HTML)

Place favicon.ico in the root directory of your domain. Most browsers check yoursite.com/favicon.ico automatically — no markup required. For explicit control over every format and size, add the following tags inside your <head>:

<!-- ICO fallback — works in all browsers without further markup -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- PNG sizes for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG for modern browsers + dark mode switching -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

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

If you only have one file and want the simplest possible setup, the single ICO tag is the minimum viable fallback:

<link rel="icon" href="/favicon.ico">

For Android home screen and Progressive Web App support, add a web manifest referencing your 192×192 and 512×512 PNGs:

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
  ]
}

Save the manifest as manifest.webmanifest and reference it in <head>:

<link rel="manifest" href="/manifest.webmanifest">

The "purpose": "any maskable" value on the 512×512 entry tells Android to use an adaptive launcher icon that fits inside its shaped icon grid without clipping.

How to add a favicon in WordPress, Shopify, and Squarespace

Each platform provides a dedicated UI field so you do not need to edit HTML or upload files via FTP.

WordPress: Go to Appearance > Customize > Site Identity. Look for the “Site Icon” field near the bottom. Click “Select site icon”, upload your PNG, then crop if prompted. WordPress accepts any square image and handles resizing. Use at least 512×512 for the source. Click “Publish” to save.

Shopify: Go to Online Store > Themes, click “Customize” on your active theme, then open “Theme settings” (or the header section depending on your theme). Find the “Favicon” field, click “Select image”, and upload a square PNG or ICO. Save and publish the theme. The icon appears within a few minutes.

Squarespace: Go to Website > Pages, then click “Website Tools” at the bottom of the left sidebar. Select “Favicon”. Upload a square PNG — Squarespace resizes it automatically. Save the page.

In all three cases the workflow is the same: produce a clean square PNG at 512×512 or larger using a favicon generator, then let the platform handle display sizing.

Why your favicon is not showing up

A favicon that works in development but refuses to appear in production — or disappears after an update — usually traces back to one of five causes.

Browser cache. Favicons are cached aggressively. Hard-refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac). If the icon still does not appear, clear the browser cache entirely or test in a private/incognito window. Some browsers require closing and reopening the tab before the cache clears for favicons.

Wrong file path. favicon.ico must sit at the exact root of your domain — yoursite.com/favicon.ico, not yoursite.com/assets/favicon.ico. If you use a <link> tag with a relative path, verify the path resolves correctly from the page you are testing, not just from the homepage.

Renamed PNG masquerading as ICO. Changing a file’s extension from .png to .ico does not convert it. The ICO format is a binary container; a renamed PNG is still a PNG and browsers that inspect the file header will ignore it. Run the file through an actual favicon generator to produce a real ICO.

HTTPS vs HTTP mismatch. Browsers block mixed-content requests. If your site serves over HTTPS but the favicon <link> tag points to http://, the request is blocked silently. Check that the favicon URL uses https://.

CDN caching. If your site sits behind a CDN (Cloudflare, Fastly, etc.), the edge nodes may be serving a stale version of favicon.ico even after you replaced it on the origin. Purge the CDN cache for the favicon URL specifically, or append a cache-busting query string: href="/favicon.ico?v=2".

Frequently asked questions

What is the minimum favicon size? 16×16 pixels is the smallest size browsers display in tabs. That said, you should always include 32×32 as well — high-DPI screens and taskbar shortcuts need the larger version to stay sharp. If you use privateconvert.org/tools/png-to-ico, the output ICO includes both sizes automatically.

Should I use PNG or ICO for my favicon? Use both. ICO works as a universal fallback that browsers find automatically without any HTML markup — it is what browsers look for when no <link> tag is present. PNG works for modern browsers when declared explicitly and is required for Apple touch icons and Android manifest icons. The two formats serve different jobs and are not interchangeable.

Does a favicon affect SEO? Not directly — Google does not use the favicon as a ranking signal. It does, however, appear in Google Search results next to your site name in the SERP. A clean, recognizable favicon reinforces brand recognition and can contribute to click-through rate. A missing or broken favicon shows a generic globe icon in search results.

How do I create a favicon that switches for dark mode? Use an SVG favicon with an embedded prefers-color-scheme media query:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Reference the SVG alongside your ICO fallback:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

Browsers that support SVG favicons use the scalable, color-switching version. Safari and older browsers fall back to ICO.

What is an Apple touch icon and do I need one? The Apple touch icon is the image iOS uses when a visitor saves your site to their home screen. Without one, iOS either takes a screenshot of your page or uses your regular favicon, both of which look poor at the 180×180 display size. Produce a 180×180 PNG with a solid background (iOS fills transparency with white and clips corners), add 20 pixels of padding so the artwork clears the rounded-corner mask, and reference it:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

What is a maskable icon? Android’s adaptive launcher crops icons into a circle, teardrop, or squircle depending on the device. A maskable icon includes extra padding around the artwork — called a “safe zone” — so the icon looks intentional after cropping rather than accidentally clipped. Add "purpose": "any maskable" to your 512×512 entry in the web manifest to tell Android it can apply the adaptive mask.

What image works best as a favicon? Simple, high-contrast shapes. A single letter, a geometric mark, or a bold logo symbol remains legible at 16 pixels. Detailed illustrations, thin strokes, and full wordmarks all collapse to noise at small sizes. If your logo only works as a horizontal lockup, use the favicon as a chance to create a dedicated app icon — just the symbol, without the type. You can create favicon from png in seconds at privateconvert.org/tools/png-to-ico to test how your artwork holds up at small sizes before committing.

---

Ready to create your favicon? Open the PNG to ICO converter at privateconvert.org — drop in your PNG, download the ICO, and your favicon is done. No account, no watermark, no file upload.