Anonymous usage statistics

With your permission we record which pages are visited, using random identifiers, to understand how the site is used. Nothing is recorded unless you accept. Privacy Policy

Free tool

Favicon generator

Make the small icon for browser tabs and phone home screens from letters, an emoji or a picture. You get every size, a favicon.ico and the code to paste.

Runs in your browser. What you type is not sent anywhere.

One or two characters work best.

#0f766e
#ffffff

Or use a picture

PNG, JPG, WebP or SVG. It is cut to a square from the middle.

How the icon looks in a browser tab.

  • 16px
  • 32px
  • 180px
  • 192px
  • 512px

Code for your <head>

Put the files at the root of your site, then paste this inside the head of every page.

<link rel="icon" href="/favicon.ico" sizes="any"><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" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest"><meta name="theme-color" content="#0f766e">

site.webmanifest

Lets phones use the two larger icons when the site is added to the home screen.

{  "name": "My site",  "short_name": "My site",  "icons": [    {      "src": "/android-chrome-192x192.png",      "sizes": "192x192",      "type": "image/png"    },    {      "src": "/android-chrome-512x512.png",      "sizes": "512x512",      "type": "image/png"    }  ],  "theme_color": "#0f766e",  "background_color": "#ffffff",  "display": "standalone"}

The icons are drawn in your browser from what you chose. Letters use the fonts on your device, so check the result at 16 pixels before you publish. Browsers keep favicons for a long time, so a new icon can take a while to show.

How to use it

  1. 01Type one or two letters or an emoji, or choose a picture, then pick the shape and colours.
  2. 02Look at the small sizes in the tab preview and fix the contrast if it warns you.
  3. 03Download everything, upload the files to the root of your site and paste the code into your head.

Questions

Which files do I need?

favicon.ico for older browsers and tools, the 16 and 32 pixel PNGs for tabs, the 180 pixel apple-touch-icon for iPhones, and the 192 and 512 pixel icons for Android through the manifest. The download includes them all.

Where do the files go?

At the root of your site, so that they open at /favicon.ico and /apple-touch-icon.png. Then paste the code shown into the head of your pages. A website builder usually has a place to upload a favicon instead.

Why is my new favicon not showing?

Browsers cache favicons hard. Close the tab, reload with the cache cleared, or open the site in a private window. It can still take a day to change in search results.

Can I use a logo with a transparent background?

Yes. The shape is filled with the background colour you pick, and the picture is drawn on top of it, so transparent parts show that colour.

Is my picture uploaded?

No. It is drawn on a canvas in your browser and never sent anywhere.

A brand that looks right everywhere

From the logo to the favicon to the social cards, we make identities that stay sharp at every size.

See our design work

More free tools

All tools