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.
