Improve your visibility with a favicon
Help your visitor to easily identify your website. For his reason, many websites add a favicon. This is a small logo or icon that is displayed in the address bar of the browser when visitors visit your website. Also, if the visitor decides to bookmark your website, the favicon is displayed in the list of bookmarks. If a visitor opens his list of bookmarks, the favicon will help to easily identify your website.
How can you add a favicon?
Although this is a must have for every website, not all websites do have a favicon. It is very easy to add a favicon with a few steps.
- Make an icon or logo sized 16×16 or 32×32 pixels.
- Name the file “favicon.ico”.
- Upload the picture to your website.
- Add the following code in your html, between the <head> and </head> tags.
<link rel="shortcut icon" href="http://url-to-the-favicon/favicon.ico" type="image/x-icon">
If you have a Wordpress website you can add the favicon.ico file directly in your theme directory, in the same place as the index.php. Use the following code to have Wordpress automatically fill in the right url.
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory');?>/favicon.ico" type="images/x-icon">
If this is all to technical, use the favicon manager wordpress plugin. You can now upload the favicon from your admin panel.
How do you make a favicon
So uploading is the easy part. Making a logo or icon can be challenging.
There are a few websites that can help you make a favicon.
- Easy to use on-line favicon generator. Pick a color and type in some text. The generator will do the rest.
- If you already have an image you can use the favicon maker. You can also merge the favicon with a desktop icon.
- For the real perfectionist there is this favicon editor. In a 32×32 grid you can set the color of each pixel separately.
For the professionals there are also the specialized software products.
- Try using the demo of Microangelo toolset.
- Download the pixeltoolbox
- Use the freeware program Goldicon to edit and make your own favicon.
- Use photoshop starting with this tutorial to make a favicon.
If you are lazy, you could use existing favicons. Look at the following sites to download examples of favicons.
- Large collection of free icons.
- Download free icons from Yellowpipe.
- Fantastic paid for icons
- Download single icons for a low price starting at a few dollars.
Update: animated favicons
I forgot to mention the animated icons. As far as I know this is a firefox only possibility. You can use animated favicons just as you would use normal favicons. So the code is the same, only the image is different. It is advisable to use the html code above to include the favicon image into your html, you can then also use other filenames and other extensions.
You can find free animated favicons at this website.
Popularity: 25% [?]
Related posts
More Active Posts:
- Google Analytics graph one day behind (15)
- Help yourself being creative (5)
- Future of the captcha (4)
- Make a favicon (4)
- Does W3c validation provide benefits to SEO (4)
- The 15 rules of quality hyperlinks (3)
- Captcha alternatives (2)
- Do people click on your website in Google? (2)
- Design: Daddy Yankee and his new CD (1)
- How to lead visitors to translations (1)
I am a Dutch guy working to make a business out of the internet. On this weblog I share my finds about usability and searchability doing my best to avoid second language writing...
Great overview of favicons! I think it’s great to see more favicon coverage in the blogosphere. I find them to be an invaluable marketing tool. For a closer look at the “ins and outs” of favicons, check out Everything You Ever Wanted to Know About Favicons. Hopefully it will add further benefit to your already excellent article. Cheers!