How to put a favicon on your website
Have you ever noticed when you go to some websites there is a cool image in the address line, rather than the standard icon for your browser? Or when you add some sites to favourites, an image shows up next to the name?
These images are a favicon (favourites icon). They are called this because they were initially used when you saved a page to favourites. Nowadays, the favicon will show up whenever you visit a page that has one set.
To set a favicon for your page, you need to upload a favicon.ico file to your website. You kinda don't need to add any code to your pages for this to work, as most browsers will automatically look for an icon called favicon.ico - however, this is not the 'done thing' (i.e.: standards compliant), so you should state where the icon can be found using a meta tag in your webpage's head area. Also, you might like to use different icons for different pages - you can set the meta tag for each page to point to the particular favicon that you wish to use.
Steps to install a favicon on your website
- Create a 16px X 16px, 16 colour image with either a .bmp or .gif extension. Yay! There's now an awesome generator at https://www.favicon-generator.org/ which will generate all of your app icons too! Head over to there and generate your icons, then come back here and continue reading...
- Upload the generated images to the root directory of your website.
- The root directory is where your main index.html, index.php or index.asp page is (you know, the main page you get when you go to your website) as this is where browsers look for the favicon. If you are using the meta tags to show where the icon is located, then you can store them wherever you wish - in a folder just for icons, or even on another server, as long as you provide the path/url to where the files are so browsers know where to look for the favicon.
- Insert a link to it in all your pages that you wish to use the favicon.
- If your icons are standard (you haven't renamed any of the generated icons) and you uploaded them to your root directory, you don't NEED to put any code in your pages. However, if you have renamed your icons or placed them in a different location will also need to put a link in if you want to use something other than a file called favicon.ico.
Put these meta tags into the section of your website code:
<link rel="icon" href="/favicon.ico" type="image/x-icon">