Favicons are these little 16 by 16 pixel icons that appear next to your browser tab. Here is a comparison between a site that has a favicon, and one that doesn’t:
Of course, after publishing this blog post, my blog now does have a favicon.
If your blog has it defined, and someone bookmarks your blog, your favicon will also appear next to your site, instead of a default icon:
In this blog post, I’m going to give you my take on why you should have a favicon, and hold your hands through the steps of creating a simple favicon, and placing it in your header code to make it appear.
Why Favicon?
The reasons are quite simple – branding & page completness.
Logo is a part of branding, and so should your favicon, and any part of your website as a matter of fact.
Remember, it’s the little things that make you stand out from millions of other bloggers. One extra screenshot, one extra paragraph of explanation, putting alt tags to your images, having meta keyword and description tags, and having a favicon for your blog.
I’m suggesting this, and it is quite possible that taking care of all these little things make you stand out not just in human eyes, but also in the eyes of major search engines, which helps you rank higher in search results. Higher ranking in the search results bring you more visitors to your blog, and more visitors to your blog motivates you to make a better blog, and so on.
So, perhaps the the real question is why NOT?
Now, on to creating a favicon!
Step 1: Create your icon graphic
I’m no graphic artist, so I simply used Microsoft Powerpoint (you can do this in Word also) to create a simple text-based graphic. In this case, I used the WordArt, a red outline for the text, and a rectangle filled with black color for background:
You don’t have to worry about making it super tiny, or to 16×16 pixels, because Dynamic Drive has an online favicon generator tool that will take your picture and size it down to the right size for you as I will demonstrate for you.
Step 2: Save the icon image
If you have Windows 7, then you may use the SnippingTool to do this. I have XP, so to capture what I created in Powerpoint, I used my all-time favorite screen capture softare called PrintKey – you may download it here.
Use PrintKey’s rectangle tool to capture a portion of the screen. In this case, I drew the rectangle as close to the HTSAB letter as possible, and also making sure the dimensions are close to a square. If it’s not a square image, the favicon generator will crop it to a square and you may lose part of the icon image you intended.
Step 3: Generate the Favicon
Now, go visit Dynamic Drive’s favicon generator tool:
1. Browse to the icon image you saved in previous step.
2. Click on “Create Icon”
3. Look at the preview, and if you are satisfied, down it to your computer.
Step 4: Update your header code to activate your favicon
Go to your WordPress Dashboard (or via cPanel File Manager), under Media -> Add New menu. We want to first upload the favicon file, so you can link it from your header file.
Once you uploaded it, you will be given the URL to your favicon. Copy it somewhere, like notepad.
Now, go to Appearance -> Editor menu. Click on Header (header.php) file, and somewhere among all the other <link rel=”…” > codes we want to insert our favicon code:
<link rel=”shortcut icon” href=”this is the URL to your favicon” type=”image/x-icon”/>
Note that you will substitute the URL to your favicon with the one you just uploaded:
If you do not find any <link rel=”…”> codes in your header file, a safe place to put it is right before the </head> tag.
Step 5: Refresh your page!
If you did everything correctly, your new favicon should show up on your next page refresh. This works for me in Firefox browser. If not, clear your cache by going to Tools -> Clear Recent History menu.
It may take up to 24 hours for it to show in Internet Explorer, as some people have reported. But, if you see it working in one browser, it should work in all browsers.
Show off your Favicon!
Leave a comment below with a link to your blog if you want to show off your favicon!
Sweet! You know I was just going to ask you last week how to do this! You definitely read my mind! Thanks for a great post!
hehe, you mean you didn’t know I can read minds?
hey, where is your favicon?
I finally had time today to work on the favicon but it seems to not appear =[
Try moving your favicon HTML code after the opening
tag, or right before the closing tag in your header.php file (see step #4). That shall fix it for ya.It still doesn’t work. =(
Hehe, looks like it’s in the wrong place again. I see it’s placed after <!–[if lte IE 7]> which will prevent the favicon from showing if your browser is IE 7 or above, and possibly other browsers.
Move your code to right before </head> tag and it should show up.
If you are looking for a web-base favicon generator (like Paint) then you can try this one:
http://www.favicon.cc/
People have made some pretty cool favicons with it.