How to Make a Favicon for Your Website (Free, No Design Skills)

To make a favicon, upload a square logo or image to the Favicon Generator, which instantly outputs six correctly sized PNGs — from a 16×16 browser tab icon to a 512×512 Android icon — along with the exact <link> tags to paste into your site's <head>. No design software, no manual resizing.

This guide covers what a favicon actually needs, how to generate one with Toolbench, and how to add it to your site.

What a favicon is and why it matters

A favicon is the small icon that shows up in a browser tab, bookmarks bar, browser history and, on mobile, when a visitor adds your site to their home screen. Sites without one look unfinished next to tabs that have a recognizable icon — it's a small detail that affects how trustworthy and polished a site feels.

The catch is that one icon isn't enough. Browsers, Android home screens and iOS home screens each expect their own size, so a proper favicon set is actually several PNGs generated from the same source image.

How to make a favicon with Toolbench

1. Open Favicon Generator.
2. Drop in your logo, paste one from your clipboard, or click to choose a file. A square image with your logo filling most of the frame works best.
3. Adjust Padding (0–30%) if your logo needs breathing room inside the icon — useful when the artwork touches the edges.
4. Adjust Corner radius (0–50%) if you want rounded icons instead of square ones.
5. Toggle Fill background on and pick a Background color if your logo has transparency and you don't want it floating on a transparent tile (some platforms fill transparent areas with white or black on their own).
6. Click any icon in the grid to download it individually, or click ↓ Download all to save all six in sequence.
7. Click Copy HTML to copy the <link> tags, then paste them into your site's <head>.

Everything happens in your browser — your logo is never uploaded to a server.

The six sizes it generates

File	Size	Used for
favicon-16x16.png	16 × 16	Browser tabs
favicon-32x32.png	32 × 32	Browser tabs (high-DPI), taskbar
favicon-48x48.png	48 × 48	Windows site icons
apple-touch-icon.png	180 × 180	iOS home screen icon
android-chrome-192x192.png	192 × 192	Android home screen icon
android-chrome-512x512.png	512 × 512	Android splash/app icon

A worked example

Upload a 512×512 PNG logo with no padding and no background fill. The tool scales the logo to fit each target size (keeping its aspect ratio and centering it), clips it to the corner radius you've set, and exports each one as a PNG. For each size it copies the HTML to drop in:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

How to install the favicon on your site

1. Download all six PNGs and place them at the root of your site, so each is reachable at a path like yoursite.com/favicon-32x32.png.
2. Paste the copied <link> tags inside the <head> of your HTML, right after <meta charset>.
3. Reload the page in a private/incognito window — browsers cache favicons aggressively, so a normal reload can keep showing the old one.

Tips and common mistakes

• Start with a square source image. The generator fits your image inside each square canvas, so a wide logo will end up small with empty space on the sides unless you crop it to square first with Crop Image.
• Keep the design simple. At 16×16 pixels, fine detail and small text disappear. A bold mark or a single letter reads far better than a full logo.
• Use padding sparingly. A little padding (5–10%) can stop a busy logo from looking cramped against a browser tab's own edges, but too much shrinks the mark further than it needs to be.
• Don't skip the larger sizes. Even if you only care about the browser tab, the 180×180 and 192×192 icons are what show up when someone saves your site to their phone's home screen.

Related tools

• Crop Image — crop a logo to a square before generating icons.
• Resize Image — resize an image to exact pixel dimensions.
• Color Palette Extractor — pull a brand color to match your favicon background.
• Convert Image Format — convert a logo to PNG if it's in another format.

Frequently asked questions

Do I need all six favicon sizes?

Not strictly, but each one covers a real case: browser tabs, Windows, iOS home screens and Android home screens all look for their own size. Generating and uploading the full set means your icon looks sharp everywhere instead of being stretched or shrunk by the browser.

What image format should I upload?

Any format the Favicon Generator can open works, but a PNG or SVG-exported-as-PNG logo with a transparent background gives the most control, since you can then choose whether to fill that background or leave it transparent.

Why does my favicon still show the old icon?

Browsers cache favicons separately from the rest of the page. Reload in a private/incognito window, or clear the site's cached data, to see the new one.

Is my logo uploaded to a server when I use this tool?

No. The image is decoded and redrawn entirely in your browser to produce the icon files; it's never sent anywhere.

Can I make the icons rounded instead of square?

Yes. Use the Corner radius option — set it above 0% and each generated PNG is clipped to that radius before export.