Favicon

Favicon, or favorites icon, is a website image.

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

Photoshop

Δ

  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 on Internet Explorer

Root

Δ

/favicon.ico

HTML link element is not necessary

Directory must be root directory

File name must be favicon

File extension must be .ico

ICO

Δ

<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

GIF

Δ

<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

JPG

Δ

<link href="/directory/filename.jpg" 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

PNG

Δ

<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

Code

Δ

<html>
<head>
  <title></title>
  <link href="/directory/filename.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
</head>
<body>
</body>
</html>

Reference

Δ

W3C Favicon