homedeveloper toolsfavicon generator

Favicon Generator

Make favicon.ico, apple-touch-icon and Android icons from one logo

Your files are processed in your browser. They are never uploaded, and nothing is stored after you close the page. How we handle privacy

If the image isn't square
Background
Used for the Android browser bar and in site.webmanifest.
Favicons
Choose your logo to begin.
HTML for your <head>
site.webmanifest
The paths assume the files sit in your site's root folder. Change them if you put the icons somewhere else.

Runs entirely in your browser. Nothing you type or upload is sent to us or stored.

Results are for general guidance. Please check anything important before relying on it. Terms of use

How to Use

  1. Drop your logo in the box or click to choose it. PNG, JPG, WebP and SVG all work; a square image of 512 px or more gives the best result.
  2. If the image isn't square, choose Crop the centre or Fit with padding, and pick a Transparent or Solid colour background.
  3. Check the light and dark previews: the browser tab, the 16, 32 and 48 px sizes, and the home-screen icon.
  4. Type your app name, short name and theme colour for the site.webmanifest file.
  5. Press Download all as ZIP (or download single files), unzip into your website's root folder, and paste the copied <link> tags into the <head> of your pages.

What a favicon is and which sizes you need

A favicon is the small icon in the browser tab, in bookmarks, in Google search results on phones and on the home screen when someone saves your site. This favicon generator takes one logo and makes every file a modern site needs, drawn on your own device with the browser's canvas. Your logo is never uploaded.

One size doesn't fit all, because each place draws the icon at a different size and some of them expect a particular file name.

FileSizeUsed by
favicon.ico16, 32 and 48 px inside one fileEvery browser; it's what they ask for at /favicon.ico when no tag says otherwise
favicon-16x16.png, favicon-32x32.png16 and 32 pxBrowser tabs on normal and sharp screens
favicon-48x48.png48 pxLarger spots such as desktop shortcuts
apple-touch-icon.png180 pxiPhone and iPad "Add to Home Screen"
android-chrome-192x192.png, -512x512.png192 and 512 pxAndroid home screen and the install prompt (listed in site.webmanifest); the 192 px file is also linked as a normal icon

How the ICO file is built

An ICO file is a small container. It starts with a 6-byte header, then a 16-byte entry for each image saying its width, height, size in bytes and where its data starts. The image data follows. Since Windows Vista, those images can be ordinary PNG files, which every current browser reads. This tool writes that container itself:

Header : 00 00 | 01 00 | 03 00 (reserved, type 1 = icon, 3 images)
Entry 1: 10 10 00 00 01 00 20 00 ... (16 × 16, 1 plane, 32 bits, size, offset)
Entry 2: 20 20 ... (32 × 32)
Entry 3: 30 30 ... (48 × 48)
Data : PNG 16 | PNG 32 | PNG 48

Because the PNGs keep their transparency, the round or odd-shaped parts of your logo stay see-through in the tab.

Example

Say your shop logo is a 1200 × 800 JPG with the name written across it. Choose Fit with padding and a white background, and the whole logo shrinks into a 512 px square with even white bands at the top and bottom. Then look at the 16 px preview: the shop name will probably be unreadable. That's normal. Most brands use just the first letter or the symbol from their logo for the favicon. Crop or redraw that part, save it as a square PNG, and run it through again.

Installing the files

  1. Unzip favicons.zip into the root of your site, so that https://yoursite.in/favicon.ico opens the icon.
  2. Paste the <link> tags from the tool into the <head> of every page (in WordPress, your theme's header or an SEO plugin; in Next.js or Angular, the layout or index file).
  3. Open the site in a private window. Browsers cache favicons hard, so your normal window may show the old one for a while.

Tips

  • Start from an SVG or a PNG of 512 px or more. A small source looks soft when it's scaled up to 512.
  • Thin lines disappear at 16 px. Thicker shapes and strong contrast work better.
  • iOS fills transparent parts of the home-screen icon with black, so pick a solid background if your logo has a transparent background and dark artwork.
  • Google Search shows a favicon next to results and asks for a square icon that is a multiple of 48 px. The 48 px image inside favicon.ico and the 192 px PNG both fit that rule.
  • Change the paths in the tags and the manifest if you keep the icons in a folder such as /icons/.

Frequently Asked Questions

There isn't one size. Browser tabs use 16 and 32 px, iPhones want a 180 px apple-touch-icon, and Android uses 192 and 512 px from the web manifest. This tool makes all of them, plus a favicon.ico with 16, 32 and 48 px inside.

Yes, it's worth keeping. Browsers and many other tools ask for /favicon.ico when a page has no icon tag, and it's the most widely supported format. The PNG files cover the larger sizes.

In the root folder of your website, next to your home page, so that yoursite.in/favicon.ico works. Then add the link tags to the head of your pages. If you use another folder, change the paths in the tags and in site.webmanifest.

Browsers cache favicons for a long time. Check in a private or incognito window, or clear the site's data. Google search results can take days or weeks to pick up a new icon.

No. The image is resized with your browser's canvas and the ICO and ZIP files are written on your device. Nothing leaves your computer or phone.

You Might Also Need

Image ResizerImage ConverterMeta Tag GeneratorRound Image Crop