Essential Keystrokes is…

where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my About page.

Connect

SubscribeFollow me on TwitterLinked In Stumble Upon What I Digg Email me
Mar
13

Tutorial – How To Create Your Own FavIcon

By Char

The Favicon.ico is a very small, custom graphic that appears in the menu bar, tab, and bookmark listing for a web site. All the major sites have them – you can pick out that Google “G” a mile away, right? You don’t need to be a graphic designer to create your own. You can make one for your site in just a few quick steps.

How to create a favicon.ico file

STEP 1: CREATE THE GRAPHIC

Start with your logo or an image that you want to associate with your brand. Open the file up in your favorite graphic editing program – personally, I use Macromedia Fireworks on my PC and Adobe Photoshop on my Mac.

Crop out as much excess white space as possible. Then reduce the size of the image to 16 x 16 pixels.

If your logo does not reduce well, you may want to improvise a bit and create a modified logo using your primary logo color and the first letter of your company name, initials, or a simple graphic that you associate with your brand. Since I don’t really have a logo for this blog, I chose to create my icon using design elements from my page – the little blue boxes.

STEP 2: SAVE & NAME THE FILE

In Fireworks, I just saved my 16×16 file as a low-res gif. Then I went into Explorer (my file manager) and renamed the file favicon.ico. Easy enough!

STEP 3: UPLOAD FILE & MODIFY CODE

Once the file is renamed, upload the file to you ROOT directory for your site. Don’t put it in your images directory.

Some browsers will autodetect your favicon, but to be sure, modify your site code. If you are using a template or includes, open the file that contains your header information.

Add this line of code to the *head* segment (within the tags):

Code

Upload the modified pages and get ready to test it out. You may need to clear your cache first, but your new icon should show up next to your site name now.

NOTES

There are some sites that will help you create your icon from your logo without using a graphics program. One I have found is Favicon Gallery. Plus there are plenty of examples of other icons there. Need more inspiration? Check out Inspire Yourself at Smashing Magazine.

Was this tutorial helpful? I’m sure this is not the only way to get this done, so if you have a better method, do share!!!

Categories : Graphic Design

19 Comments

2

Hey Char,

Should it be 16 x 16 or 32 x 32? Windows default size for desktop icons are 32 x 32 right?

Anyway, I tried using 32 x 32 and displayed on the browser, it works… so I guess both will work? :)

3

Kian – Everything I have read says 16×16, but perhaps the different browsers will resize accordingly. 32×32 would certainly give us more to work with. I’ll try the larger size with the next one I do – the one for my newly redesigned http://www.casualkeystrokes.com.

Gayla – thanks for kind words!

4

Or you could upload your image to this website and it’ll automatically generate your favicon for you:

http://www.chami.com/html-kit/services/favicon/

5

Hey Char,

Sorry for the second comment – a sidetrack observation when I posted the previous comment – I clicked the SOB logo instead of the “Submit comment” the first time I used the mouse. Could this be a good place for you to put a PPC advert, or should you highlight the submit button?

Just random thoughts. :)

6

David – thanks for bringing that link – that is a great option for those who aren’t as eager to get in there and mess with tiny graphics.

Kian – No apology needed!! That is one of the items on my list of things to tweak on this blog. It just might need to go higher up in the list – and now.

7

You’re very welcome Char.

I left you a message on MyBlogLog for the design tools I use. Please do let me know if there’s anything else you’d like for your kindness.

:)

8

Great stuff, as I’ve come to expect from you Char.

One thing you might want to answer is why would you do this? What’s helpful about a favicon? (I know the answer, but the people who find this tip via Google or other search engine may not).

Keep up the excellent work. Always appreciate learning from you!

9

Phil – other than being able to pick out your website in a sea of tabs, what other reasons make having a favicon a must?

10

I’ve tried this numerous times, but my lack of creativity has left me with ugly icons :P

Going to try again soon with some changes coming to my site.

11

TECHZ – remember that it doesn’t have to be anything elaborate to work. Look at mine – four colored boxes – nothing special, but it works with my blog design.

I look forward to seeing what you come up with.

12

Always a nice tip. Glad I stumbled on this, would have forgotten it altogether.

13

Thank you for tutorials. Very useful. :-)

14

hi Char, how do i upload my favicon to my website hosted by blogger? can spare some time to teach me? no hurry :)

15

@Char–Other good reasons include the fact that your favicon is included next to your site name in a bookmarks/favorites file, helping to distinguish your site & remind them what site it is (especially if it’s an internal page they’ve bookmarked), and of course, branding.

@Tracy-I’m sure Char has already helped you, Tracy, but if anyone else is wondering, it’s really easy to add a favicon to Blogger. I have instructions on my blog: http://www.mamablogga.com/advice-to-mom-bloggers-headers/

16

Char, thanks for the instructions…I’ve been meaning to create an icon for awhile now and finally did it, thanks! :)

17

I’m not sure that mine looks as professional as yours does, but I followed your steps and created a favicon for my blog.

Thanks for this post!

18

Thank you for this article. I was trying to figure out why my favicon wasn’t showing up on all pages. Your little piece of code up there did the trick. Thank you so much!

19

Design is important. Try to avoid the box-look for the favicon. Also, you can spice it up by animating it. You’ll need special code for your Head section. That’s because the animated favicon will be active on Netscape and Firefox, but Internet Explorer wants that static .ico file. Instructions here — http://www.cathetel.com/favicon.htm — for anyone interested.

Leave a Comment

RECENT PROJECTS

Team Training NE Celiac Family