Home Menu

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

/favicon.ico

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

Link

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

GIF

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

JPG

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

PNG

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

SVG

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

Example

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

Adobe Photoshop

Telegraphics ICO Format

World Wide Web Consortium (W3C)

JesusBible
HTMLCSSJSPHPSVGMore
AboutTerms