Life on Florida’s West Coast

Create Your Own Favicon

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting Suncoast Scribe!

You know those nifty little icons that show beside the URL of a site in the address bar of your browser or next to the site name in your favorites list? They are called Favicons and my site has been showing the icon for my web host, HostMonster. I decided I wanted to have my own, unique Favicon.

You can download a 16×16 pre-made icon for free on many icon sites. Or, you can make your own. So, here is how I did it.

1. I use Photoshop, so I downloaded a little plugin, because you need to be able to export into the Windows Icon (.ico) file format. It needs to be added to the FileFormats subfolder of the Plugins folder in Photoshop.

2. I used a graphic I had designed for a t-shirt and I rather like. I resized it down to 16×16 pixels and found that my image did not bode well at that size.

  

3. My next step was to work in a 64×64 pixel workspace and design something simpler from scratch. That worked much better.

 

4. Name the 16×16 pixel file favicon.ico by choosing Windows Icon (ICO) from the file format menu.

5. Now the file just needs to be uploaded into the same directory as your index page and that’s that. Easier than I had initially thought.

RSS feed | Trackback URI

15 Comments »

Comment by Flo
2007-07-14 13:12:41

Thanks for stopping by my blog! This is funny, just the other day I was trying to figure out how some people get those little icons. I didn’t know what they were called so I was having trouble figuring it out. Now, I know and will get one for myself. Thanks!

 
Comment by pfunk
2007-07-15 16:29:19

You know what I want for a favicon?
JMV!!!!!

heh.

that’s just plain silly, ain’t it?

 
Comment by Char
2007-07-16 06:51:38

Angie - you did a great job explaining that! Thanks for stopping by some of my sites.

 
Comment by Elizabeth
2007-07-16 08:26:00

Angie- I am so glad you posted this because I was just wondering how to do that! We don’t have Photoshop but XP came with Paint, do you think it would work in that? I want the blue geranium from my blog header to be my favicon!

 
Comment by Sindy
2007-07-16 09:46:01

I need to do this for my site. :)

 
Comment by Angie
2007-07-16 13:08:03

Elizabeth — I’ll see if I can’t just do it and send it to you.

 
Comment by Sunil Parmar
2007-07-16 13:11:03

Hi there,
It was nice, Short and to the point.
A good read. :)

 
Comment by Cynthia Blue
2007-07-16 23:13:14

Wow you do nice work! I just goof off with favicons, don’t suppose you make some for other sites? :)

 
Comment by Jason
2007-07-17 01:16:18

I created a favicon awhile back. Wish I would have read this because it would have saved me a little time. I will also check out that Photoshop plugin. Thanks

 
Comment by Agring
2007-07-17 12:44:23

Thanks for commenting on my blog! This is really cool faveicon. Thanks for sharing the tut!

 
Comment by Kat
2007-07-18 22:57:40

I have tried it with my blog a bunch of times, but it doesn’t seem to want to work right. :(

 
Comment by Bush Mackel
2007-07-19 08:44:42

I gotta get off my butt and take care of this. I’ve been sleeping on it for about 4 months now! Thanks for the reminder. (#):)

 
Comment by Jez
2007-07-22 17:01:44

I use a free online tool for favicons, its easier than using photoshop and provides code for animated images.

The favicon you are using on this site would look really cool if you animated it to rotate;-)

I have a post with a link to that favicon generator here:

http://www.sitelogic.co.uk/create-an-animated-favicon-for-worpress/

 
Comment by Rose
2007-07-22 19:04:33

Thanks for stopping by my blog! Angie this was really helpful so I have stumbled it. Please drop by my blog anytime.

 
Comment by breezie
2007-07-26 10:00:41

I use a favicon on my blog as well, I think they help to give the blogs or website they are used on a little more of a personal touch, I know I remember avatars as well as favicons more so than links, the images seem to stick on ones mind more.

 
Name (required)
E-mail (required - never shown publicly)
URI
Subscribe to comments via email
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> in your comment.