So, what is a favicon? And how do you create one? I’ll show you how in this easy, step-by-step process.
What is a favicon?
A favicon (or ‘favourites icon’) is that little graphic or logo you see on web browsers. It’s usually found to the left of the main URL address at the top of your browser, but it can often be seen at the top left of an open tab or in your favourites or history column (next to the website’s name). Here’s an example of Amazon’s favicon:
How do you get one? And how to host it free too.
There are many suggestions on Google, but the easiest and quickest I’ve found is this:
1. Go to http://www.favicon.cc to create your masterpiece.
2. Here, you can design your own, or you can import an image. Either way, the options are on the left. If you’re importing, remember that you’ve only got 16×16 squares to be creative in. (It’s well worth having a play and experimenting.)
3. Scroll down a little and you can actually preview your favicon as you work on it. This is a remarkably handy feature because what you think looks good in the box doesn’t always look so hot when it’s reduced to its actual size.
4. When you’re happy with your artwork you can see the option near the bottom to Download Favicon. Choose a simple name, like, er ‘favicon’ and download it to your computer. (I usually go for the desktop and the favicon file should end in .ico by default.)
5. It’s now time to host it. Head on over to http://www.iconj.com which has Free Favicon Hosting.
6. Upload your favicon (I usually leave sharpen level alone).
7. You should get a screen saying something like FavIcon.ico Successfully Generated. Scroll down this page until you come to Host It at IconJ.com: (Direct Link) and simply copy the code that was generated and which starts with: <link rel=”shortcut icon” href … etc.
8. Almost there. We just need to paste this code into your blog.
9. Go into your WordPress.com blog and log in if you haven’t already.
10. Then go to Editor (Dashboard > Appearance > Editor). You’re in the right place if you see lots of HTML code.
11. Look for the column called Templates on the far right-hand side of the page. It begins with 404 Template, then Archives, etc. Scroll down and then click on Header (or Header file).
12. There’s different HTML now in the large box on the left, but just look for this close to the top: <head> and paste your code on the line underneath it.
13. Remember to click Update File (lower down the page) to save what you’ve done. You should even see your favicon appear straight-away.
14. Congratulations – you’re done!
Please note that if you alter or tweak your favicon you’ll be creating a new one and will need to re-host it. This will create new code, which will need to be pasted over the top of your previous code (in your Header file). Have fun!