Skip to content

Favicon generator: ICO, PNG and Apple touch icon

Make every favicon size from an image or a letter, see it in a browser tab and on a phone, and copy the HTML. It all happens on your device.

Browser tab
Phone home screen
Every size. 16 and 32 are shown at their real pixel size.
  • 16
  • 32
  • 180
  • 192
  • 512

How it works

  1. Start from an image or from letters. Drop in your logo, or type one or two letters and pick a background colour.
  2. Adjust the shape, padding and placement. Every change redraws the icon in a browser tab and on a phone home screen, at the size people will see it.
  3. Download the files and paste the HTML.Put the files in your site's root folder and the link tags in your page's head.

What you get

Seven files that cover browsers, iPhone, iPad and Android. Every size is drawn from your original image, not scaled from a smaller icon, so each one is as sharp as the source allows.

  • favicon.ico16, 32 and 48 px

    The default file every browser asks for

  • favicon-16x16.png16 px

    Browser tabs on standard screens

  • favicon-32x32.png32 px

    Browser tabs on sharp screens, bookmarks

  • apple-touch-icon.png180 px

    iPhone and iPad home screen

  • android-chrome-192x192.png192 px

    Android home screen

  • android-chrome-512x512.png512 px

    Android splash screen and install prompt

  • site.webmanifestText

    Names your site and lists the Android icons

How to add a favicon to your website

Upload the files to the root of your site, the same folder as your home page, so they load from addresses like /favicon.ico. Then paste the link tags the tool gives you inside the <head> of every page, or of your shared layout or template. Browsers cache favicons hard, so after replacing one, open the site in a private window to see the new icon.

Do you still need a favicon.ico file?

Yes, as a fallback. Browsers request /favicon.ico on their own when a page names no icon, and some tools that show site icons, such as feed readers, only look there. Modern browsers read the PNG files listed in your HTML too. Shipping both is the safe choice and costs a few kilobytes. The .ico made here holds 16, 32 and 48 pixel images in one file, stored as PNG inside the .ico, which every current browser and operating system reads.

Getting a clear icon at 16 pixels

  • Start from a square image at least 512 pixels wide. Crop a wide logo to a square first. Enlarging a small image cannot add detail.
  • Use a simple mark, not a full logo with words. Text in a logo turns into a smudge at tab size.
  • Pick strong contrast between the mark and its background, so the icon holds up on light and dark tab bars.
  • No logo yet? One or two letters on a solid colour make a clean, readable favicon.

Made in your browser, nothing is uploaded

The icons are drawn on a canvas on your device and packed into files right there. Your logo never leaves your computer or phone, and there is no account or sign-up. Once the page has loaded, it keeps working offline.

Related tools

Common questions

What is a favicon?
The small icon a browser shows next to your page title in the tab, and in bookmarks and history. Phones use larger versions of it when someone adds your site to their home screen.
What favicon sizes do I need?
16 and 32 pixels for browser tabs, a 180 pixel Apple touch icon for iPhone and iPad, and 192 and 512 pixel icons for Android. This tool makes all of them, plus a favicon.ico holding 16, 32 and 48 pixels.
Do I still need a favicon.ico file?
It is the safe fallback. Browsers ask for /favicon.ico by default when a page names no icon, while modern browsers also read PNG icons listed in the HTML. Including both covers everything.
How do I convert a PNG to ICO?
Drop the PNG in. The tool draws it at 16, 32 and 48 pixels and packs those into one favicon.ico, along with the PNG sizes.
Where do I put the favicon code?
Inside the head element of your HTML, on every page or in your shared layout. Upload the files to the root folder of your site so the paths in the code match.
What is an Apple touch icon and what size is it?
The icon iOS shows when someone adds your site to their home screen. It is 180 by 180 pixels. iOS rounds the corners itself, so this file is always a full square, and it is never transparent because iOS would fill the transparent parts with black.
Can I make a favicon from a letter?
Yes. Switch to letters, type one or two characters and pick a background colour. The letter colour is picked automatically for contrast.
Is my image uploaded to a server?
No. Everything is drawn and packed in your browser. The image never leaves your device.
What is the site.webmanifest file for?
It tells browsers your site's name and which icons to use when someone installs it or adds it to an Android home screen.
Why does my favicon look blurry?
Usually the source image was small or detailed. Start from a square image at least 512 pixels wide with a simple, high-contrast shape. Enlarging a small image cannot add detail.
Can I keep a transparent background?
Yes, for the favicon and Android files: choose None as the background. The Apple touch icon always gets a solid background, because iOS shows transparency as black.
Is the favicon generator free?
Yes. It is free, with no sign-up and no watermark on your icons.