Favicon generator

Convert an image into 16–512px favicon PNGs.

Select or drag & drop a square image

Generates the PNG favicons recommended by modern browsers instead of the legacy favicon.ico. Download and use 16·32·48·180(Apple)·192·512px.

A site without a favicon shows a blank sheet of paper in the browser tab, and looks unfinished the moment someone bookmarks it or saves it to a phone home screen. This tool takes one square image and produces the set of PNG icons a modern site is expected to ship, at the sizes browsers and mobile platforms actually ask for.

How it works

Preparing the source image

Start with a square image at 512 pixels or larger. Anything non-square gets fitted into a square canvas, and detail that reads clearly at 512px often turns to mush at 16px — so favour a bold, simple mark over a detailed logo with fine lettering. A single letter, a symbol or a two-colour shape survives the shrink; a wordmark generally does not.

If your source is a transparent PNG, leave Background on Transparent. If it is a photo or a logo on white, or you want a consistent tile behind the mark on mobile home screens, set a background colour instead.

What each size is for

Size	Where it is used
16px	Browser tab and address bar
32px	Bookmarks bar, taskbar shortcuts, high-DPI tabs
48px	Desktop shortcuts and some browser UI
180px	Apple touch icon — iOS home screen
192px	Android home screen via the web app manifest
512px	Splash screen and app store style listings for installable web apps

This generator outputs PNGs rather than a legacy favicon.ico. Every browser in current use reads PNG favicons, and the ICO container mainly exists for very old Internet Explorer versions.

Wiring them into your site

Upload the files to your site root, then declare them in the page <head>:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
List the 192px and 512px icons in your manifest.json under icons if the site is installable

One common frustration: browsers cache favicons aggressively, so a new icon may not appear straight away. Force a reload, open the icon URL directly, or try a private window before assuming something is broken.

Terms explained

Favicon: The small icon a browser shows next to a page title in the tab, in bookmarks and in history. Short for 'favourite icon'.
Apple touch icon: The 180x180 PNG iOS uses when a page is added to the home screen. Declared with rel="apple-touch-icon" rather than rel="icon".
Web app manifest: A JSON file describing an installable web app, including the icon sizes (typically 192 and 512 pixels) used for the home screen and splash screen.
favicon.ico: The legacy Windows icon container that can hold several sizes in one file. Still recognised, but PNG icons declared in the HTML are the modern approach.
Transparent background: An image with no fill behind the artwork, so whatever sits underneath shows through. Useful when the icon must work on both light and dark surfaces.

Frequently asked questions

What size should my source image be?

Square and at least 512 pixels on each side, so the largest output is generated by downscaling rather than by stretching. A vector logo exported to a 1024px PNG is an ideal starting point.

Do I still need a favicon.ico file?

Not for current browsers, which all handle PNG icons declared in the HTML head. An ICO is only worth adding if you must support very old Internet Explorer versions, or if you cannot edit the page head and want the root-level fallback that browsers request automatically.

Why is my old favicon still showing after I replaced it?

Browsers cache favicons for a long time. Open the icon file's URL directly to confirm the new file is live, then hard-reload the page or test in a private window. Adding a version query string to the link tag also forces a refresh.

Should the background be transparent or a solid colour?

Transparent works well in browser tabs, where the surrounding colour varies. A solid background is often better for phone home screens, where an icon with cut-out areas can look ragged against the wallpaper.

Is my logo uploaded to a server?

No. The image is resized and exported inside your browser, so an unreleased logo or client artwork never leaves your machine.