Favicon

Favicon, or favorites icon, is a website image.

It displays next to the web address, tabs, and bookmarks.

ICO

<link href="/directory/filename.ico" rel="icon">
<link href="/directory/filename.ico" rel="icon" type="image/x-icon">
<link href="/directory/filename.ico" rel="icon" type="image/vnd.microsoft.icon">
<link href="/directory/filename.ico" rel="shortcut icon">
<link href="/directory/filename.ico" rel="shortcut icon" type="image/x-icon">
<link href="/directory/filename.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">

Directory may be any directory

File name may be any name

File extension must be .ico

Create

  1. Install Adobe Photoshop
  2. Install ICO Format
  3. Open Photoshop
  4. Create image
  5. Resize image to 16 x 16 or preferred icon size
  6. Click File
  7. Click Save As...
  8. After File name:, type favicon
  9. After Format:, select ICO (Windows Icon) (*.ICO)
  10. Click Save

Note: Flatten Image to create a better quality opaque image in Internet Explorer

Root

An HTML link element is not necessary when a favorites icon is in the root directory with the name favicon.ico.

/favicon.ico

Directory must be root directory

File name must be favicon

File extension must be .ico

GIF

<link href="/directory/filename.gif" rel="icon">
<link href="/directory/filename.gif" rel="icon" type="image/gif">

Directory may be any directory

File name may be any name

File extension must be .gif

Note: GIF favorites icons do not display in Internet Explorer 10 and below

JPG

<link href="/directory/filename.jpg" rel="icon">
<link href="/directory/filename.jpg" rel="icon" type="image/jpeg">
<link href="/directory/filename.jpeg" rel="icon">
<link href="/directory/filename.jpeg" rel="icon" type="image/jpeg">

Directory may be any directory

File name may be any name

File extension must be .jpg or .jpeg

Note: JPG favorites icons do not display in Internet Explorer 10 and below

PNG

<link href="/directory/filename.png" rel="icon">
<link href="/directory/filename.png" rel="icon" type="image/png">

Directory may be any directory

File name may be any name

File extension must be .png

Note: PNG favorites icons do not display in Internet Explorer 10 and below

Example

<html>
<head>
  <link href="/directory/filename.ico" rel="icon">
</head>
</html>

External

W3C Favicon