Notepad - How to create a favicon from a PNG image
How to create a favicon from a PNG image
Convert a PNG logo to an ICO favicon file with the right sizes for every browser and device.
March 29, 2026 · 7 min read
Every website needs a favicon. It is the small icon that appears in browser tabs, bookmarks, history lists, and on a phone’s home screen when someone saves a shortcut to your site. Without one, browsers display a generic blank-page icon that makes a site look unfinished. If you already have a logo as a PNG, you are a few clicks away from fixing that.
What a favicon is and where it appears
A favicon is a small square image tied to a website. Browsers use it in several places:
- the tab strip, next to the page title
- the bookmarks bar and bookmarks manager
- browser history entries
- the address bar on some browsers
- the home screen on iOS and Android when a visitor saves a shortcut
That last one matters more than people expect. A well-made favicon at the right size looks sharp on a phone home screen. A missing or wrong-size one gets replaced by a blurry screenshot.
What favicon sizes you actually need
There is no single universal favicon size because different contexts need different resolutions. The practical set is:
| Size | Use |
|---|---|
| 16×16 | Browser tab, address bar |
| 32×32 | Taskbar shortcut, tab on high-DPI screens |
| 48×48 | Windows desktop shortcut |
| 180×180 | Apple touch icon (iOS home screen) |
| 192×192 | Android home screen shortcut via web manifest |
| 512×512 | Android splash screen via web manifest |
For most projects, starting with a square PNG at 512×512 or larger gives you enough resolution to produce all the smaller sizes without quality loss. Scaling up from 16×16 creates blur. Scaling down from 512×512 keeps edges crisp.
ICO vs PNG favicon: which format to use
Both formats work, and the modern approach uses both.
ICO is a Microsoft container format that bundles multiple sizes into one file. A browser reads the file and picks the size it needs. One favicon.ico in your root directory covers the 16×16 and 32×32 cases across all browsers, including older ones, without any HTML required.
PNG favicons are supported by all modern browsers. They are easier to produce and smaller on disk for a single size, but you need a separate file for each size rather than one container. PNG is the right format for the Apple touch icon (180×180) and the Android manifest icons (192×192 and 512×512).
SVG favicons are supported by most modern browsers and have one major advantage: a single vector file scales to any size without pixelation. You can also embed a prefers-color-scheme media query inside the SVG to switch between light and dark versions automatically. SVG does not replace ICO—Safari still needs the ICO fallback—but combining an SVG with an ICO covers nearly everything.
For most static sites and CMSes, the practical minimum is:
favicon.icocontaining 16×16, 32×32, and 48×48 layersapple-touch-icon.pngat 180×180- two PNGs at 192×192 and 512×512 referenced in a web app manifest
How to create a favicon from a PNG
The fastest path from a PNG logo to a working favicon:
- Open the PNG to ICO converter at privateconvert.org.
- Drop your PNG file onto the page.
- The tool generates an ICO file containing the standard 16×16, 32×32, and 48×48 sizes.
- Download the
favicon.icofile.
Everything runs in your browser. The file never leaves your device. If you need the 180×180 Apple touch icon as a separate PNG, resize your source image to 180×180 before downloading—or run it through any image resizer first.
A few things to keep in mind before converting:
- Use a PNG with transparency if your logo has a shaped edge. The converter preserves the alpha channel so your icon looks clean on any tab background color.
- Start from the largest version of your logo, not a thumbnail you already scaled down.
- If your logo is a horizontal wordmark, consider cropping to just the symbol or first letter. Wordmarks become unreadable at 16 pixels wide.
How to add a favicon to your HTML
Place favicon.ico in your site’s root directory. Most browsers check for it there automatically without any markup. For explicit control, add these tags inside your <head>:
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Modern browsers prefer PNG or SVG over ICO when specified -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- 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 enough:
<link rel="icon" href="/favicon.ico">How to add a favicon in WordPress, Shopify, and Squarespace
Each platform has a dedicated field so you do not need to touch HTML.
WordPress: Go to Appearance > Customize > Site Identity. Look for the “Site Icon” field. WordPress accepts a PNG and handles the resizing. Upload a square image at least 512×512 pixels.
Shopify: Go to Online Store > Themes > Customize. Find the “Favicon” setting under theme settings or the header section. Upload a square PNG or ICO.
Squarespace: Go to Website > Pages > Website Tools > Favicon. Upload a PNG. Squarespace resizes it for you.
In all three cases the workflow is the same: produce a clean square PNG or ICO at a large size, then let the platform handle display sizing.
Why your favicon might not be showing up
A few common reasons a favicon does not appear after you add it:
Browser cache. Favicons are aggressively cached. Hard-refresh the page (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache and reload. In some browsers you may need to close and reopen the tab.
Wrong file path. Check that favicon.ico is at the exact root of your domain (yoursite.com/favicon.ico), not inside a subdirectory. If the <link> tag has a relative path, make sure it resolves correctly from the page you are testing.
File is not actually ICO. Renaming a PNG to .ico does not convert it. The file must be a real ICO container. Use a converter rather than just changing the extension.
HTTPS vs HTTP. Some browsers block favicon requests over HTTP on HTTPS pages. Make sure your favicon URL uses the same protocol as your site.
CDN or caching layer. If your site is behind a CDN, the old favicon may be cached at the edge. Purge the CDN cache for the favicon URL specifically.
Frequently asked questions
What is the minimum favicon size? 16×16 pixels is the minimum size browsers display in tabs. However, you should always provide at least 32×32 as well, since high-DPI screens and taskbar shortcuts need the larger version to stay sharp.
Can I use a PNG instead of an ICO for a favicon?
Yes. Modern browsers accept PNG favicons when you specify them with a <link> tag. ICO is still worth including as a fallback because it is the default format browsers look for when no <link> tag is present, and it works without any markup.
Does a favicon affect SEO? Not directly. Google does not use the favicon as a ranking signal. It does appear in Google Search results next to your site name, so it affects how your brand looks in search, which can influence click-through rate.
What image works best as a favicon? Simple, high-contrast images work best. A single letter, a geometric mark, or a bold logo symbol stays legible at 16 pixels. Detailed illustrations, thin lines, and full wordmarks all become unreadable at small sizes.
How do I add a dark mode favicon? Use an SVG favicon with an embedded media query:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
@media (prefers-color-scheme: dark) {
.icon { fill: #ffffff; }
}
.icon { fill: #000000; }
</style>
<circle class="icon" cx="50" cy="50" r="40"/>
</svg>Reference it 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 will use the scalable version with dark mode switching. Browsers that do not will fall back to ICO.
How do I make an Apple touch icon? Produce a 180×180 PNG of your logo with no transparency—iOS fills the background solid white if you leave it transparent. Add 20 pixels of padding around the icon so it does not get clipped by rounded corners. Reference it in your HTML:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Do I need a web app manifest? Only if you want your site to behave as a Progressive Web App or if you want a proper icon when someone adds your site to their Android home screen. A basic manifest looks like this:
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}Save it as manifest.webmanifest and reference it in your <head>:
<link rel="manifest" href="/manifest.webmanifest">Try the tool
PNG to ICO
Convert PNG images to ICO favicon format in your browser with local processing, without uploads or watermarks.
ConvertRelated posts
How to compress a video for Discord (free, no install)
Discord's 25 MB free limit blocks a lot of clips. This guide covers the fastest ways to compress video for Discord — in the browser, on desktop, and on mobile — without destroying quality.
March 31, 2026 · 8 min read
How to Convert MKV to MP4 (Without Losing Quality)
MKV files won't play on iPhones, most smart TVs, or social platforms. Here are the fastest ways to convert MKV to MP4 on any device—browser, desktop, or command line.
March 31, 2026 · 9 min read
How to convert PNG to JPG
Convert PNG to JPG on any device — browser, Mac, Windows, iPhone, Android, or command line. Smaller files, same visual quality.
March 31, 2026 · 9 min read
