Create a Custom Favicon

Jan 17

Create a Custom Favicon

Filed under: Web Design

You can easily brand your site and have a custom icon show up in your visitors bookmarks. The favicon item in modern browsers is a handy feature to easily keep a website visible in the sea of tabs that power surfers thrive in. I’ll show you how to add this benefit to your clients’ sites and secure it in your web design tool belt.

To begin…

First off, this is how to put it on your site. Add this in the <HEAD> section of your pages.

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

Make sure you put the correct location of the file, of course. Next I’ll tell you what is involved in creating a favicon.

Create your own favicon, online!

The nice folks over at favicon.cc have developed a spiffy flash application where you can create your own favicon right in your browser. You have pixel precision while creating a full-color icon. They even include animation options with their icon generator.

If you’ve used any type of image editor, the controls are very easy to use. Either upload an image or draw one pixel by pixel. Get creative with a full color picker, transparent ink (eraser), review and use existing colors and move the image around. Once you’re happy with your work, you can download the icon for your site. When you create an account, you can save your icons at their site and make them public for anyone to use. You can even add a title, description and tags when you publish it under the Creative Commons license. Top rated and recently created icons can be browsed with ease.

Bright green adornment in Firefox 3

Ever wonder why some sites like PayPal and GoDaddy have a bright green background on their favicon in Firefox 3? This assures the visitor that the site has a valid SSL certificate.

Thank you Firefox for a welcome addition to help prevent identity theft. Click on the glowing green graphic to view the certificate. Check out more info over at Drivelocity.com.