Menu Samaritan's Purse

FAVICON

Favicon, or favorites icon, is a website image.

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

ICO

CREATE

  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

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

LINK

<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/vnd.microsoft.icon">
<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/vnd.microsoft.icon">

File extension must be .ico

GIF

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

File extension must be .gif

JPG

<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

PNG

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

File extension must be .png

SVG

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

File extension must be .svg

EXAMPLE

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

Adobe Photoshop

Telegraphics ICO Format

World Wide Web Consortium (W3C)