Menu Home

Favicon | Favicon

Favicon, or favorites icon, is a website image.

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



  1. Install Adobe Photoshop
  2. Install Telegraphics 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


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


Directory must be root directory

File name must be favicon

File extension must be .ico


<link href="/mydirectory/myfilename.ico" rel="icon">
<link href="/mydirectory/myfilename.ico" rel="icon" type="image/x-icon">
<link href="/mydirectory/myfilename.ico" rel="icon" type="image/">
<link href="/mydirectory/myfilename.ico" rel="shortcut icon">
<link href="/mydirectory/myfilename.ico" rel="shortcut icon" type="image/x-icon">
<link href="/mydirectory/myfilename.ico" rel="shortcut icon" type="image/">

File extension must be .ico


<link href="/mydirectory/myfilename.gif" rel="icon">
<link href="/mydirectory/myfilename.gif" rel="icon" type="image/gif">

File extension must be .gif


<link href="/mydirectory/myfilename.jpg" rel="icon">
<link href="/mydirectory/myfilename.jpg" rel="icon" type="image/jpeg">
<link href="/mydirectory/myfilename.jpeg" rel="icon">
<link href="/mydirectory/myfilename.jpeg" rel="icon" type="image/jpeg">

File extension must be .jpg or .jpeg


<link href="/mydirectory/myfilename.png" rel="icon">
<link href="/mydirectory/myfilename.png" rel="icon" type="image/png">

File extension must be .png


<link href="/mydirectory/myfilename.svg" rel="icon">
<link href="/mydirectory/myfilename.svg" rel="icon" type="image/svg+xml">

File extension must be .svg


<!doctype html>
    <link href="/mydirectory/myfilename.svg" rel="icon">

Adobe Photoshop

Telegraphics ICO Format

World Wide Web Consortium (W3C)