How to create a favicon

mustaq · 10-21-2005, 11:14 PM

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!

intelliot · 10-23-2005, 01:34 PM

I've also used "FavIcon from Pics" with great success ( chami.com/html-kit/services/favicon ).

wissam · 10-24-2005, 08:10 AM

or even animated ones
http://www.googlecommunity.com/post-47407.html

10-21-2005, 11:14 PM	#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!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How do I create an account?	brum	Gmail Forum	13	07-22-2007 11:42 PM
how to create a web server	seomumbai	Domain Name Forum	2	10-18-2006 07:24 PM
how to create this adsense? ?	myinnet	Google AdWords & AdSense Forum	6	08-02-2006 01:39 AM
any tool to create mapsite?	net007	All About Google	2	06-27-2006 05:28 AM
Favicon for GoogleCommunity ?	tokkolo	GC Announcements	57	09-17-2004 09:19 PM

10-23-2005, 01:34 PM	#2 (permalink)
intelliot Google Guru Join Date: May 2004 Posts: 2,527 Thanks: 15 Thanked 49 Times in 28 Posts	I've also used "FavIcon from Pics" with great success ( chami.com/html-kit/services/favicon ).

10-24-2005, 08:10 AM	#3 (permalink)
wissam Googler Join Date: Jul 2005 Location: tripoli/libya Posts: 99 Thanks: 0 Thanked 1 Time in 1 Post	or even animated ones http://www.googlecommunity.com/post-47407.html

GoogleCommunity Sponsor
Use coupon "forum" for 50% Off!


Sponsored Links