How to Create a Favicon for Your Website

The favicon is the tiny icon in a browser tab, next to a bookmark, and on a phone's home screen. It is small, but it is the visual signature of your site — the thing that lets someone spot your tab among twenty others. A site without one looks unfinished and generic. This guide explains what a favicon is, the sizes you actually need, and how to make one from an image or logo.

Why a favicon matters more than its size suggests

At 16×16 or 32×32 pixels, a favicon seems trivial. But it appears everywhere your site is referenced: browser tabs, bookmarks, history, search suggestions, and the home-screen icon when someone saves your site to their phone. A recognizable favicon makes your site feel legitimate and easy to find. The default blank globe icon signals "unfinished."

How to generate a favicon with this tool

Open the Favicon Generator tool.
Load a source image — ideally a square logo or a bold, simple graphic.
Generate the favicon files in the sizes browsers expect.
Download them and add them to your site.

Everything runs in your browser, so your logo is never uploaded.

Designing for a tiny canvas

The single biggest mistake is using a detailed image. At 16 pixels, detail turns to mush. A good favicon is:

Simple — one shape, letter, or symbol, not a full logo with text.
High contrast — it must be legible against both light and dark tab bars.
Square — favicons are square, so start from a square source or crop to one with Crop Image.
Bold — thin lines vanish at small sizes; thick, solid shapes survive.

The sizes you need

Modern setups use several sizes so the icon looks sharp everywhere: 16×16 and 32×32 for browser tabs, 180×180 for Apple touch icons on iPhones, and larger 192×192 or 512×512 for Android home screens. A good generator produces the set at once so you do not have to resize each by hand.

Adding it to your site

Place the files in your site root and reference them in your HTML `<head>` with the appropriate `link` tags. Most static sites keep a `favicon.ico` plus a couple of PNG sizes and an apple-touch-icon.

Related tools

Start from a clean, transparent logo by running it through Remove Background first, so the icon sits neatly in the tab. Need the source resized to a specific square? Resize Image handles it.

Privacy and limits

Generation is fully local — no upload, no size cap, nothing stored, offline once loaded. Open the Favicon Generator tool to give your site its signature.

Try the tool

Open Favicon Generator →