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.
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.
This is possible in Blogger/Blogspot, and is pretty much the same process. Take a look here and here.
I’ll try that the weekend. Makes our sites a little more personal, nice! thanks Joel
web Design london
Awesome! That was easy even for a non-techie like me.
web Design london
Thanks. This is possible in Blogger/Blogspot, and is pretty much the same process.
web Design london
Thanks. This is possible in Blogger/Blogspot, and is pretty much the same process.
web Design london
[...] you may find you can add your favicon through WP itself. For more information, consult this helpful blog post or the WP [...]
I’ll try that the weekend. Makes our sites a little more personal, nice! thanks Joel.
@jamescraigmtts No worries, thanks!
My blogging platform wont let me upload an ico field in a blog post. Therefore I cannot get the url to the image to add into the header.
Any ideas.
I am using posterous and my site is here: http://www.websoup.biz
Hi! I’ve never used Posterous, but apparently it is possible:
http://nischal.posterous.com/how-to-change-posterous-favicon-and-add-your
Really awesome post and great explanation.
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
Strange that it doesn’t work on just one, if it works on one site then it should work on all. What is the site? There is a free plugin that might help:
http://www.maxblogpress.com/plugins/mfi/
[...] How To Add A Favicon To Your Site | Blog Tech Guy [...]
Great! No problem!
Great! No problem!
Awesome! Got mine up on the site I’ve been working on thanks to your info.
Awesome! Got mine up on the site I’ve been working on thanks to your info.
Awesome! That was easy even for a non-techie like me. Thanks!
Great, glad I could help
Awesome! That was easy even for a non-techie like me. Thanks!
Great, glad I could help
Hi
This is brilliant but can u please help me out how it will work for blogspot
Thanks. This is possible in Blogger/Blogspot, and is pretty much the same process. Take a look here and here.
Hi
This is brilliant but can u please help me out how it will work for blogspot
Thanks. This is possible in Blogger/Blogspot, and is pretty much the same process. Take a look here and here.
Glad I could help
Glad I could help
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
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
aaaargh! joel~i am transferring funds
have wanted one of these for ages. am twittering about it now
aaaargh! joel~i am transferring funds
have wanted one of these for ages. am twittering about it now