Favicon Generator

Upload a logo or image and this tool generates a complete, modern favicon set: a multi-resolution favicon.ico, standalone PNG icons, an Apple touch icon, Android Chrome icons, a site.webmanifest, and the exact HTML tags to paste into your page's <head>. Everything is generated locally with the Canvas API — your image is never uploaded anywhere.

Drop an image here or click to browse

Use a square image (at least 512×512) for the sharpest results. PNG, JPG, WebP, SVG, and GIF all work.

What's Included in the Favicon Set

favicon.ico — a single multi-resolution icon file (16×16, 32×32, and 48×48 embedded together) for maximum browser and bookmark compatibility.
favicon-16x16.png and favicon-32x32.png — standalone PNGs some browsers prefer over the .ico file.
apple-touch-icon.png (180×180) — used when a visitor adds your site to their iPhone or iPad home screen.
android-chrome-192x192.png and android-chrome-512x512.png — used by Android's "Add to Home Screen" and by Chrome's install prompts.
site.webmanifest — a small JSON file that tells Android/Chrome which icons to use for a home-screen shortcut or installed PWA.

How to Use This Tool

Upload a logo or image. A square source (ideally 512×512 or larger) gives the cleanest result at every size.
Choose Cover to crop a non-square image to fill the square, or Contain to fit the whole image with padding — pick a background color, or check Transparent to keep transparency (PNG only; the .ico and JPG-sourced files will still show a solid background where transparency isn't supported).
Click Generate Favicon Set to render every size from your source image.
Download the ZIP, extract it into the root folder of your website (the same folder as your homepage), and paste the provided HTML into every page's <head> — or just once, into your site's shared header template.

If your logo is currently an SVG file, convert it to a PNG first with the SVG to PNG converter, then upload the PNG here. If you need to crop or straighten a photo before turning it into an icon, the image cropper handles that first.

Why Favicons Still Matter

A favicon is the small icon shown in a browser tab, in bookmark lists, in browser history, and next to your site in search results on some devices. A missing or generic favicon (or the browser's default blank-page icon) makes a site look unfinished or untrustworthy at a glance — it's a tiny detail that has an outsized effect on how professional a website feels. Search engines and social platforms also fall back to your favicon in various UI surfaces, so it's worth getting the full modern set in place rather than shipping a single low-resolution favicon.ico.

Frequently Asked Questions

Where do I put these files?

Unzip the download into the root directory of your website — the same folder that serves your homepage — so the files are reachable at paths like https://yoursite.com/favicon.ico. Most browsers automatically look for /favicon.ico at the root even without any HTML tag, but the other files (Apple touch icon, Android icons, manifest) need the provided <link> tags in your <head> to be picked up.

Is my image uploaded anywhere?

No. Every step — reading the file, cropping, resizing, encoding the .ico, and zipping the results — happens in your browser using the Canvas API and JavaScript. Nothing is sent to a server.

Why does my favicon.ico look identical to browsers that supposedly want different sizes?

A modern favicon.ico isn't one image — it's a container holding several images (16×16, 32×32, and 48×48 in this tool's output) bundled into a single file. The operating system or browser reads whichever embedded size fits the context (a browser tab vs. a desktop shortcut, for example), so one file correctly serves multiple purposes.

My source image has transparency — will it be preserved?

Yes, if you check the Transparent option and your source image has an alpha channel (PNG, WebP, or GIF). The generated PNG files and the .ico file support transparency. If you instead pick a background color, that color fills any transparent areas before the icons are generated.

Do I really need the Android and Apple icons if I only care about desktop browsers?

If your traffic is desktop-only, the .ico file and the two PNG favicons cover you. But adding the Apple touch icon and Android/manifest icons costs nothing extra once you've already generated them, and they instantly improve how your site looks anywhere a mobile visitor bookmarks it or adds it to their home screen — cheap insurance worth including.

Can I use a rectangular logo instead of a square one?

Yes — choose Contain and pick a background color (or transparency) for the padding that fills the rest of the square. Favicons are always square, so a wide logo will end up with some empty space on the top and bottom (or sides) inside the icon.