Tuesday, July 17, 2007

Cartooning Tips and Tricks: Favicon (Address Bar Icon)



What's the deal with those little symbols in the address bar of most websites, and how can I get one?

That's the question I set out to answer a few days ago. I've wanted one for a long time, but assumed it would be a frustrating and time-consuming endeavor. Turns out it was pretty easy. There are several good tutorials online, but here's Big Time Attic's quick and dirty summation:

1) Create your symbol. Size doesn't matter -- just make sure it's a square. Save as a jpeg.
2) Go to Favicon from Pics.
3) Click "Choose File" to select your image.
4) Click "Generate Favicon.ico."
5) Click "Download Favicon."
6) Unzip your Favicon folder and drag "favicon.ico" into your root web folder (wherever you keep "index.html" for your website).
7) In "index.html", place <link rel="shortcut icon" href="favicon.ico" > between your header tags. Example:

<html>
<head>
<link rel="shortcut icon" href="favicon.ico" >
</head>

And that's the bare bones of it. You'll notice (as of right now) that the Big Time Attic main site has a favicon, but not the blog site. When I was playing around with my personal site I found that putting the favicon in the root folder was enough, and that eventually all the subfolders "grabbed" the favicon and used it. I have no idea what's really happening, but I'm going to sit on the BTA favicon for a day and see if it "spreads" to the blog page. Wishful thinking never hurt anyone.

If anyone has any more advanced tips regarding favicons (or "flavorcons," as I like to call them) please let us know!

4 comments:

David Steinlicht said...

You guys are so helpful!

Thanks for this tutorial.

jashar said...

Wow, thanks, Kevin! I've been trying to figure that out for awhile now. This was the most straightforward explanation I've come across (most others make it sound like you need to buy a program and/or have a PC).

Also, I just wanted to say that I've really been enjoying the blog in general. I met Zander at MoCCA and he said to make sure to say 'hey' via the comments. I can't believe I'm just now getting to that...

Kevin Cannon said...

No problem, Jashar. I like your Norman Mailer drawings!

Anonymous said...

A scrolling txt in the Favicon.ico looks nifty!

hire2hack.co.uk