How To Add A Favicon
These are the steps I took to create a favicon (pronounced fav-eye-con) and install it on my blog and web pages.
1. You’ll need an image (jpeg, gif, bmp – the usual graphic formats) that will be converted into icon format. It doesn’t need to be a particular size, but it does need to be square. Favicons are usually sized 16 x 16 pixels or 32 x 32 pixels.
2. As the favicon covers a very small area, the image must be clearly defined, detail will not translate well to the finished icon.
3. To convert the image to icon format, I went to the first site I fancied from the results of a Google search on keywords ‘favicon, free’ – named unsurprisingly Free Favicon.
If you don’t already have an image file you wish to use, you’re sure to find something suitable at this or a similar website.
4. Follow Free Favicon’s simple instructions – as you can see below, it’s all very straightforward. Click Browse, select the image file you want to convert and, hey presto, it’s ready to download. (There is also the option of creating a favicon that includes scrolling text.)
5. The downloaded folder is zipped and contains several files, but you just need to extract the one called favicon.ico and upload it to the root folder of the website you wish to display it on.
6. Open your blog’s mainindex.php (or if working with html, the appropriate web page) and insert the code underlined in red after <head> and before </head> (as illustrated below). Enter the URL of the favicon.ico you uploaded to the root directory (highlighted in yellow).
7. Save the amended file and open the appropriate web page to view its new accessory! The favicon should be visible in the browser tab and address window. If it’s not visible, refresh the page.
IMPORTANT TIP: Before you start altering code on your mainindex.php I’d strongly recommend backing up. A simple typo in the code can cause a serious headache.
Just copy and paste it into a Notepad file and SAVE IT.
There you go, that’s all there is to it. I’m no technical whizzkid, and I found it straightforward — once I’d figured out what I was supposed to do and where I was supposed to do it!
Now I have to refine my skills with Photoshop, and create my own minor masterpiece of a favicon!
Reward Rebel
Reward Rebel posts new content every few days - stay informed about new posts by subscribing to my RSS feed. Thanks for visiting!
Filed under Blogging, Favicon, How To, Working from home | Comments (7)
Favicon Follies
I’d be a liar if I pretended I’d found it easy to learn to hack Wordpress. After teaching myself to build websites using html, I was so thrilled with my accomplishment.
Then along came blog coding, and an entirely new ball game. Eeek, I shrieked in horror… nooooo, I wailed in despair! When will this learning curve level out a bit?
Today I’m delighted to have succeeded in adding a favicon to Reward Rebel pages – both the blog and web sales pages.
It’s a bit naff, as it’s my first attempt and you need a magnifying glass to see what the hell it is.
But that’s not important, I can redo the graphic standing on my head (OK, OK, only metaphorically).
My problem had been – what code and where does it go? And do you know how I figured it out? I spied on other blogs’ page source code!
I’m a sneaky ol’ rebel sometimes!
If you’d like to add a favicon to your blog or website, but don’t know how to do it, I’m just typing up instructions for what I did and they’ll be added here later today.
Reward Rebel
Filed under Blogging, Favicon, Internet Marketing | Comments (5)
