Add Favicon To Your Site Creating, Converting to icon, Setup

[iGuest 3]

I thought I may as well list Linux (Fedora Core 3) instructions to creating favicons.

 

What I will be using for this:

 

KIconEditor

png2ico

 

Now we don't have to use KIconEditor, we can use any Graphics program that can create .png file formats, I just used KIconEditor, as it was pretty basic and was suitable for this.

 

run kiconedit

 

This program is used for creating KDE Icons for the KDE Graphical User Interface (GUI), and is an excellent program to use for what we want, it can create both 16 x 16 pixel and 32 x 32 pixel file sizes as well as whatever other sizes you want to specify, but since we're creating favicons, we want to create a 16 x 16 pixel sized area for us to work with. To do this:

 

Click on Edit in the menu bar, click on Resize near the bottom, change both sizes to 16, e.g. 16 x 16 and now click on OK.

 

We now have an area to work with, it might be too small to see, so using the magnifying glass with the + (plus sign) to enlarge it to a suitable size so that you can work well with it. I decided to create a simple floppy disk, I filled all the squares black, created the metal tab with a silvery grey and added a while label, with lines, I also marked out the holes with a light colour, white will do. Pretty simple wasn't it? Check out My Favicons Area under floppy to see how it turned out.

 

Now all that's needed is to save the file. So click on the Save button or browse to file save, default selection should allow us to save the file format as a .png image, if not, choose PNG Image as the filter and save the file as favicon to your home directory.

 

Now to convert it to an icon. We can now close KIconEditor, as we are now finished with it. Open up terminal, it should automatically start you off in your home directory.

 

Now all we need to do is to issue a simple command:

 

png2ico favicon.ico --colors 16 favicon.png

 

After executing that command we now should have a favicon.ico file in our home directory, what is left to do is to upload it to your web server in your root directory, fill in the HTML for it and be done with it.

 

For more information on png2ico, just do:

 

man png2ico

 

And that will explain the major use of that program. In short terms, basically what that command did was take the name of what we wanted to call it, specify how many colors we are using, default is 256 colors but we only wanted to use 16 to be safe and more browser compatible and then we told it which file we wanted to convert, and hey presto, done.

 

Well that's all for now,

 

Any comments or questions, please feel free to ask and be sure to check out My Favicons Area .

 

Cheers,

 

 

MC

[thedevil 0]

Its good learning about Favicon...and i feel the icon can strenthen your bussiness attitude....

[chilipie 0]

If anyone's interested, there is a very good favicon creator at DynamicDrive (it even supports transparency), and a good online Java favicon creator here.

[arunkumarhg 0]

I am wondering if MS dropped the actual check for favicons due to not all sites having them, this put unneccessary calls and left unneccessary browser logs.

 

I believe if you bookmark the site it'll show up in your bookmarks as well as revisiting the site from your bookmarks it'll display in the address bar.

 

You drag the IE picture in the address bar, to some place within the address bar and drop it, it'll reload the page with the favicon.  Weird as it may seem.

 

MS are really starting to be disappointing, heard their latest news?  Telling governments to not use Linux because they could be sued for over 228 Intellectual Property Infringement and then later to report that they never said such things.  Is Linux really scaring them?  Seems to be that way.  Good things take time.

 

Cheers,

MC

<{POST_SNAPBACK}>

 

Am using IE6 when i visit google.com i won't find those fov icons in the address bar, but when i use FireFox am able, Why not in IE6, do i need to configure, if yes hw to do it?

[iGuest 3]

Am using IE6 when i visit google.com i won't find those fov icons in the address bar, but when i use FireFox am able, Why not in IE6, do i need to configure, if yes hw to do it?

<{POST_SNAPBACK}>

Hey arunkumarhg,

 

I'll search the MS Knowledge base and find a 'factual' reason, to me the way I see it is browser improvement, if you didn't realise this, everytime you visit a website, your browser actually looks for a favicon icon in your root directory first, this means there has to be an exhange of server and client commands so that it can be processed and sent to you, else you'd be sent a 'Does Not Exist' error (won't be visible but the web server logs do log these errors).

 

It's a good idea for web developers to include a favicon image, as it makes loading time quicker, if favicon.ico does not exist, it will wait for a file timeout before it continues.

 

As far as I know, IE may have stopped favicon being detected to improve browser performance, or they want you to see their icon all the time.

 

If you visit a site such as https://www.google.de/?gfe_rd=cr&ei=BwkjVKfAD8uH8QfckIGgCQ&gws_rd=ssl, and in your address bar is the IE favicon, hold the shift key down, click and hold that icon with your left mouse button, and drag it over the URL and drop it (all done inside the address bar), the favicon should show now, if the site had one.

 

I've just updated my favicons site with a better layout, I will also fix up the present icon files to make them 100% compatible with IE so that they can be viewed without having to see black shadows, this means I will no longer be creating .png files.

 

cheers,

 

 

MC

[thedevil 0]

yes IE doesnot support favicons. I have used favicons in my site but it doesnot display. but firefox does.hence firefox is better in that context

[Josh_Jpn 0]

I found a plug-in for adobe photoshop that works really good for making icons http://www.telegraphics.com.au/sw/

[iGuest 3]

I found a plug-in for adobe photoshop that works really good for making icons http://www.telegraphics.com.au/sw/

<{POST_SNAPBACK}>

Hey Josh_Jpn,

 

I found that plugin a while back and it doesn't produce the icons correctly, nor can it handle transparency. Best way to create the icon, is to create a PNG graphic and convert it with png2ico which is also available for Windows. Link for png2ico can be found in the above post.

 

Photoshop supports PNG and so do many other graphic programs. It's probably overkill to use Photoshop for something like that though don't you think?

 

Cheers,

 

 

MC

[chris1234 0]

thanks master computers for your help on favicons, it was an excellent article, and in only 30 mins i had mine made and on the website, although i think it needs some improving, but i will think about that.
I can add that IRFANVIEW can save .ICO files and also that this is an excellent fast viewer to have (free as well).
Now hows about an article on adding metaddata and stuff for dummies?
Chris

http://forums.xisto.com/no_longer_exists/

[SingleDaddyof2 0]

...If you visit a site such as https://www.google.de/?gfe_rd=cr&ei=BwkjVKfAD8uH8QfckIGgCQ&gws_rd=ssl, and in your address bar is the IE favicon, hold the shift key down,  click and hold that icon with your left mouse button, and drag it over the URL and drop it (all done inside the address bar), the favicon should show now, if the site had one...

<{POST_SNAPBACK}>

MC, I tried your suggestion, and it did work. Unfortunately, when I clicked to go to another page on the same website, the IE favicon returned. I would have to repeat the click and drag maneuver on every webpage if I wanted to see the favicon on every webpage. Oh well, yet another reason why I'll stick with Firefox and Opera... l

[warbird 0]

Thank you man, this is great, i inmediatly going to use it in my site. It's just a little detail, but it makes you site looking much more professional.

[ignition 0]

Thanks a lot for the tutorial man, I was looking for this! :DWorking on a site icon right now...this is terrific :DCheers!ignition

[lesmizzie 0]

Thanks for the tutorial! I have always wondered how to do those icons and I never knew what they were called! I've seen those used a lot and I've always liked them. Thanks!

[Coach 0]

Thank you, it's easy and works on my machine with windows xp, but only with Mozilla Firefox not with win explorer.

[organicbmx 0]

thanks for that. i never really bothered with favicons on my previous sites.its just so easy that now it is a must. i took about 10mins. get image from other part of website as to carry theme, resize, clean up, save as bmp, convert, add code.*thanks again*anyone know if it is possible/in the pipeline for favicons with better quality/resolution. i guess that the next IE will have 256 colour support so that will become standard.