• Home
• How
• About
• RSS
• Twitter

How to Add a Favicon to Your Website

Favicons let you customise your website so it stands out from the rest.

Favicons are the small 16×16 pixel icons used to add an extra level of branding or customisation to a website. Any site can have a favicon added to it at any time, using a couple of lines of code.

You Will Need

• A 16×16 pixel .ICO format image
• A text editor
• An FTP program

How to Add A Favicon to Your Site

1. Open your FTP software, such as CuteFTP or the open source (free) FileZilla.
2. Connect to your website using the FTP software. For most sites this involves giving the software the FTP URL, your FTP username and your FTP password. Follow the instructions provided by your web host or site hosting company for the exact details on how to connect.
3. Upload the .ICO file to the root directory of your website. For most sites this will be the “public_html” folder on your web server. Again, check the instructions on your web host for clarification.
4. Download your index.html file.
5. Open the index.html file in your text editor.
6. Add the following code to the index.html file anywhere before the “</head>” code:
   <link rel=”icon” type=”image/vnd.microsoft.icon” href=”http://website.address/favicon.ico”>
   <link rel=”SHORTCUT ICON” href=”http://website.address/favicon.ico”/>
   Where “website.address” is the URL of your website.
7. Save the index.html file.
8. Upload the index.html file to your website again, replacing the copy that is already on the site.

Top Tip

Icon files (the .ICO format) can hold multiple small images in one file, which makes them perfect for displaying different size icons at different times (such as a large icon when in the Favourites folder on a user’s Start Menu and a small icon when in the bookmarks on a web browser). You should therefore consider creating 16×16, 32×32, 48×48 and 64×64 pixel versions of your icon. Use Icon creation software to store all four sizes in one .ico file and upload this to your website. The computer accessing the file will then use the most appropriate size icon for each task.

Warning

Remember to use both lines of code on your site, rather than just picking one line. The first line is there to make sure Internet Explorer recognises your favicon, while the second line is for every other browser. Internet Explorer uses a different standard of code to all other browsers but designing your site just for IE (or designing it for “standard browsers”) means you are alienating a potentially rather large section of your audience. It’s best to just use both lines of code so you can reach as many people as possible – it’s not like it bulks up your files that much anyway.