Favicon Generator

A favicon is the tiny icon in the browser tab, bookmark list and phone home screen that makes your site recognisable at a glance. Sites without one look unfinished and are harder to find among a dozen open tabs. Our free favicon generator creates a polished icon in seconds: either design one from one or two letters with your brand colours, or upload your logo and have it converted into the sizes websites need. You get the PNG files plus the exact HTML link tags to paste into your site’s head.

Quick Answer: Type one or two letters, pick background and text colours, and download your favicon PNG; or upload a square logo to generate favicon sizes 16, 32, 48 and 180 with the HTML code to install them.

Free Online Tool

Favicon Generator

Design a letter icon or convert your logo into favicon sizes.


Preview (shown at 64px; browsers display 16–32px):




<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”/favicon-180.png”>

How to Use the Favicon Generator

  1. Choose the letter mode for a clean monogram icon, or image mode to convert an existing logo.
  2. For letter mode, enter one or two characters (initials work best) and pick your brand colours.
  3. Preview the icon at small sizes; a favicon must stay readable at just 16 pixels.
  4. Download the generated sizes: 32 for browser tabs, 180 for Apple touch icons, plus 16 and 48.
  5. Copy the provided HTML link tags into your site’s head, or upload the main file as favicon.ico via your CMS or theme settings.

Key Features

  • Two creation modes: letter monogram designer and logo-to-favicon converter.
  • Live preview at realistic tab size so you judge it the way visitors will see it.
  • Multiple sizes generated: 16, 32, 48 and 180 pixel PNGs covering tabs, bookmarks and Apple devices.
  • Background shape options: rounded square, circle or plain square.
  • Ready-made HTML install snippet provided with the downloads.

Best Practices and Tips

  • Keep it bold and simple: one letter or a strong symbol beats a detailed logo shrunk to nothing.
  • Use high contrast between the letter and background; subtle brand shades disappear at 16 pixels.
  • If your logo is wide, crop to its most recognisable square part before converting, using the Image Resizer to prepare it.
  • After installing, hard-refresh your site; browsers cache favicons aggressively and may show the old one for a while.

Common Mistakes to Avoid

  • Uploading a detailed photograph as a favicon, which turns into an unrecognisable smudge at tab size.
  • Forgetting the 180-pixel Apple touch icon, so iPhone home-screen shortcuts show a blurry screenshot instead of your brand.
  • Using thin, elegant fonts for the letter icon; strokes thinner than about 15 percent of the canvas vanish when small.

Frequently Asked Questions

What sizes does a website favicon need?

The essentials are 16×16 and 32×32 for browser tabs, 48×48 for Windows shortcuts, and 180×180 for Apple touch icons. This generator produces all four as PNGs, which every modern browser accepts.

What is the difference between favicon.ico and PNG favicons?

The .ico format is the traditional container that bundles several sizes in one file. Modern browsers fully support PNG favicons declared with link tags, which is what this tool generates; most CMS platforms also accept a PNG upload and handle conversion for you.

How do I install the favicon on WordPress?

In WordPress, go to Appearance, then Customise, then Site Identity, and upload the 512 or 180 pixel version as the Site Icon; WordPress generates the rest. On a static site, place the files in your root folder and paste our link tags into the head.

Why does my old favicon still show after updating?

Browsers cache favicons separately and stubbornly. Hard-refresh with Ctrl+Shift+R, open the site in a private window, or visit your favicon URL directly to force the new version.

Can I make a favicon with a transparent background?

Yes: in image mode, a transparent PNG logo keeps its transparency in the generated icons. Letter mode uses a solid brand background by design, which tends to look stronger in tabs.

Related Tools