How To Add A Favicon
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
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
Filed under How To, Favicon, Working from home, Blogging |
Was just browsing when I came across your post. Free Favicon is my site! Glad it helped you in making your favicon. Thanks for the link love. Really appreciate it.
LGR’s last blog post..Mozy April Promotion Code
Hi LGR,
You’re welcome for the link… Hey, I should be thanking you!
Thanks for the tutorial, worked just fine!
I was using a plugin because I couldn’t figure out the favicon thingy… glad I did now! I have way too many plugins, so here is one less!
Just tagged you BTW… you are under no obligation, take it as some link love as well
That said, I’d be curious to read your answers!
Zhu’s last blog post..Seven Random Facts
Hey Zhu,
I’m so thrilled that you followed my instructions to add a favicon. To receive positive feedback like this is brilliant and I love you to bits for it!
And thanks also for the link love.
Hey Layne, thanks so much for reminding me. I had a favicon before the upgrade to wordpress 2.5 and haven’t put it back up. Done now
Great tutorial!
[…] out my favicon code had messed up my rss feeds. As Layne says in this tutorial, you have to be very careful before […]
Hi there, Fragileheart,
(1) You’re welcome! In fact, you’ve reminded me that I should also upgrade.
(2) Ooh er, unfortunately, we all seem to learn this the hard way!