Favicon
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
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.svg" rel="icon">
</head>
</html>
Links
© 2021 Osbo Design