Dec 09
Sandbox Sunday: 10 Steps to Installing a Favicon in Wordpress
Saturdays are now going to be my day off. Not a blog free day, but a writing free day. I’ll working in my sandbox (my place to experiment with the design of this site) and Sunday will be my day to blither on about what I achieved. It may be boring, but even I need a break from my intensity - I’m intense even when I’m not depressed! - so it’s weekends of fiddling, putting things in order, figuring out how to make them work, and getting away from everything clogging up my headspace.
The main job I was working on last night was converting this to a 3-column theme, but this theme isn’t set out in the most convenient way for doing that without screwing up all the styles so I didn’t get very far. It’s all a learning curve, though, so if I have to rewrite every template file, all the better.
The one thing I did achieve is now visible on your tab (if you use Firefox) and in your address bar. Notice that red squiggly thing? That’s my favicon, a tiny little sign of the shape of things to come and a kind-of-logo for The Cerebral Mum. But what is it?
It’s a neuron.
I took the original image (seen left) from Wikimedia Commons then I made sure the background was transparent, recoloured it, shrank it down and did a little work to make sure that it would display cleanly at that size before running it through Dynamic Drive’s FavIcon Generator. I actually tried a different generator as well, but this one gave me the best result. I also now have a slightly larger icon to use on my desktop.
My theme actually came with a favicon but it has never displayed so I had to fix it. And this is how I did:
10 Steps to Installing a Favicon in WordPress
Step 1
Delete the old favicon from the active theme’s file, if it has one. (I use Ftp.) If you have one, it should be in the theme’s main folder, not a sub-folder, and it will be called favicon.ico.
Step 2
Upload the new favicon.ico file you have generated (using the generator linked to above) into your current theme’s main folder.
Step 3
If you use WP-Cache, clear it. Also clear your browser’s cache. I use Firefox extension Cache Status so that I can do this from my statusbar whenever I need to. If you don’t have it, go to Tools : Options : Advanced and select the Network tab then push the button that says Clear Now. (I am being specific about this because, being the nuf-nuf I am, it took me a little while to realise why my changes weren’t displaying.)
Step 4
Open your blog’s homepage. If your favicon is now showing up, Yay! If not, you need to edit one little file. Be brave.
Step 5
In your WordPress Admin panel go to Presentation : Theme Editor. Select the file called Header from the list of your theme’s files on the right. Your screen will now show the title Editing header.php. If you don’t know PHP (and I don’t) this will look a bit daunting. Just make sure that you have a back up of that file. (I usually just click in the editing window and select all then paste it into a text file so I can revert without having to upload again.)
Step 6
Look for a line of code that begins <link rel="shortcut icon" and ends with /favicon.ico" />. If you have one, overwrite it, within those boundaries with the following code.
If you don’t have one, simply paste the following code beneath the tag <head>.
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
Save your changes.
Step 7
Clear Wp-Cache and your browser’s cache again, as per Step 3.
Step 8
Open your homepage. The favicon should now be displaying.
Step 9
In order to display the favicon in your subscribers’ feedreaders, upload another copy of your new to the main directory of your site (ie; http://yoursite.com/favicon.ico) because depending on the reader they use, it may not be picked up in your header.
Step 10
Go and have a glass of cognac. You now have a mini-logo!
Happy To Help
If none of this makes sense but you’d really like to have one, just ask me your questions in the comments form and I’ll see what I can do.
Also, I used FireWorks to do the editing so if you regulars don’t have the tools but have an idea of what you want, I’m more than happy to edit then generate the favicon file for you.
So…
My first Sandbox Sunday. I hope it was useful for someone.
December 10th, 2007 at 12:23 am
Ahh, so that’s what it is! I couldn’t work it out.
Favicons are good, especially when you’ve got 162 tabs open like I do …
December 10th, 2007 at 12:30 am
Lol. The favicon you have to think about…
December 10th, 2007 at 4:22 am
My favicon looks very boring in comparison to your very creative one. I am using the ‘Sandbox theme’ (or basis for a theme) on my blog. It is very versatile for styling with CSS.
December 10th, 2007 at 8:09 am
“Simple and graphic”, Sueblimely, not “boring”!
I looked at Sandbox as a base to work off. The trouble is that there is so much of this one I like and because it has all been handcoded (by an Italian too) it just doesn’t play well with others. As I’m more of a creative cut-&-paster than a coder, it’s going to be a long slog to get everything the way I like it. But hey, if I’m this excited about a favicon, think how proud I’ll be in 2023 when the rest is done!
December 10th, 2007 at 9:06 am
I am more of a coder - html/CSS really. If you need any help in this area please give me a yell.
December 11th, 2007 at 10:14 pm
Thank you. Will do.