Today I thought I would share the little revelation I had today about customising the bookmark icon for wordpress sites. Although its just a tiny change, its important to keep on with improving yourself and surroundings; if you stay still you will stagnate. Its also fun!
My girlfriend Amanda asked me about changing the wordpress ‘W’ icon that sits at the top left of her blog site (on the firefox / internet explorer window) and I realised that my own page had no icon at all! Just a blank sheet.
First of all I searched online to find out what that little icon at the top left of each page is called. Turns out its called a bookmark icon. For all these years I knew that websites had their own icons at the top left, but I never ever thought to think of what it was actually called!
Next step is making an icon. I’m sure there are lots of places to get pre-created 16×16 .ico files but I thought I would be creative and use paintbrush to make a simple 16 by 16 pixel white background with a black circle. Saved this as a .gif file.
Then I needed to convert this to a .ico file. I went to this site, entered the path to the file and clicked generate favicon.ico button. Interestingly, I was asked if I wanted an animated icon or just a static one. I opted for static but theres nothing there to stop you from making an animated one. The site creates a zip file for you to download. It contains the ico file, an animated icon, and a readme file to let you know what to do.
It says in the readme file to add a line of html code to each page you want the icon to be shown:
<link rel=”shortcut icon” href=”favicon.ico” >
This is simple if you write all the html pages yourself, however writing blogs and pages using wordpress doesn’t give you easy access to the html behind each page. So I had to improvise for this.
I added a text widget to my sidebar on each page. I changed the mode from normal viewing text (like a microsoft word document) to HTML code, and added it in. I then saved the new text.
Finally I used the FTP client to upload the file to the server at the root folder. This is a complex step if you are unfamiliar with file uploading, but its a necessary step to even create your wordpress blog.
Hey presto! Every page from now on has the new bookmark icon. The total time taken to do this, including learning how to do it and create the icon; about 10 minutes. I hope this tutorial is useful to you and inspiring for you to give it a try
