How to Create a Favicon (PNG to favicon.ico)
Learn how to create a favicon from a PNG image, including the favicon.ico, the PNG sizes you need, and how to add it to your HTML.
What a favicon is
A favicon is the small site icon shown in browser tabs, bookmarks, history, and on phone home screens. It shapes the first impression of your site and makes it easy to recognize, so it is worth setting up early even for an indie service or a blog.
Without a favicon, tabs show a generic icon and your site blends in with the rest. With one set up properly, your tab is easier to spot when several are open, and bookmarks become more inviting to revisit.
Which sizes you need
The common setup today is a multi-resolution favicon.ico (16×16, 32×32, 48×48) plus separate PNGs. The 16×16 is for tabs, 32×32 for bookmarks and higher-resolution displays, and 48×48 for places like Windows site tiles.
It also helps to provide an apple-touch-icon (180×180) PNG for when someone adds your site to a phone home screen. With that set in hand, you cover the major environments in one go.
Creating favicon.ico from a PNG
You can make a favicon without any dedicated software. Filewisp's Favicon Generator turns a PNG (or JPG) into a favicon.ico embedding 16/32/48, plus PNGs at each size and an apple-touch-icon. Your image is processed entirely in your browser and never uploaded to a server.
The steps are simple. Choose a square-ish PNG, check the preview, then press Generate Favicon. You can download the whole set of files together as a ZIP.
Adding it to your HTML
Place the generated files at your site root (or wherever you prefer) and reference them inside the HTML <head>. Specifically, link favicon.ico with rel="icon", the PNGs with rel="icon" and a sizes attribute, and the 180×180 with rel="apple-touch-icon".
Filewisp's generator outputs this set of <link> tags ready to copy. You just paste them in and adjust the paths to match where you placed the files, which keeps it approachable even if you are new to HTML.
Source image and transparency tips
Ideally start from a square PNG of 512×512 or larger. Upscaling a small image makes the edges rough, so a higher-resolution source produces a cleaner result. For a logo, leaving a little padding helps it stay legible at small sizes.
A transparent PNG keeps its transparency, so it blends in naturally on sites with a background color. That makes it easy to turn a logo directly into a favicon.
If the favicon does not update
If the icon does not change after you add it, the cause is usually browser caching. Try a hard reload, or wait a little while and check again, and it often appears.
If it still will not change, double-check that the file path matches the href in your <link> tags and that there are no typos in the file names. A mismatched path is the classic reason a favicon fails to show.