Skip to content
Free audit
Menu

All tools

Favicon and App Icon Generator

Upload your logo and get a favicon.ico, the PNG sizes browsers ask for, an Apple touch icon, Android icons, a web manifest and the HTML to paste in. Your logo stays on your device.

or drop it here. An SVG or a square PNG of at least 512 px works best

8% on each side. Maskable icons always keep at least 20%.

  • 1616 px
  • 3232 px
  • 4848 px
  • 180Apple touch 180
  • 192Android 192
  • 512Android 512
  • 512Maskable 512

Upload a logo to see every size here.

Add this inside your site's <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

Put the files in the root of your site so they load from /favicon.ico and so on. Many website builders have a favicon setting instead: upload the 512 px PNG or the .ico there.

Questions

Which sizes do I actually need?

A favicon.ico for older browsers and search results, 16 and 32 px PNGs for browser tabs, a 180 px Apple touch icon for iPhones and iPads, and 192 and 512 px icons for Android and installed web apps. The zip has all of them.

What is the maskable icon?

Some Android phones crop app icons into a circle or a rounded square. A maskable icon keeps the logo inside a safe central area so nothing important is cut off. We add extra padding and a solid background for it.

Why does the Apple icon have a background?

iPhones fill transparent areas of home-screen icons with black. A solid background colour avoids that, so the icon always looks the way you intend.

Should I upload an SVG or a PNG?

An SVG is best, because every size is drawn sharply from the vector shapes, and we include it as a favicon.svg that modern browsers can use at any size. A PNG should be square and at least 512 px.

Where do the files go?

On a site you host yourself, put them in the root folder so they load from /favicon.ico and so on, then paste the snippet into the head of every page. Many website builders have their own favicon setting, where you upload the 512 px PNG or the .ico.

Is my logo uploaded anywhere?

No. The icons are drawn in your browser and your logo never leaves your device.

More free tools

Made by Bulb Studio, a design and development studio in Kolkata.