Free

Favicon and app icon maker

A favicon is the small picture in the browser tab. The same picture is used when someone adds your site to their phone.

Everything happens in your browser. Nothing you type is sent anywhere.

Letter, initials or emojiOne to three letters, or one emoji.

Background colour

Letter colour

Shape

Name of your site or app

Your icon

The 180 icon is drawn full square on purpose: phones round the corners themselves.

Single files

favicon-16x16.png (16 by 16 PNG)
favicon-32x32.png (32 by 32 PNG)
favicon-48x48.png (48 by 48 PNG)
apple-touch-icon.png (180 by 180 PNG)
android-chrome-192x192.png (192 by 192 PNG)
android-chrome-512x512.png (512 by 512 PNG)
favicon.ico (16, 32 and 48 together)

Code for your website

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

Paste inside the head of every page. Upload the files from the zip to the top folder of your website.

Manifest file (site.webmanifest)

{
  "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": "#b4521c",
  "background_color": "#b4521c",
  "display": "standalone",
  "start_url": "/"
}

What to do next

Read the guide: make your site installable as an app Free tools

Why free? These tools help you finish a website, and we are glad when you come back for the rest. They run in your browser: nothing you type is sent to us.