Your icon

One or two characters read best.

64%
22%

Shown in the tab preview and the web manifest.

Previews

Each size is drawn on its own, so small icons stay crisp.

Maple Studio

  • 16 × 16

    Browser tab

  • 32 × 32

    Tab on sharp screens

  • 48 × 48

    Search results, Windows

  • 180 × 180

    iPhone and iPad home screen

  • 192 × 192

    Android home screen

  • 512 × 512

    Install and splash screen

Add it to your site

Put the files in your site's root folder, then paste this in the <head>.

HTML

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

site.webmanifest

{
  "name": "Maple Studio",
  "short_name": "Maple Studio",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#2875c5",
  "background_color": "#ffffff",
  "display": "standalone"
}

The favicon.ico holds the 16, 32 and 48 px icons as PNGs inside one file, which every current browser reads. If you skip the .ico, the PNG links alone work in all modern browsers.

Free Favicon Generator by Hiyaly