Add a Favicon To Your Website

There are 2 ways to add a favicon to your website.

1. The easiest way is to make sure your favicon is named ‘favicon.ico’ and then place it in the root of your website. In that case, you don’t have to add any code to the head of your HTML.

2. On the other hand, if your favicon is named something else, or it’s in the format of .png, gif, or .jpg, or if it’s in a directory other than the root or your website, then you need to add a line of code to the head of your HTML. If any of these situations apply to you, then use one of the lines of code below. The code must be placed in the head section of your HTML.

If your favicon is an .ico file type, then use this code:

<link rel="shortcut icon"
type="image/x-icon" 
href="http://yoursite.com/images/favicon.ico" />

In the code above, be sure to change the ‘yoursite.com/images/favicon‘ to the path and name of your own favicon file. You will not change the ‘.ico’ part because this code is only used for .ico files. And remember, you do NOT need the code above if your favicon.ico file is placed in the root directory of your website. You only need it if your favicon.ico is placed in a different directory, or hosted on some other site.

If your favicon is a .png, .gif, or .jpg file type, even if it’s in your root directory, then use this code:

<link rel="icon" type="image/png" href="http://yoursite.org/myicon.png" />

In the code above, be sure to change the ‘yoursite.org/favicon.png‘ to the path and name of your own favicon file. It can be in any directory.