Favicon, or favorites icon, is a website image.
It displays next to the web address, tabs, and bookmarks.
ICO
Create
- Install Adobe Photoshop
- Install Telegraphics ICO Format
- Open Photoshop
- Create image
- Resize image to 16 x 16 or preferred icon size
- Click File
- Click Save As...
- After File name:, type favicon
- After Format:, select ICO (Windows Icon) (*.ICO)
- 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>
