How to Make a Favicon from an Image (ICO + PNG)
A favicon is the little icon in the browser tab. Modern sites need more than one file: a classic favicon.ico, several PNG sizes for different devices, an Apple touch icon, and a web manifest. Here's how to generate the whole set from a single image and wire it into your site.
Use the calculator
Favicon Generator
Step-by-step
- 1
Prepare a square image
A 512×512 (or larger) square PNG works best. Simple, high-contrast designs read better at tiny sizes than detailed logos.
- 2
Open Favicon Generator
Use our Favicon Generator and drop your image in. It generates every size in your browser.
- 3
Review the preview
You'll see the icon rendered at 16, 32, and larger sizes so you can confirm it stays legible when small.
- 4
Download the favicon package
Click download to get a ZIP containing favicon.ico, the PNG sizes, apple-touch-icon.png, and site.webmanifest.
- 5
Add it to your site
Drop the files in your site's root folder and paste the provided HTML snippet into your <head>.
💡 Tips
- favicon.ico belongs in your site root — most browsers request /favicon.ico automatically even without a link tag.
- Keep the design simple: a single letter, monogram, or icon reads far better at 16×16 than a full logo with text.
- Use a transparent background so the icon looks right on both light and dark browser themes.
FAQ
What sizes do I actually need?
16×16 and 32×32 for browser tabs, 180×180 for Apple touch icon, and 192/512 for Android and PWAs. The generator produces all of them.
What is the .ico file for?
ICO is the legacy format browsers fetch from /favicon.ico. It can hold multiple sizes in one file — the generator packs 16, 32, and 48 into it.
Where do the files go?
Put them in your website's root directory (same level as index.html) and reference them with the HTML snippet the tool gives you.