NoUpload Tools

PNG to ICO: make a favicon.ico from one logo

A website's icon — the little mark beside the address in a browser tab — is usually a file called favicon.ico. If you only have a PNG logo, this page explains what that file really is, which sizes are actually needed, and how to get the whole set made in your browser, with nothing uploaded.

What a .ico file actually is

favicon.ico is not a picture format in the usual sense. It is a small container that holds the same picture at several sizes, and a browser picks whichever one fits. The one at 16×16 appears in a tab; 32×32 in a bookmark list and a history dropdown; 48×48 on a desktop shortcut. A single file holding all three is why one favicon.ico works everywhere.

Modern websites also reference separate files for cases an .ico cannot cover: a 180×180 Apple touch icon, 192 and 512 pixel Android icons, and a web manifest that ties them together. Browsers request the .ico first, because a browser tab, a bookmark and a feed reader all still look for /favicon.ico by convention.

How to make the whole set here

  1. Open Favicon generator and choose your logo — a PNG, JPG, WebP or an SVG file. A square image of at least 512×512 gives the cleanest small sizes.
  2. Tick Transparent background for a tab icon, or pick a background colour. Add a little padding if the logo touches the edges.
  3. Download the ZIP. It contains favicon.ico (16, 32 and 48), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180, always opaque), android-chrome-192x192.png, android-chrome-512x512.png and site.webmanifest, plus the HTML to paste into your pages.

Every icon is drawn by your own browser, and the page's security policy blocks any connection to a server. An unreleased logo or a client's mark never leaves your computer.

Why a logo looks blurry at 16 pixels

At 16 pixels across, there is very little room. A full wordmark with small text turns into a grey smudge; a bold letter, a simple symbol or a solid shape stays readable. Two habits help more than any setting: give the icon its own simplified version rather than shrinking the full logo, and leave a small margin so it does not look cramped in the tab. If your logo is not square yet, crop and rotate makes it so, and resize to exact pixels can produce a separate, larger logo for the page itself.

Why the Apple icon loses its transparency

iOS shows a transparent area as black, so the generator always fills apple-touch-icon.png with your chosen background colour. That is deliberate: a logo that looks correct in a browser tab can look like a black square on someone's home screen. Set the background to the colour behind the logo on your site, or to white.

If the icon does not change

Browsers cache favicons aggressively, so a new file is often ignored until the cache is bypassed. Try a hard reload, or open the site in a private window. If it still shows the old mark, check that the files sit in the root folder of your site — next to the home page, not inside a subfolder — and that the <link> tags from the generator's HTML snippet are inside <head>.

Questions

Do I still need favicon.ico if I use an SVG icon?

Yes, keep it. Current browsers accept an SVG icon, but browser tabs, bookmark lists, feed readers and Windows shortcuts still look for /favicon.ico by convention. An SVG icon is an addition, not a replacement. A single letter in a solid square works as an SVG icon too.

Is an ICO file just a renamed PNG?

No. It is a container that holds several images at once, so a browser can pick the right size without a second request. Each image inside it can be stored as PNG data, which is what makes the file small while still working on Windows and in every current browser.

Can I convert a JPG to ICO?

Yes. The generator accepts PNG, JPG, WebP and SVG. A JPG has no transparency, so a tab icon made from one will have whatever background was baked into the picture. A PNG with a transparent background usually gives a better result.

Does this page upload my logo?

No. The icons are drawn by your browser and the page's security policy stops it from sending data anywhere. There is no sign-up, no watermark and no limit.