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

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!

the_guv's sistasite: Setup The Ultimate VPS

"Blank box to top-notch web server"

• plain English copy/paste tutorials with video
• written for VPS beginners and Linux newbies
• perfect for multiple sites, blogs & more
• Fast. Secure. Future-proofed. Cheap-as-chips!
• "Wow!!" "godsend!!" "GREAT!!!" "awesome"

Ubuntu & Debian, Nginx (beats Apache), MySQL, PHP-FPM, Xcache, WordPress, WP MU, Drupal etccccc

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

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.

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.

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.

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