Oct 182009
 

Favicons are the tiny icons that appear on your browser tabs when we open a website. Most modern browsers (IE/ Firefox/chrome) support favicons. Older versions of Internet explorer insisted on having an icon format file, but nowadays any image format goes. In case if favicons still seem mumbo jumbo to you, see the below screenshot for favicons from popular sites.

What are Favicons?

What are Favicons?

Most mainstream sites use favicons. Its a good exercise in branding your website and getting youo logo through to visitors even when the site’s tab in  not active in the browser. So how do you go about installing (don’t know if thats the word?) a favicon for your website? Since I have written articles for DotNetNuke and WordPress, I will provide instructions for both.

Before installing the favicon, we need to create one. Its fairly simple, Just create any 16 x 16 pixel image and save it as favicon.ico. You can also use the numerous online generators, or use MSPaint to create your own one.

For installing in DotNetNuke, use a FTP client like FileZilla with the username and password provided to you by the web host and copy your favicon.ico to the root directory. This changes the favicon for all the portals in your website. But what if you want different favicons for each portal? In that case go to the  DotNetNuke Root\Portal folder. Inside this you would have different folders called 0,1… n for each of your portals. copy the favicon.ico file to these folders for customizing the favicon for each portal. Pretty simple huh!!

Changing the icon for WordPress is slightly different. Here you have to go to your themes directory. Located in the WordPress_root\wp-content\Themes\<your_theme_name>\ would be a file called header.php.  Just below the head tag, place the following tag

<link rel=”shortcut icon” href=”favicon.ico” />

It would look like

favicons_WP

Once you are done with this copy the favicon.ico file to the root directory for your blog. Yes its the root, not the themes folder where you added the link.

Thats it. you should see your favicon in your browser!!