In this article I’ll describe various methods of creating and adding a favicon to your website or Wordpress blog. Below is a short explaination on what a favicon is for those who are unfamiliar with the term.
A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a pixel square icon associated with a particular website or webpage. Webdesigners or bloggers can add such an icon to their website. Browsers that provide favicon support typically display a page’s favicon in the browser’s address bar and next to the page’s name in a list of bookmarks.
Finding the right favicon
There are a lot of resources for finding a favicon that suits your website or blog if you don’t want to create one yourself. Here are a couple of websites that supply download ready favicons.
- Free Favicon: a clean website with a nice database of favicons in various categories.
- Favicons R.us: has a nice collection and a custom made service.
- IconJ: huge database which also includes animated favicons.
Use an online favicon converter
If you have an image that you would like to use as your favicon you can convert this image to a suitable favicon format using an online converter. Below are a couple of websites that supply such an online converter. Remember to use a simple image, a favicon is very small and wont show a lot of detail. Also make sure your source image is rectangular as the favicon will be scaled to a rectangle as well.
- favikon: favikon is an easy to use online favicon creator. You upload an image, if the image uploaded is bigger than a standard favicon size you can select the area you want to use as your favicon.
- Faviconr: Faviconr can make favicons from jpg, gif, and png files. (You can create transparent favicons if your source file is a transparent png or gif file.)
- iConverticons: iConvert converts and creates Windows, Mac and Linux icons (including favicons) in one step!
Use an online favicon generator
If you havent got your design ready yet, there are also a lot of online favicon generators that allow you to create your favicon from scratch. Here are a couple of website where you can create your favicon online.
- Favicon.cc: favicon.cc is a tool to create favicon.ico icons.
- Iconfu: Iconfu is an easy-to-use free online icon editor, combined with an icon collection of over 12,000 free icons gathered from open-source collections around the world.
- Favicon Maker: This is a clean web based tool to create favicons from scratch or from an image.
Adding the favicon to your website or Wordpress
Now that you have your favicon it’s time to add it to your website. Upload the favicon.ico to the root of your website. For regular websites (not blogs like Wordpress) place the following line of code anywhere between your tags in your index file.
<link rel="shortcut icon" href="/favicon.ico" />
If you use Wordpress you will need to edit header.php in your theme directory instead of your index file. Place the following code between the tags in your header.php. You can edit your theme files from within the admin control panel of Wordpress.
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
If you are uncomfortable with editing the theme files you could also use a plugin for adding a favicon to your Wordpress blog without editing any code. Below are a couple of plugins that get the job done.
