Basic favicons are icon files that contain multiple images in one file. You should have 16x16, 32x32 and 64x64 sizes in the icon. You may optionally add 48x48.

favicon.ico

You can use convert command on Unix to create icon files. Original image should be a square for the best result.

convert original_image.png \
    -bordercolor white \
    -border 0 \
    \( -clone 0 -resize 16x16 \) \
    \( -clone 0 -resize 32x32 \) \
    \( -clone 0 -resize 48x48 \) \
    \( -clone 0 -resize 64x64 \) \
    -delete 0 \
    -alpha off \
    -colors 256 \
    favicon.ico

You can also use web apps to create icon files.

Create image on transparent background.
Resize it to 64x64 px.
Save it as `png`.
Upload it to http://converticon.com/.
Select icon and sizes 16x16, 32x32, 48x48 and 64x64.
Download the `ico`.

You should create .pngs for mobile devices. If you are lazy, use one png with the size of 152x152. Optionally define 32x32, 57x57, 72x72, 96x96, 120x120, 128x128, 144x144, 152x152, 195x195.

favicon-32.png   favicon-57.png   favicon-72.png   favicon-96.png
favicon-120.png  favicon-128.png  favicon-144.png  favicon-152.png
favicon-195.png

Minimal favicon syntax. Most browsers will use the first rule. IE9 and below use second rule.

<link rel="icon" sizes="16x16 32x32" href="/path/to/favicon.ico">
<!--[if IE]><link rel="shortcut icon" href="/path/to/favicon.ico"><![endif]-->

Refresh favicons when they change. You may force users to refresh favicon with a query string.

<link rel="icon" sizes="16x16 32x32" href="/path/to/favicon.ico?v=2">

Optional Favicons

Touch icon for iOS 2.0+ and Android 2.1+.

<link rel="apple-touch-icon-precomposed" href="path/to/favicon-152.png">

IE10 metro tile icon. The first rule is tile color.

<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/path/to/favicon-144.png">

Specific icons for different devices.

<!-- For iPad with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/ficon-152.png">

<!-- For iPad with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/ficon-144.png">

<!-- For iPhone with high-resolution Retina display running iOS ≥ 7: -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/ficon-120.png">

<!-- For iPhone with high-resolution Retina display running iOS ≤ 6: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ficon-114.png">

<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ficon-72.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="/ficon-57.png">

<!--  All that aren't covered above -->
<link rel="icon" href="/ficon-32.png" sizes="32x32">

Source

• Favicon Cheat Sheet