Branding can make or break your website, whether it’s a business or a blog. Your readers should connect with the theme of your site with they see your logo elsewhere. One way to increase your brand’s visibility is by creating a FavIcon. FavIcon is short for “favorite icon,” and is the small icon that appears in the URL browser bar. They’ve been around for a long time now, and it surprises me how many popular blogs and sites out there still don’t have a favicon.
FavIcons also appear on certain browser’s navigation tabs and on a reader’s bookmark list if he has bookmarked your site, so having a unique FavIcon can help readers easily remember your site. Try to use your site’s logo, initials of your website, or some prominent image that appears on your homepage. Having a FavIcon will also make your site look more professional; all the big sites are doing it.
Creating a FavIcon for your site is really easy. But since so many sites still haven’t taken advantage of this neat little feature, here’s are instructions on how to do it:
1. Decide on an image
A FaviIon is only 16 x 16 pixels, so you’re not going to have much room to work with. That’s why you should stick with something small, like a logo, initials of your site, or a small but prominent image on your site. The color of your favicon should reflect the main color of your site so that readers will more easily associate it with your site.
2. Create the favicon.ico file
There are many tools out there you can use to create a favicon, but here’s a simple way to do it.
- Use any photo editing software, like Photoshop or Gimp (which is free) and create a new 64 x 64 pixel canvas (so you can see what you’re doing without the image being too pixilated)
- Open your logo or image file and drag it onto the 64 x 64 canvas
- Scale the image and move it around until it fits in the 64 x 64 space
- Resize the image to 16 x 16 (if you’re using Photoshop, select Image Size > Resample Image so the small image doesn’t blur)
- Save the file as favicon.ico.
Or, if for some reason you can’t get your editing software to save in the .ico format, or the 16 x 16 image becomes blurry:
- Save the 64 x 64 file as a gif, jpg, png, or bmp
- Use the Dynamic Drive FavIcon Generator to easily create a 16 x 16 pixel .ico file from your image
If you’re still stumped by creating a 64 x 64 pixel canvas, just crop the image your want to use and upload it in the Dynamic Drive FavIcon Generator. But this method might stretch or squeeze the image, so I recommend making sure it fits in a 64 x 64 pixel space.
3. Upload favicon.ico to your site
Once your FavIcon is ready, place the favicon.ico file in your root directory, which is the directory where the index file is located.
If you are using software with templates that already have a default FavIcon, such as Wordpress, simply replace the favicon.ico in your theme’s folder with your favicon.ico file. After doing this, you don’t need to proceed to the next step.
4. Insert header code
Place the following code within the <head></head> section of each page of your site:
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
5. Make sure your FavIcon appears
Clear your cache (this is important!) and refresh your browser. You should see the new favicon in the URL browser bar. Please note that some browsers, notably Firefox, don’t immediately show the new FavIcon. You haven’t done anything wrong; just make sure you clear your cache and restart your browser. You might even have to wait a few hours or days to see the changes.
For advanced users, http://www.favicon.cc/ is a great site. You can import your 64 x 64 pixel or 16 x 16 pixel file, and create an animated Favicon that will really stand out. You can even browse through other users’ FavIcons if you’re stumped and need some ideas.
Comments on this entry are closed.
{ 15 comments }
This is very old news. By old I mean at least a year or two. Sadly, not many folks take advantage of this. I’ve had a favicon for quite some time. Just my two cents.
Yep, FavIcons have been around for a while, but I’ve found that a lot of people don’t know how to go about creating one. Until I started this site and did some some research, I thought they were just for the big sites like Google and Amazon. But any site can have one, even the little guys.
Favicon is indeed part of the branding strategy of any site. It does make a site stand out from the pack, so to speak. Nicely written article, Diana.
Yan
Blogging Tips’s last blog post..2009 is the Year of Internet Marketing
Wow! I never really thought about this. looks like I will need to create myself one.
Tom – StandOutBlogger.com’s last blog post..10 Things Climbing A Mountain Taught Me About Goals
It took me a little while but I finally added one of these to my newer blog. Except I used a plugin for wordpress
Anyway, nice little tutorial. Savin it for later.
Blog for Bloggers’s last blog post..My Recipe To A High PR
One day my favicon just started to show up. Maybe I signed up, but I don’t remember. If it’s that easy, why pay for it?
Ha Diana.. I almost made a post like this too but was planning to do it as a video. Anyway you wrote it very detailed-ly, so I shan’t try to do any funny things.
Ben
Make Money Online’s last blog post..Make Money Case Study: FREE Stuff Model Part 2/5
Favicons are great for building your brand and its so easy that everyone really should have one.
Mike Collins’s last blog post..50 Ways To Get Links To Your Site
Having a favicon is definitely a must when it comes to branding. It is also a must for anyone that is serious about their blog or website.
-Gerald Weber
Houston search engine optimization’s last blog post..Is Your CAPTCHA Killing Your Business?
Indeed, Favicons come in handy as a great branding tool. Getting your brand or site recognised is an important thing to do, and having your favicon pop up in someone’s bookmarks or on the browser bar is a big step.
Yeah, Favicon gives a uniqueness to the blog. I have created favicon for my blog few months back. I have to update my favicon in free time.
I visited your blog for the first time. looks interesting.
Nihar’s last blog post..Friday Night Links Party – 10 January 2009
Nice write up! It only takes a minute or two, so there’s really no reason for people not to have a Favicon…
drivelocity’s last blog post..Large Green Favicon in Firefox?
Cool, finally I'll know what to do
Visiting your blog has been a real breakthrough for me, I've learned so much. Thanks again!
hi thanks for nice posting .it blog is good and best them.
hi thanks for nice posting .it blog is good and best them.