How To Add A Favicon To Your Site

First, what is a favicon? In the image below it is the little picture of my head that is shown in the browser address bar, and in the tab for the web page I’m visiting. It also appears as the bookmark icon if you save my site to your favorites. It can be anything, your logo, your face, a familiar symbol or something that you wish to brand your site with.

Blog Tech Guy Favicon

Second, how do you get one on your site? The easiest way I have found for people to do it themselves is to follow these steps.

1. Find/create the image you want to be used as your favicon. It doesn’t really matter what the size of this image is, but a square image is best. The final image will be 16×16 pixels so bear in mind it’s going to be small when finished, so see if it looks good that small first.

2. Go to HTML Kit here. This is a great FavIcon From Pics generator.

3. Simply upload your image here and it will then provide you with an example of the image and a link to download it from. I highly recommend NOT using the animated version, unless you want to annoy your visitors.

4. The image will be in a zip file, so extract favicon.ico to somewhere you will remember on your computer (the Desktop is usually easiest).

5. Upload the favicon.ico to your website, either via FTP or through WordPress (simply go to Write as if you were writing a post and Add image. You don’t need to save the post after it uploaded). Either way remember/copy the URL to the file once it is uploaded.

6. Finally you will need to edit the header of your website to tell the browser where the favicon is located. In WordPress you can do this through Design > Theme Editor and selecting header.php. Some themes will already have a line mentioning favicon.ico so you simply need to edit that line, else before the closing tag insert this line:

The image does not always appear first time, browsers are a little picky about displaying them, but you can always try in a different browser, or delete your browser cache/temporary internet files, closing the browser and restarting. If you have done steps 5 and 6 correctly it WILL work, have faith. You can even ask a friend if they can see it on their computer.
It’s a nice little touch to a website that can add an air of professionalism and branding.
[Thanks to my client Oriana for the idea for this post!]
 32 thoughts on “How To Add A Favicon To Your Site”
  6.  Pingback: Favicon: A Tiny Brand for Your Website | Author EMS
  10.  Hi Joel,
     I have been able to add favicons to 3 of my 4 blogs but the 4th blog just does not seem to want to cooperate.  I go to enter the header.php file in the same fashion as I used for the other 3 but still at a roadblock.  I tried changing the blog themes but that did not work.  Any ideas?  I know the solution is there but I just need to find it.
    Thanks!
     Erik von Werlhof
    Reply
  11.  Pingback: Cool Wordpres How to Videos and Plugines | Hillbilly Direct
  22. That is a brilliant little easy tutorial
    I’ll try that the weekend. Makes our sites a little more personal, nice!
    thanks Joel
    Helen Vaughan-Jones
    Reply
  23. That is a brilliant little easy tutorial
    I’ll try that the weekend. Makes our sites a little more personal, nice!
    thanks Joel
    Helen Vaughan-Jones
    Reply
Leave a Reply to Char (Online Tutor: Academic MCancel reply
    
 
               
%d bloggers like this: