Have you ever noticed how some web sites have their own special icon that appears in your web browser’s list of favorites, and on the browser’s address bar? It also appears on the desktop if you create a shortcut to the site. An icon like this can help to make your site stand out on your visitors’ computers, and also adds an extra degree of professionalism to your design.
For example, if I add the BBC News web site to my list of favorites, notice the small black BBC icon in the address bar and in my Favorites menu:
This sort of icon is known as a "favicon", because its most common purposes is to appear on your visitors’ lists of favourite sites. If you want one for your site it’s not hard to do. What you need is a graphics program which has the ability to create and save an image in favicon format.
While there are many such programs around, some of which are downloadable for free, it doesn’t really make sense to install a program on your computer that you won’t use very often. There are quite a few online favicon editors that you access via your web browser, and these work just as well. A Google search for "favicon editor" or "online favicon editor" will bring up lots of them, so just pick one that works for you.
As an example I'll use the one at: http://www.mobilefish.com/services/favicon/favicon.php
It looks like this:
As you draw, click on the Create Favicon button to see how things are coming along. Here’s my attempt at being a favicon artist. The design is a cross between a pen nib and a letter W, in case you’re wondering!
With the design complete, click Download Icon and the site will download a file to your computer called favicon.ico. Don’t change the name of the file or it won’t be displayed properly by your computer or web browser.
All that remains is to upload the file to your web site using FileZilla. The rules about favicons state that the file must be uploaded to the root folder of the site. In our case, this means the public_html folder. If you put the file in any other folder on your site, it won’t work.
Having uploaded the file, we can now test it. Open your web browser, surf to your site, and you should see something like this:
For example, if I add the BBC News web site to my list of favorites, notice the small black BBC icon in the address bar and in my Favorites menu:
This sort of icon is known as a "favicon", because its most common purposes is to appear on your visitors’ lists of favourite sites. If you want one for your site it’s not hard to do. What you need is a graphics program which has the ability to create and save an image in favicon format.
While there are many such programs around, some of which are downloadable for free, it doesn’t really make sense to install a program on your computer that you won’t use very often. There are quite a few online favicon editors that you access via your web browser, and these work just as well. A Google search for "favicon editor" or "online favicon editor" will bring up lots of them, so just pick one that works for you.
As an example I'll use the one at: http://www.mobilefish.com/services/favicon/favicon.php
It looks like this:
To create your favicon, click the pixel boxes in the drawing area. The colour picker allows you to choose the colour of each pixel. Note that a favicon is a fixed size of just 16 by 16 pixels (some operating systems and
browsers support larger ones, but not all do, so stick to 16x16 if your editor offers you a choice of sizes). This means that your design will necessarily be fairly crude. Don’t try to cram too much information into a favicon as it just won’t look right. Equally, resist the temptation to use an editor which claims to be able to convert a digital photo or other full size image into a favicon. You can try it, but the results won’t be particularly appealing or comprehensible.
All that remains is to upload the file to your web site using FileZilla. The rules about favicons state that the file must be uploaded to the root folder of the site. In our case, this means the public_html folder. If you put the file in any other folder on your site, it won’t work.
Having uploaded the file, we can now test it. Open your web browser, surf to your site, and you should see something like this:
Notice how our new favicon appears in the browser’s address bar and also on the Internet Explorer tab.
You can even get the favicon to display on your desktop. Just right-click on your Windows desktop and then choose New, Shortcut. For the location of your shortcut, type the web site’s address.
but if you have already knowledge in design using tools like photoshop or illustrator you can convert your image in icon using a favicon generator on this link: http://tools.dynamicdrive.com/favicon/ .
Don't forget to add the tag <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> between the head tag <head> </head> and the right location of the favicon icon, in this example the favicon is located in the main folder, but if you save your image in the images folder, so follow as shown : href="images/favicon.ico" . Simple and nice for your web page, enjoy it! :)
0 comments:
Post a Comment