How to Add a Favicon to your Site ?
[02:12 | 2 comments ]

Adobe Photoshop tutorial - Favicon.ico — How To Create A Favicon In PhotoshopA Favicon is a little custom icon that appears next to a website's URL in the address bar of a web browser. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows. And when I say little, I mean 16 pixels by 16 pixels. So if you like a good design challenge try your hand at this one.

All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format, and because it's got a lot of intriguing features that GIFs and PNGs don't, read on to find out how to make one.

If you don't know how to create one for your own Web site or blog, check out the many, many matches for a Google search for 'how to create a favicon'. \m/

1) General Guidelines

A favicon is nothing more than a 16 pixels by 16 pixels icon, and the file has a .ico extension. As you can imagine it is pretty difficult to put complex graphics in such a small frame. When designing your favicon, therefore, you should concentrate on simple images or letters. Make sure that the color of the favicon reflects the color of your website, so that readers will be able to associate the icon with the site.


2) Using Photoshop (skip this point if you are not using Photoshop)

Adobe Photoshop is probably the best alternative for a well-designed favicon. The standard Photoshop can not handle .ico, so the first thing to do is to download a Windows Icon Photoshop Plugin (you can download it here).

Once you have the Plugin installed you should create a 64 x 64 pixels canvas and start playing with it. After you are done designing the favicon you will need to resize the image. Go to the Image Size menu and click Resample Image. This process will make sure that the image will not blur as you scale it down. Finally just save the 16 x 16 image as “favicon.ico”�.

3) Using MS Paint and web tools

Favicons are very simple image icons, meaning that even Microsoft Paint should be enough to create a good looking one. The easiest way is to create a 32 x 32 pixels JPEG image with Paint and then use the online service “Favicon from Pics“� to convert the JPEG image into a favicon.ico file.

4) Uploading the favicon.ico file

Once you are done with the favicon.ico file you should upload it to your site. Just make sure you place it in the root directory, which is the directory where the index file is located.

5) Coding

I used to include it in my Web pages with the following code:

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

If you are tring for blogs then search (ctrl +f ) bellow code,

<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

Where:
http://www.blogger.com/favicon.ico is your URL Web address.
And, favicon.ico your icon file.

Create the .ico image and save somewhere and give your link to the red part.

else serach in google about favicon.


but I found out that it's actually obsolete and there's a smarter, more XHTML legal and proper form, as detailed on the W3C site:

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml"

xml:lang="en-US"

lang="en-US">

<head profile="http://www.w3.org/2005/10/profile">

<link rel="icon"

type="image/png"

href="/somewhere/myicon.png" />

[…]

</head>

[…]

</html>



6)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.

To find your favorite icon, you can visit the sites below and download these icons for free:

  • Cool Archive and select from 4000 icons in 125 categories, this icon archive is one of the biggest and most complete collection on the net. These icons are available in both .ico (for your Website favicon) and .gif formats for your Webpage.
  • Leo's Icon Archive. The Icon Archive is a collection of icon sets of over 7000 high quality icons in gif and ico format.
  • Pay attention to any readme files before using any free icons or graphics files.

If you would like to design your own icon, you can use IrfanView, Microsoft© Paint, or visit Goldshell.com and download the Goldicon editor and create your own icon. It's free!

  • You don't have to be an artist to create an icon, but it helps.
  • Your image is limited to 16 x 16 pixes, but to create one start with a larger image, say 32 x 32 and reduce it to 16 x16.

About your .ico image. Your .ico image size must be 16 by 16 pixels in height and width - no execeptions! Let's face it, an image this size is tiny and you can't get too creative. Take a look again Another favicon.gif. If you also want to dislay your favicon on your Wepage, you have to convert this image to a gif file (file extension .gif)).

Check your image. Using IrfanView you downloaded and installed on your PC, check your .ico image:

  1. Make sure your image is sized to 16 Width 16 Height.
  2. The number of color used is limited to 16.
  3. Has a file name favicon and file extension of .ico (Windows icon).
  4. Change your image size, number of colors and file name/extension - if required.
  5. If you need help using IrfanView, click on IrfanView Help.

Upload your image. Next, Upload (FTP) this Favicon icon to your host in Binary Transfer Mode and place it in your root directory (which is the top directory for your Website) and where you have your html documents located.

Don't have a domain. Even if you don't have your own domain, you can still use a favicons on your site. But, you'll need to add the following code in between the HEAD Tags on each of your Webpages:
<link href='http://www.blogger.com/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'/>

Where:
http://i582.photobucket.com/albums/ss262/amaresh_83/MyLogo.png is your URL Web address.
And, favicon.ico your icon file.

Test your favicon file. In some cases your favicon may not appear when you test it. If you have this problem, following these steps:

  1. Delete all current favorites to your Website.
  2. Clear your History and Cache files.
  3. Clear your Recycle Bin.
  4. Restart (reboot) your PC.
  5. Bookmark your site. Your Favicon should appear.

Thanks,

-Amaresh

Bookmark and Share

2 comments

Mia said... @ 23 June 2009 at 01:32

where is your favicon ???

Dibyanshi said... @ 23 June 2009 at 03:08

Have you checked ?

see once again !!!

thanks for your comment ..

Good luck, if u ll find any difficuilt then let me know

Thanks,
-Amaresh

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words to help each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on http://bloghelpforbegineers.blogspot.com

Best regards,
-Amaresh