How to make a favicon for your website from a logo or a letter

Open Favicon generator, drop in a square logo (or switch to From letters and type one or two characters), choose a background, shape and padding, then press Download all and Copy HTML. Upload the files to the root folder of your site and paste the tags inside the <head> of your pages.

Steps

1. Open Favicon generator.
2. Under Make it, choose From an image and drop in your logo (PNG, JPG, WebP or SVG), or choose From letters and type the characters.
3. For an image, pick Placement: Fill to crop it to the square, or Fit whole to keep all of it.
4. Choose a Background colour, or Transparent. Then a Shape (Square, Rounded, Circle) and Padding (None, Small, Large).
5. Type your Site name. It goes into site.webmanifest and the previews.
6. Check the previews of a browser tab and a phone home screen, then press Download all to get favicon.zip.
7. Press Copy HTML and paste the tags into the <head> of every page, or of your shared layout.

What you get

The HTML snippet points at these exact names, so keep them as they are when you upload. The tags look like this:

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<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" />

Design for 16 pixels

A favicon is usually seen at 16 or 32 pixels, about the size of one letter in the tab title. Details that look great in your full logo turn into a smudge there.

• Use the symbol, not the wordmark. If your logo has an icon and a name, crop to just the icon in Crop image first with 1:1.
• One or two letters. From letters is often clearer than a detailed logo. The letter colour is picked for contrast against your background, and you can choose Rounded, Sans or Serif type.
• Strong contrast. A pale logo on a transparent background can vanish on a light tab bar. A solid background colour makes it hold up in light and dark browsers. Color picker gives you the exact hex code of your brand colour from the logo.
• Padding. None fills the square for the largest possible mark; Small or Large leave breathing room, which helps circle and rounded shapes.

Two things the tool does for you

The Apple touch icon is never transparent. iOS fills transparent areas with black, so this one file always gets a solid background (white if you chose Transparent). It also stays square, because iOS rounds the corners itself.

The .ico holds three sizes. One favicon.ico contains 16, 32 and 48 pixel images, so it doubles as a PNG to ICO converter: drop a PNG in and the .ico comes out with the rest.

If the old icon still shows

Browsers keep favicons in their cache for a long time. After uploading, open the icon's own address (yoursite.com/favicon.ico) to check it is there, then hard-refresh the page or try a private window. Search results take longer, because search engines fetch favicons on their own schedule.

Questions

Where do the files go?

In the root folder of your site, next to your home page, so that /favicon.ico and the other paths in the HTML resolve. If you put them in a subfolder, change the paths in the tags to match.

Why does my favicon look blurry?

The source was small or very detailed. Start from a square image at least 512 pixels wide with a simple shape. An SVG logo gives the cleanest result.

Is my logo uploaded?

No. The icons are drawn and packed in your browser, and your logo stays on your device.

Do I need every file?

The .ico and the two small PNGs cover browser tabs. The Apple and Android files matter when people add your site to a phone home screen. Including them all costs very little.