Skip to content
Browser Tools

Favicon Generator

Make every icon your website needs, from favicon.ico to iPhone and Android icons, from a letter, an emoji or your logo. Download one zip with the HTML to paste.

Choose an image to see your icon

Paste this into your site's <head>

<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">

The zip has favicon.ico (16, 32 and 48 px), PNGs for browsers, iPhone and Android, and site.webmanifest.

Read the full guide: How to Create a Favicon for Your Website (ICO, PNG, Apple)

How to make a favicon

Quick answer: To make a favicon, choose text or an image, pick colours and a shape, download the pack and add it to your site.

  1. Choose text or an image. Type 1–3 letters or an emoji, or upload your logo (square PNG or SVG works best).
  2. Pick colours and a shape. Check the small previews: they show how the icon looks in a browser tab.
  3. Download the pack. The zip has favicon.ico, PNG icons and a site.webmanifest.
  4. Add it to your site. Copy the files to your site's root folder and paste the HTML code into the <head>.

Which favicon sizes do I need?

favicon.ico (16, 32 and 48 px) for browser tabs and Windows, a 180 × 180 apple-touch-icon for iPhones, and 192 and 512 px icons for Android and installed web apps. The zip includes all of them.

Tips for a clear favicon

At 16 pixels, details disappear. Use one or two bold letters or a simple symbol, with strong contrast between the icon and its background.

Frequently asked questions

How do I add a favicon to WordPress?

In WordPress go to Appearance → Customize → Site Identity → Site Icon and upload android-chrome-512x512.png from the zip.

Can I use an emoji as a favicon?

Yes. Type it in the text box. It's drawn with your device's emoji font.

Why isn't my new favicon showing?

Browsers cache favicons heavily. Open your site in a private window or clear the cache to see it.