HTML header content



<link rel="shortcut icon" href="/favicon.ico">

Favicon was introduced in 1999 by Internet Explorer 5. Mostly deprecated in favor of favicon.png, but still a good fallback solution.

.ico supports multiple versions of an image. favicon.ico should contain 16x16, 32x32 and 64x64 images.

ico file layers


The sizes attribute was introduced in HTML5 to specify several different versions of the same icon, and those can be PNG files.

<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">



Apple Touch Icon for iOS: the icon is used when your visitor adds your site to his home screen. Shouldn't be transparent (background will be set to black).


<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">


A tile for Windows tablets.


<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="">

IE11: /browserconfig.xml

<?xml version="1.0" encoding="utf-8"?>
      <square150x150logo src="/mstile-150x150.png"/>

Tile size: 270x270 is recommended.


Safari got pinned tabs in OS X 10.11. Safari pinned tabs use a new type of icon: mask-icon. If it is not provided - the first letter of domain uses. mask-icon must be a black square SVG image with no background.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="orange">

color - hover color.


<link rel="manifest" href="/manifest.json">

Came with Android Chrome M39.

    "name": "My website",
    "icons": [
            "src": "\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png"
            "src": "\/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image\/png"
    "theme_color": "#ffffff",
    "display": "standalone"

Images from the xml must be available: android-chrome-192x192.png, android-chrome-512x512.png.


<meta name="theme-color" content="#ffffff">

theme-color meta tag allows to set the toolbar color in Chrome for Android starting from version 39.



See how to generate a list of keywords.

Open Graph

og meta example:

<meta property="og:url" content="">
<meta property="og:title" content="Memorize Japanese kana">
<meta property="og:type" content="website" />
<meta property="og:image" content="">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta property="og:description" content="Memorize hiragana and katakana with mnemonics and flash cards game">

Image size = ~1200x1200.

Also see and app links.


Favicon Generator. For real.

Favicon – Why you’re doing it wrong at Favicon's blog
Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? at CSS-tricks by Philippe Bernard
Adding a Pinned Tab icon for Safari by Joost de Valk
Support for theme-color in Chrome 39 for Android by Pete LePage

Licensed under CC BY-SA 3.0