on Tips

How to add favicon to your site

1 comments
compass
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. A web designer can create such an icon and install it into a website (or webpage) by several means, and most graphical web browsers will then make use of it. 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. Browsers that support a tabbed document interface typically show a page’s favicon next to the page’s title on the tab.

Basically, the easiest way to add one to your site is to create a 32X32 pixel image that will be your future favicon in Photoshop and save it as jpeg image somewhere on the disk.

Then go to Favicon generator (this is my favorite, but there are plenty more, just Google it) and upload it. It will generate favicon.ico file for you.

Simply download it to your computer. Upload the generated file (“favicon.ico”) to your site. Verify it’s there by typing http://mysite.com/favicon.ico in the browser’s location, where “mysite.com” is your site’s address.

After that simply add this line inside your and tags:

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

Most web browsers do not require any HTML to retrieve a favicon that conforms to the de facto file name and type (favicon.ico) located in the web site’s root. If no favicon link is detected upon HTML page load completion and no previous site visits are recorded in the browser’s history, a favicon.ico is requested automatically.

Additionally, such icon files can be either 16×16 or 32×32 pixels in size, and either 8-bit or 24-bit in color depth (note that GIF files have a limited, 256 color palette entries).

If it doesn’t show up in the browser, try clearing the browser’s cache.

For devices such as the Apple iPod Touch, iPhone, and iPad, one can provide a custom icon that users can display on their Home screens using the Web Clip feature.

The recommended size is 57 x 57 pixels, with 90 degree corners. However with the more recent higher definition screens on Apple’s products, Apple has their icon at 129 x 129 pixels.

The “apple-touch-icon” icon is modified to add rounded corners, drop shadow, and reflective shine. Alternatively, an “apple-touch-icon-precomposed” icon may be provided to instruct devices not to apply reflective shine on the image. Use one of the following example of code for HTML and XHTML.

<link rel="apple-touch-icon" href="/somepath/image.ico" />

or

<link rel="apple-touch-icon-precomposed" href="/somepath/image.ico" />

I hope that this tips will help users to find what they look for.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInShare on RedditShare on StumbleUpon