99 problems but a favicon ain’t 1

Delivering a great, professional solution to solve a client’s web presences problem means covering ALL the basis. And believe me, no matter how many times you’ve done it, you’ll run into problems somewhere in the process.

But one of the basis you don’t have to worry about is creating a nice, clean favicon.  A favicon is a graphic image that appears in the top left hand corner of a browser tab, next to the Web Page Title.  It also appears in the ‘Favorites’ section of the browser, once a user adds the page to their favorite’s list.  Favicons are important because nowadays, many web users tend to have multiple tabs open and by having a clean, easily recognizable favicon, users are able to know or memorize which tab is which with ease.  I’m currently tweaking the favicon for Makin’ I.T. Cool with hopes to find something that reflects the logo, is clean, and jogs the memory.

But, the reason for this post is because often times favicon’s are overlooked – and they don’t have to be.  To add a favicon to your current project, simply ensure you have a high quality PNG version of the desired graphic and use one of the free, web-based tools to convert the image to a Favicon.  You can also do this yourself with Photoshop, Fireworks, or a similar program.  Traditionally you save the file as an .ico file and size it to 16×16 (I’ve also seen 24×24 and 32×32).  And you referrence the file in the header of your HTML page like so:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/png" href="http://example.com/favico.ico">
[…]
</head>
[…]
</html>

For more information check out:

http://en.wikipedia.org/wiki/Favicon

http://www.convertico.com/

http://favicomatic.com/

Also, let me know what you think of our favicon.

 

‘I’m from the hood stupid, what type of facts are those?’ – Jay-Z