OK, you may be wondering just what a favicon is—don’t think you’re the only one. Plenty of folks who make blogs out there are not using any favicons, which means they either don’t know how to make one/add one or just don’t understand their important purpose.
To make things easy, I consulted the Wikipedia to give you a clear and concise definition and explanation of a favicon:
“A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage.”
Now, there really is nothing difficult about adding a favicon to your WordPress blog, and I’m going to show you the easiest way to do it!
I’m going to go through the 5 EASY steps you can take to add a favicon to your website TODAY!
1. Create an image in Photoshop or another design program, or find a picture you think will be suitable (take care to watch for copyright terms). You can also have someone else design the image-to-be-favicon for you. But YOU can do it, I know it.
2. Go to the following website: Favicons From Pics. Here you will be presented with the functionality indicated in the image below:
Simply browse on your computer to select the image you want to convert into a favicon, then click the “Generate FavIcon.ico” button. Sit back and watch the magic…
3. You will now see your brand new favicon! If you don’t like it, modify your image or perhaps you’ll need to choose another. If you DO like it, simply download the .zip file containing your favicon—you also get an “animated” favicon as a bonus if you’d like to use it, but I recommend that you don’t. It will drive your readers nuts! You also get a preview of what the favicon will look like in browser bars!
4. Here’s the seems-tricky-but-isn’t part: you’re going to need to add a line of code between your site’s
HEAD tags. It’s best to find your closing HEAD tag </head> and insert the line of code right before it. Here is the code:
link rel="shortcut icon" href="favicon.ico"
Just cut & paste that code right before your ending </head> tag. I feel the need to repeat that, because it’s the step most people forget or skip. Folks, if you don’t get this line of code in there, your favicon will not show. Just sayin’.
5. The FINAL step, after you’ve unzipped the file with the favicon, is to upload it to the ROOT of your site. It MUST BE the root of the site or this will not work. If you are not sure what the root of your site or blog is, check out this Wikipedia page or leave a comment and I should be able to help you.
So that’s it! Those are the exact steps I took to create, upload and display this blog’s favicon.
Favicons give your site another way to brand it. In addition, many people save bookmarks with just the favicon and no title. So if your site doesn’t have a favicon and somebody tries to bookmark it, they’ll get a blank square. Not Good!
Hope you liked this tutorial Be sure to subscribe to my RSS Feed or Newsletter to get updated on all the tutorial posts I make!
Thanks for reading, and I look forward to reading your comments below.
More From 2headedboy