HTML Old School

Favicon can be any .ico , .png or .gif image.

Use one of the following codes to import favicon image:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/dir/favicon.png">
<link rel="icon" type="image/gif" href="/dir1/dir2/myfavicon.gif">

One document sometimes can have more favicon images depending on device:

<!-- Opera Speed Dial Favicon -->
  <link rel="icon" type="image/png" href="/speeddial-160px.png">
            
<!-- Standard Favicon -->
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- For iPhone 4 Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114.png">

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

<!-- For iPhone: -->
  <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57.png">