Docutoolbox

Favicon generator

Turn any image into a full set of favicon sizes, including a real .ico file, packaged with the HTML code to add them to your site.

🖼️

Drop an image here, or click to browse

JPG, PNG, or WEBP · Square images work best · Max 10MB

Non-square images are automatically center-cropped to a square before generating icons

✓ Your favicon pack is ready

Download favicon-pack.zip

Your image is processed entirely in your browser - nothing is uploaded to a server.

What is the Favicon Generator?

A favicon is the small icon that shows up in a browser tab, bookmarks bar, and home screen shortcut for a website. This tool takes any image, usually a logo, and generates the full set of icon sizes modern browsers and devices expect, including a real multi-resolution .ico file, packaged together in a single ZIP download.

Everything happens locally in your browser. Your image is never uploaded to a server.

How to use it

Drop your logo or image onto the upload area, or click it to browse your device.
If your image isn't already square, it's automatically center-cropped to a square shape.
Preview thumbnails at every generated size appear so you can check how the icon looks small.
Click Generate & download favicon pack to get a ZIP file with every icon size plus the HTML code to add them.
Unzip the file and follow the included instructions to add the icons to your website.

What's included in the pack

favicon.ico - a real multi-resolution icon file (16×16, 32×32, and 48×48 combined), the classic favicon format supported by every browser
favicon-16x16.png and favicon-32x32.png - standard browser tab icon sizes
apple-touch-icon.png (180×180) - used when someone adds your site to their iPhone or iPad home screen
android-chrome-192x192.png and android-chrome-512x512.png - used for Android home screen shortcuts and app-like installs
site.webmanifest - a small file that tells browsers about your icon set for progressive web app support
A ready-to-paste HTML snippet with the <link> tags for your page's <head>

Adding the favicon to your website

After unzipping, upload all the files to your website's root folder (or wherever your site's static files live), then paste this into your HTML <head> section:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Why square images work best

Favicons are always square, so if you upload a rectangular image, this tool automatically crops it to a centered square before resizing. For the sharpest result, start with a square logo or image where the important content is centered, so the automatic crop doesn't cut off anything important.

Frequently asked questions

Why do I need so many different sizes?

Different browsers, operating systems, and devices request different icon sizes for different contexts, a browser tab needs a tiny 16×16 icon, while an iPhone home screen icon needs a much larger, more detailed 180×180 version. Providing the full set ensures your icon looks sharp everywhere.

What's the difference between favicon.ico and the PNG files?

The .ico format can bundle multiple resolutions into one file and is the most universally recognized favicon format, especially for older browsers. The individual PNG files are used by modern browsers and specific platforms (like Apple touch icons) that expect a particular file and size.

Can I use a photo instead of a logo?

Yes, though logos and simple graphics tend to look clearer at very small sizes like 16×16 than detailed photos do, since fine detail gets lost at that scale.

Does my image need a transparent background?

It's optional. A transparent background lets the icon blend naturally with different browser themes, but a solid background works fine too, especially if your logo already has one.