Tools marked “Coming soon” are being built now.

Image tools
Image · Free · Private

Favicon Generator

One logo in, every favicon and app icon out, with the HTML ready to paste.

  • Runs in your browser
  • No upload
  • No sign-up
Start from

Drop a file here, or

JPG, PNG, HEIC, WebP, AVIF, TIFF, GIF, BMP, SVG or ICO · square works best · or paste with ⌘V

Stays on your device

About this tool

Favicon Generator turns one picture into the full set of small icons a modern website needs: the favicon.ico that browsers look for first, sharp PNG tab icons, the Apple touch icon an iPhone uses when someone saves your site to the home screen, the Android and web app icons, a maskable icon for phones that cut icons into circles and squircles, and the site.webmanifest file that ties them together.

No logo yet? Switch to “Letters”, type one to three characters, choose from eighteen bundled fonts and pick colours. Either way you can round the corners, add padding and set a background, and the previews update as you drag: a light and a dark browser tab, the icon at its true 16, 32 and 48 pixel sizes, an iPhone home screen and the Android shapes with the safe zone marked. If you start from an SVG you also get a favicon.svg that stays sharp at any size.

Everything is drawn in your browser. Your logo is never uploaded, there is no watermark, and the favicon.ico is written by our own encoder with three sizes inside. When you are happy, download everything as one ZIP and copy the link tags into your page.

How to use Favicon Generator

  1. Choose “An image or logo” and drop in your file, or choose “Letters” and type up to three characters.
  2. Pick a shape (Square, Rounded or Circle), then fine-tune “Corners” and “Padding” with the sliders.
  3. Under “Background”, choose “See-through” or “Colour”. Pictures that aren’t square can “Fit inside” or “Fill and crop”.
  4. Check the browser tab, iPhone and Android previews. Move “Artwork size” until the important part sits inside the dashed circle.
  5. Open “Site name and colours” to set the name shown under the icon on a phone and the theme colour.
  6. Press “Download all (ZIP)”, then “Copy HTML” and paste the tags into the <head> of your pages.
Example

A 600 × 400 PNG logo on a blue rounded background gives eight files totalling about 45 KB: a 2 KB favicon.ico holding 16, 32 and 48 pixel versions, two tab PNGs, a 180 × 180 Apple touch icon, 192 and 512 pixel Android icons, a 512 pixel maskable icon and the manifest.

Features

  • favicon.ico with 16, 32 and 48 pixel images inside, written as PNG data that every current browser reads.
  • favicon-16x16.png and favicon-32x32.png for browser tabs and bookmarks.
  • apple-touch-icon.png at 180 × 180 with a solid background, because iPhones show see-through areas as black.
  • android-chrome 192 and 512 pixel icons plus a maskable 512 pixel icon with an adjustable artwork size.
  • favicon.svg when you start from an SVG, wrapped in the same background, padding and corners as the PNGs.
  • site.webmanifest with your site name, short name, theme colour and icon list, plus ready-to-paste link tags, also saved in the ZIP as favicon-html.txt.
  • Text icons from one to three letters in eighteen bundled fonts, with bold and colour options.
  • Live previews in light and dark browser tabs, at true pixel size, on an iPhone home screen and in Android circle, squircle and rounded shapes.
  • Reads JPG, PNG, WebP, AVIF, GIF, HEIC, TIFF, BMP, SVG and ICO.

Tips and good to know

  • Detail vanishes at 16 pixels. If your full logo turns to mush in the tab preview, use just its symbol or first letter.
  • A solid background with a little padding reads well on both light and dark browser tabs. A see-through favicon with dark artwork can disappear in dark mode.
  • Upload the largest, cleanest version of your logo you have. An SVG or a 512 pixel PNG gives the sharpest results.
  • If your icons live in a sub-folder, type it under “Icons folder” (for example /icons/) so the copied tags and the manifest point to the right place.
  • Browsers cache old favicons. To see new ones, try a private window.
Is my logo uploaded anywhere?

No. Every icon is drawn and packed into the ZIP inside your browser. Your image never leaves your device and nothing is stored once you close the tab.

Is it free, and are there limits?

Yes, it is completely free with no sign-up, no watermark and no limit on how many icon sets you make.

Does it work on a phone or offline?

Yes. It works in Safari, Chrome and Firefox on iPhone, Android, tablets and computers. Once the page has loaded, making icons needs no internet connection.

Which favicon files do I actually need?

For most sites, favicon.ico, apple-touch-icon.png and the manifest with its two Android icons cover every browser and phone. The 16 and 32 pixel PNGs and the SVG are extras some browsers prefer. The copied HTML lists everything, so upload the whole ZIP and you are covered.

What is a maskable icon?

Android phones cut app icons into their own shape, such as a circle or squircle. A maskable icon fills the whole square with background so nothing looks clipped, and keeps the artwork inside a central safe zone, the circle that covers 80% of the width. The dashed ring in the preview shows that zone.

Why does my Apple touch icon have a background when I chose see-through?

iPhones and iPads fill see-through parts of a home screen icon with black. To avoid that, the Apple touch and maskable icons always get a solid background: your chosen colour, or white if you picked see-through.

Where do I put the files?

Upload them to the root folder of your website, so favicon.ico is at yoursite.com/favicon.ico, and paste the copied tags inside the <head> of every page. If you use another folder, set it under “Icons folder” first.

Page last reviewed