Mesmer Lab » browser http://www.mesmerlab.com Tech and trends in web design+development. Mon, 30 May 2011 23:11:45 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Create a Custom Favicon http://www.mesmerlab.com/create-a-custom-favicon/ http://www.mesmerlab.com/create-a-custom-favicon/#comments Sat, 17 Jan 2009 22:02:16 +0000 Jason http://www.mesmerlab.com/?p=3 Make your own at favicon.ccYou 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 favicon.cc interface is very straightforward.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

Read more at Drivelocity.comEver 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.

]]> http://www.mesmerlab.com/create-a-custom-favicon/feed/ 2