How To Add A Favicon To Your Website

What Is A Favicon?

A Favicon is a small image that is used as a websites favorites icon. Favicon’s help users find your website in favorites or bookmark bars by quickly recognizing the favicon. Usually company’s will use their logo, abbreviations or something specific to their brand.

favicon-what-is

A favicon can be created as .ico, .gif or .png image files and are 16×16 pixels in size.

Where To Place The Code

Traditionally favicon’s are placed in the root folder of your website (http://example.com/favicon.ico) because almost every browser will look in the root for a file named favicon.ico, but you can place your favicon in any folder as long as you add an HTML link in the sites <head> and have the correct image location (yourwebsite.com/images/favicon.ico).

Here is an example of the HTML code you will want to place in the head section of your site, usually placed below the <title>. Copy the code and paste into the head of your document and replace the .png file name and location with your own.


<link rel="shortcut icon" href="http://example.com/favicon.ico" />
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png">

Happy Coding!