Favicon

Favicon, or favorites icon, is a website image.

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

Photoshop
ICO
GIF
JPG
PNG
Code
Reference

Install Adobe Photoshop
Install ICO Format
Open Photoshop
Create image
Click File
Click Save As...
After File name:, type favicon
After Format:, select ICO (Windows Icon) (*.ICO)
Click Save

Note: Flatten Image to create a better quality opaque image on Internet Explorer

/favicon.ico

HTML link tag is not necessary

Directory must be root directory

File name must be favicon

File extension must be .ico


                <link href="/directory/filename.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">

Directory may be any directory

File name may be any name

File extension must be .ico


                <link href="/directory/filename.gif" rel="icon" type="image/gif">

Directory may be any directory

File name may be any name

File extension must be .gif

Note: GIF favorites icons do not display in Internet Explorer


                <link href="/directory/filename.jpg" rel="icon" type="image/jpeg">

Directory may be any directory

File name may be any name

File extension must be .jpg or .jpeg

Note: JPG favorites icons do not display in Internet Explorer


                <link href="/directory/filename.png" rel="icon" type="image/png">

Directory may be any directory

File name may be any name

File extension must be .png

Note: PNG favorites icons do not display in Internet Explorer


                <html>

                <head>

                  <title></title>

                  <link href="/directory/filename.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">

                </head>

                <body>

                </body>

                </html>

W3C Favicon

Photoshop

Root

ICO

GIF

JPG

PNG

Code

Reference