.

Why Add a Favicon? Here's why, & how, in the video guide

Video How-to: Add a Favicon

5 Dec
Add a favicon

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, my GuvUtorial, 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!

First up, why bother?

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.

Add a favicon

Generators

typical favicon generator

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 16x16 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.
grinding graphics 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 PS, bless 'em

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.

simple line of code

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.

What have I forgotten? Tons probably. Your comments are valued ...

Be Sociable, Share!

If you liked that ...

  • Video: We Are Living in Exponential Times

    By 2013, a super-computer will be built exceeding the computational capability of the human brain. By 2049, a $1000 computer will likely exceed the computational capabilities of the entire human species. If [...]

  • Video How-to: Backup & Restore a Database with phpMyAdmin

    Phpwhatnot? Aargh! Scary? It's not. How often do you backup your mySQL database? Does the idea fill you with horror? Or do you think the "full backup" option at your ISP covers the database too? If the [...]

  • Video How-To: Save Money with Promo Codes - Nice & Easy

    Buying online? Wanna save a few bucks? Got 5 mins? This video shows you how, using promotion coupon codes, nice 'n easy. It's not exactly a science, but online shoppers after a bargain often fall short when it [...]

  • Video How-to: Subscribe to Content Feeds

    The best thing about the web is its role as an information resource. Need some help? - the web is where. But all that info gets daunting, and that's where subscribing to RSS feeds comes in. This article, complete [...]

  • Video How-to: Install & Configure a WordPress Plugin

    One of the great things about the WordPress blog platform is how adaptable it is. Need some special functionality? There's bound to be a plugin - an extension - that will help. This tutorial, complete with [...]

  • Video How-to: 10 Tips To Make WordPress Hack-Proof

    UPDATE: June 2011.Inspired by this popular post, guv's WordPress 3 Ultimate Security, the first-ever book explaining in detail how to secure the popular blogging and content management platform, has been released. [...]
... maybe you'll like these?
Posted on Friday, December 5th, 2008
Subscribe to Comments by RSS              Trackback from your blog

THE_GUV NEEDS YOU!!

.. to improve this post ..

Please clue me in. What's wrong or missing?

Or, hey, just pile on the praise ;)  Ah, yup, and fix a feed, fella.

Or link the page to your social network!

thank you, thanx, tx, ta, t, tsst, twaddle, cheek, cheers, cheerio



  1. gergin December 17th, 2008 at 12:00 pm

    Great info.

  2. vern December 17th, 2008 at 7:00 pm

    found you at Technorati. thanks for this video. good luck with the site, guv.

  3. haddiq December 17th, 2008 at 9:00 pm

    I searched for a long time and found this post. Thanks a lot

  4. bob December 20th, 2008 at 5:27 am

    I found your post comments while searching Google. Very relevant especially as this is not an issue which a lot of peaople are conversant with.

  5. sarahb December 20th, 2008 at 2:00 pm

    tx for sharing this. I will share it with my readers....

  6. warewithall December 22nd, 2008 at 12:00 am

    Great post. will surely drop by again

  7. satboy December 24th, 2008 at 2:00 am

    Any other related posts? Thanks Guv....

  8. maxT December 28th, 2008 at 4:17 am

    thanks the_guv...just what I wanted

  9. rvemices January 5th, 2009 at 2:22 pm

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

  10. the_guv January 7th, 2009 at 7:01 pm

    @ 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.

  11. the_guv January 9th, 2009 at 4:17 am

    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.

  12. Piet January 13th, 2009 at 12:08 pm

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

  13. the_guv January 16th, 2009 at 8:18 am

    @Piet ... m8, don't get me started about religeon ;)

  14. Jdavies January 21st, 2009 at 11:42 pm

    Nice vid. Easier than had thought!

  15. the_guv January 22nd, 2009 at 5:42 pm

    @Jdavies – thank you, appreciate that.

Say Something


.