Everything You Need To Know About Favicon

Favicon is a little custom icon that appears next to a website’s URL in the address bar of a web browser. They also appear in the bookmarked sites list and also on the tabs in tabbed browsers.

In this post I am going to cover as much information about Favicon as possible. You will find everything about Favicon from designing to uploading and troubleshooting.

Size of a Favicon

Favicon is a mini-icon with 16×16 pixels. By designing a custom favicon design for your site you create some kind of a visual connection between your web-site and your sites’ visitors.

Add Favicon To Your Site

To add a Favicon to your site you need to upload a Windows .ico file, usually called favicon.ico, to the root directory of your site. You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format.

You can download the plugin from Telegraphics

Design a Favicon

Since 16×16 is a very small size it is recommended to start with a little bigger size 64×64 and then reduce it to the Favicon size 16×16. Try creating a simple design that incorporates colors from your website’s palette.

When you’re ready to test the design select Image > Image Size menu and enter 16 x 16. Click on Resample Image and choose “Bicubic Sharper” from the drop-down menu. This is the best setting for images to avoid getting blurred when they are re-sized.

Saving The Custom Icon

Go to File > Save As > Name the file favicon.ico.

Make sure the file saved in Windows Icon Format (.ICO). This format will be available only when you have installed the Windows Icon plugin.

Uploading The Favicon.ico File

The standard location for a favicon is the root folder of the directory (Index). Upload your Favicon.ico file to the root folder.

Make sure you don’t upload it to any other folder, otherwise it will not show up in the browser because most browsers look up the file in the root directory, if they don’t find the file there nothing will be displayed.

Usually browsers find the favicon.ico file automatically however some browsers will look for a direct link in the HTML source code to your site’s favicon.ico file. You can direct these browsers by adding this HTML code in the head section of your site (Index Page)

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>

If you are using GIF or PNG use this format instead

<link rel=”icon” href=”/favicon.png” type=”image/png”>
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>

Add Favicon To WordPress Blog

The above mentioned codes should do the job and show the favicon in the browser but if they don’t then you can try inserting this code in the header.php file of your blog.

Testing
If your new Favicon does not show up right away, try refreshing the page or clearing your cache — or put a ‘?’ at the end of the url, which will trick a browser into thinking the page is new and not cached.

Troubleshooting

Browser Issues: Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. Or try this trick: go up to the address bar, click on the existing (usually the IE default) favicon, then “jiggle” it a bit and let go. That will reload the page and should get the new favicon to show up.

Safari for the Mac will not display an updated favicon until the browser cache has been cleared. But choosing ‘empty cache’ from the menu won’t help because Safari stores favicons in a separate cache. Go to Edit > Reset Safari, and check “Remove all website icons”. If you can’t find that, you must empty the icon cache yourself. Look for it in User>Library>Safari>Icons. On the Windows version of Safari, find C:Documents and SettingsYourUserNameLocal SettingsApplication DataApple ComputerSafariWebpageIcons.db. Quit Safari, delete the file, restart Safari. (Sometimes you need to restart the computer too.)

On FireFox, clear the cache and restart the browser. On Opera, just refresh.

Inspire Yourself With Beautiful Favicons

To be recognized immediately, Favicons have to be visually appealing and fit to the design. It isn’t that easy to create a beautiful 16×16px mini-icon. Still, some designers manage to achieve tremendous effects.

http://www.heartprintsadoption.com/
http://www.patrickmonkel.nl/
http://maxvoltar.com/
http://www.bedandbreakfastbrescia.com/
https://www.getafreelancer.com/

Favicon Generating Sites

If you are not good in designing or finding it hard to make a good looking favicon for your site, no worries, there are many free favicon generating sites where you can just upload your logo and they will create a favicon.ico file for you. Here is the list of some of the useful sites to create favicons online.

Dynamic Drive – http://tools.dynamicdrive.com/favicon/
Favicon Generator - http://www.favicongenerator.com/
Gen Favicon – http://www.genfavicon.com/
My Faves – http://www.myfaves.in/

Special thanks to PhotoshopSupport for the troubleshooting part of this post.