FRIHOSTFORUMSFAQTOSBLOGSDIRECTORY
You are invited to Log in or Register a Frihost Account!

How to create a favicon

 


mustaq
A favicon is that little image that you see next to the website adress on most browsers. When you bookmark a page that has a favicon, it will display next to the bookmark name.

This is very simple to create.

Open adobe photoshop, create a new file with the dimensions 16x16px. This is very very small to draw into, so either zoom into it so it looks huge, or start with a larger image size and ajust the image size at the end so it is 16x16px.

Draw your image. Make it simple.
Once you are done save the file is a Windwos Icon file type (.ico) If you do not have this option in photoshop you may need a plugin. Call the file favicon.ico

Upload the favicon.ico to the root directory of your webspace. That is, the folder with the first index file in it.

Most browsers should automatically include the favicon, however just in case a user is using an old or wierd browser, include this line of code between the <head></head> tags of every page.

<link rel="Shortcut Icon" href="/favicon.ico">

("/favicon.ico") being wherever the file is located)

Thats all there is too it, you now have one more nice design feature to your website that took only a few minutes to create!
quick_basic
You can also create it with a GIF image I think. So if you do not have photoshop.
albusa
cool I really need it
Alienz
thanks for this. my site using favicon now Wink
mustaq
if any other tutorial you need just let us know we will post here so every can use it for free of cost
clogfan
You can also create a 32x32 icon. The browser automatically resizes it if necessary.
mustaq
yes you can as he said above and there are few web site where you can convert your image in to ico with in few second
supjapscrapper
mustaq wrote:
A favicon is that little image that you see next to the website adress on most browsers. When you bookmark a page that has a favicon, it will display next to the bookmark name.

This is very simple to create.

Open adobe photoshop, create a new file with the dimensions 16x16px. This is very very small to draw into, so either zoom into it so it looks huge, or start with a larger image size and ajust the image size at the end so it is 16x16px.

Draw your image. Make it simple.
Once you are done save the file is a Windwos Icon file type (.ico) If you do not have this option in photoshop you may need a plugin. Call the file favicon.ico

Upload the favicon.ico to the root directory of your webspace. That is, the folder with the first index file in it.

Most browsers should automatically include the favicon, however just in case a user is using an old or wierd browser, include this line of code between the <head></head> tags of every page.

<link rel="Shortcut Icon" href="/favicon.ico">

("/favicon.ico") being wherever the file is located)

Thats all there is too it, you now have one more nice design feature to your website that took only a few minutes to create!


Cool! I've been thinking about how I could add it for quite some time now so your little tutorial heps a lot !
You can edit favisons with almost any image processing tool like fireworks or even some less complete ones like icon editors. what important is like said in the tutorial is the size of the image 16x16 so that no dispaly problems occur.
biga57
mustaq wrote:
yes you can as he said above and there are few web site where you can convert your image in to ico with in few second


Hi,

If you know which website can do this job, could you please post a link ?

Thank you !
mustaq
you can try webzip software

i dont remember the websitetry try for googlewiththe keyword webzip you can find the link i think the website url start with spider
loserk
thanks bro...it really works...good job. Laughing
mustaq
hmm nice to know to get so many feed back i try to place this link which create online favicon with in few mins
tojo
thx for nice tip! and below site is in my favorites.
online favicon generator! hope this would be useful! Very Happy
http://www.chami.com/html-kit/services/favicon/
Reply to topic    Frihost Forum Index -> Miscellaneous -> Tutorials

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.