Video How-to: Add a Favicon



guvnr's favicon screenshot

If I had a Big Mac for every favicon tutorial out there, I'd be dead. But hey, I needed a favicon, and I figured a video illustrating the process may come in handy for some folks, so here goes.

What is a favicon, and what's it for? I explain that here and in the video, as well as showing how you can make one using Photoshop, else with an online favicon generator. Aah, and the bit that makes people sigh; how to embed the little critter into your website. So, coming up, why's and wherefores, graphics and code. Bet you can't wait!

Setup Unmanaged VPS (4 Noobs!) ... with vpsBible
Secure WordPress. Properly. ... with wpCop, the platform's dedicated security website
Olly 'the_guv' Connelly's vpsBible.com site and 'WordPress 3 Ultimate Security' book.


Video: How to add a favicon

Watch the video for a better idea of how to do this.

Guv's on YouTube at http://youtube.com/guvnrDOTcom.

Do I need a favicon?

It's not a mandatory thing but it's a help. Here's why.

Usability

OK, and because they're just cool. But really, it's about easy surfing. These days, we've got tabs on our web browsers. Favicons are an easy visual reference to move from site to site, within the browser. They act as an anchor to the eye. They are a user aid.

Marketing.

Because corporate identity is important. Close your eyes and I know you can visualise immediately the google ‘g', and the yahoo ‘y'. Not least of all, this is due to favicons.

How to add a favicon

We can use a graphics program like Photoshop, else an online or desktop ‘favicon generator'.

Generators

online favicon generator screenshot

The easy way is … not to do it at all. Use an online generator instead. Google ‘favicon generator' and you'll be presented with about a zillion links of gen gems, all eager to squeeze your graphic into a tiny shell. And they're great, I know, and I've used them. If you have no gusto for graphics, this is your route. Most even come with instructions for site implementation, so fear not. But of course, my instructions are better, so read on.

With an online gen, you'll need to upload an image to be faviconized, so be ready with that. You may have to grind some graphics for this prep piece. Here are some tips…

  • Bear in mind favs are tiny, just 16 pixels x 16 pixels, so you can't stuff in too many bits. Generally, an effective favicon is very simple, just original enough to stick out from the others in the browser window, and that of course is precisely its purpose.
  • One idea, as I have done with this site, is to take the first letter of your website name, which often sits also within your logo, and isolate that for the icon.
  • Soften and distinguish the favicon with a background color.
  • Don't prep up a graphic that isn't square because 16×16 is, er, square. a horizontal image will get squished, and your generated favicon won't match the style of it's big bro' logo. round, if you must, but again oval, no no.
  • Surf about and take note. Pinch ideas, but not the graphics.

creating a favicon in Photoshop

Then again, by the time you've cracked out your master graphic for a generator to squeeze, you may as well go the whole hog and resize it yourself. To see how to do that with Photoshop, check out the video. For other graphics programs, er, I don't know because I don't use them; go google. Aah, but Photoshop doesn't have a ‘save as favicon' function, you say? Good point.

Saving favicons in Photoshop

“Why not just save it as a .png? It's a better format anyway, because it allows for a transparent background, which often looks far more appealing for a favicon.”

Yes. All true. But. Remember. Internet Expletive. It doesn't understand .png's. It doesn't understand a whole lot, come to that. But basically, if you want a cross-browser favicon, it needs to have .ico on the end of the filename.

Telegraphics .ico plugin for Photoshop shows the .ico extension as a new 'save as' option - screenshot

And that's why soft .ico makers tend to cost dosh, and free generators are so popular. And, Photoshop doesn't come with an .ico save option. But if you've got Photoshop, or at least a CS3+ version (I'm not sure about older versions), there's a cracking lil' plugin, and it's free.

It comes with instructions. Mac and PC. Ubuntu can Wine. Sorted.

Crank the code and fix the fav

adding the code to your web files image

This is the bit people tend to get nervous about. It's the easiest bit.

Here's the code…

<link rel="shortcut icon" href="http://sitefromheaven.com/favicon.ico" />

(If sitefromheaven.com is available, buy it!)

Pop that line into your <head>, just below the <title>, and ftp the favicon to the root of your site.

Hurrah.

You may have to wait for the cache to crunch, but it will, eventually, and then you'll have a cross-browser favicon, fabulously frivolously …well, it'll work.

Now watch the video. It took me an hour.

15


About the Author:

Olly Connelly (yeah, that's me) blogs at guvnr.com, polices WordPress security at wpCop.com and helps noobs build web servers at vpsBible.com, so if you've got sleeping problems you know where to come.

Discussion

  1. the_guv  January 22, 2009

    @Jdavies – thank you, appreciate that.

  2. Jdavies  January 21, 2009

    Nice vid. Easier than had thought!

  3. the_guv  January 16, 2009

    @Piet … m8, don’t get me started about religeon 😉

  4. Piet  January 13, 2009

    sitefromheaven.com is actually available, why don’t you buy it?

  5. the_guv  January 9, 2009

    tx all. appreciate those comments
    @satboy. sorry for delay, was away over xmas. there will be a bunch of related posts, for sure. keep checking in.

  6. the_guv  January 7, 2009

    @ maxT – much ta!
    @rvemices. The online gens are improving all the time. Can’t say I’ve use one for yonks, except for this tutorial. I guess they’re much the same. Some will give you animated icons, if you prefer. I’d google for recommendations, then produce your favicon with two or three, using the best. Hope that helps.

  7. rvemices  January 5, 2009

    Very useful, the code makes sense, but is there a generator you reciommend?

  8. maxT  December 28, 2008

    thanks the_guv…just what I wanted

Add a Comment

  1. satboy  December 24, 2008
  2. warewithall  December 22, 2008
  3. sarahb  December 20, 2008
  4. bob  December 20, 2008
  5. haddiq  December 17, 2008
  6. vern  December 17, 2008
  7. gergin  December 17, 2008