N

Runs in your browser · nothing is uploaded

Favicon Generator

This favicon generator turns a logo or image into a complete favicon set — a real multi-size .ico, PNG and Apple touch icons and an optional web app manifest — plus the tags to paste into your site.

Your image

The Apple touch icon always gets a solid background (white if you choose transparent), because iOS fills transparency with black.

Package

Preview

Choose an image to see your icons.

The files and why they're there

  • favicon.ico — requested automatically by many browsers and tools at /favicon.ico; holds 16, 32 and 48 px images.
  • favicon-32x32.png, favicon-16x16.png — sharper tab icons for browsers that prefer PNG.
  • apple-touch-icon.png — 180 × 180, solid background, used when saving to an iPhone or iPad home screen.
  • site.webmanifest + 192/512 px icons — for installable web apps (optional).

Tips for a crisp icon

Start from a square image at least 512 px wide, or an SVG. Simple shapes and bold letters survive being shrunk to 16 px far better than detailed logos — check the 16 px preview. Use padding if the artwork touches the edges.

Frequently asked questions

What's in the favicon package?+

A real multi-size favicon.ico (16, 32 and 48 px images), 16 and 32 px PNGs, a 180 px Apple touch icon, and — if you turn it on — a web app manifest with 192 and 512 px icons and an optional maskable icon. The ZIP also has the HTML tags and a README.

Is the .ico a real ICO file?+

Yes. It's written in the ICO format with a directory of three 32-bit images, not a PNG renamed to .ico. Before the download, every file is decoded again and its size checked against its name.

Can I upload an SVG?+

Yes. SVGs are drawn through the browser's image renderer, which doesn't run scripts or load external files, then turned into PNG and ICO images.

How do I add the favicon to my site?+

Upload the files to your site (the root, unless you set another folder) and paste the tags from favicon-tags.html into the <head> of every page. Browsers cache favicons heavily, so you may need a hard refresh to see the change.

Will this work everywhere?+

These files cover current desktop browsers, iOS home-screen icons and installable web apps. Some platforms have their own extras (such as Windows tiles or Safari pinned tabs) that this package doesn't include.

What size should a favicon be?+

Start from a square image of 512 × 512 px or larger and let the tool make the rest: 16, 32, 48 px inside favicon.ico, plus PNGs at 16, 32, 180, 192, 512 px for browser tabs, the Apple touch icon and installable web apps. Simple shapes and bold letters stay readable at 16 px; fine detail and small text don't.

Do I still need a favicon.ico file?+

It's still worth including. Browsers and other tools often request /favicon.ico at the site root even without a link tag, and the .ico holds several sizes in one file. Modern browsers then use the PNG link tags where they can.

Why isn't my new favicon showing?+

Usually caching: browsers keep favicons for a long time, so do a hard refresh or open the site in a private window. Also check that the files are where the tags point — if they're not in your site's root, set that folder under “Where the files will live on your site” before downloading. Search engines update the icon in results only after they recrawl your site.

Why does the Apple touch icon get a solid background?+

iPhones and iPads fill transparent areas of home-screen icons with black, so the 180 px Apple touch icon is always given a solid background — your chosen color, or white if you picked transparent. With a transparent background chosen, the other icons (apart from the maskable one) stay transparent.

What is a maskable icon?+

Android and some other systems crop app icons into circles, squircles or other shapes. A maskable icon has a solid background and keeps your image inside the central safe zone (this tool adds at least 10% padding on each side), so nothing important is cut off. Turn on the web app manifest to add one.

Is my image uploaded?+

No. Everything — resizing, ICO encoding and the ZIP — happens in your browser.

More free Northlane tools