Google Community - View Single Post

mustaq · 10-22-2005, 12:14 AM

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!

10-22-2005, 12:14 AM	#1 (permalink)
mustaq Googler Join Date: May 2005 Posts: 69 Thanks: 0 Thanked 1 Time in 1 Post	How to create a favicon 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!