Design. SEO. PPC.

A favicon is the tiny icon — a mere 16×16 pixels — that appears on your browser’s tabs just to the left of the page title. Without a favicon, most browsers simply display a generic ‘page’ icon. Favicons do a few things for you. First, they help your browser visually identify which of their tabs is your website, even if they have another tab open to a page that happens to have the same title. Second, they give your site a more professional air.

Here’s how I go about creating a favicon:

Create the Image
If your website already has a logo or a central image, I’ll try opening Photoshop and simply shrinking that down to 16×16, cropping any excess white space as I do. Complex logos frequently won’t work this way, but a surprising number of logos do just fine.

If a new image is necessary, I’ll look at your website’s color palette and try to design a new image that uses the same primary colors as your website. (Primary as in ‘main’, not as in ‘RGB’.) If I can design an image that is at least obviously reminiscent of your company’s logo, I will — every bit of uniformity in branding is helpful. If not, I’ll often choose some other secondary graphical element of your website to riff on, for the same reason.

Once it’s done, I’ll save the image, usually as a .jpg and then a second time as an .ico file. The first is for future manipulation, the second will be uploaded to your website.

Uploading the File
Once we’ve got a solid picture, I’ll upload it to the root directory of your website as “www.yourdomain/favicon.ico”. (You can navigate to that URL and see what your icon — or any other website’s favicon — looks like on a white screen, by the way.)

Add Header Code
Once your favicon is properly placed in your root directory, most browsers will find it and display it automatically. Nonetheless, there are some that require a bit of code in your HTML header in order to show your favicon properly — it looks like this:

and should show up anywhere within your header code (between and ).

Pretty simple, pretty quick, and it gives your website a much more professional and authoritative air than the generic page icon. If you’d like to have a favicon added to your site, call Net Profit Marketing at (313) 799-2218 today.