Making better quality Favicons with Photoshop

Following on from my post a while back about making your own lil’ cute favicon for your site, I found the generator I mentioned a bit … well, not all that great after all, particularly if you’re trying to generate any half-decent looking favicon.

Anyway, with a little help from the designer here at work, Photoshop & Google, I’ve found a way of making better ones!

First off, visit Telegraphics.com.au and download and download the plugin for your version of Photoshop. Install it following the instructions then re-start Photoshop.

Make your favicon in Photoshop, again using the instructions, making sure the icon is no larger than 16×16 pixels. Save it somewhere and name it favicon.ico

Upload the icon to your root web directory on your website, and then, in the <head> section of your site add in this code…

<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon" />

And you should be all done! Caching in browsers is sometimes an issue with favicons. If it doesn’t show up straight away, try visiting the favicon directly in your browser, or add your site to your favorites and force-refresh the page.

 

Checking and validating websites from your browser

Checking to make sure a website or page is W3C valid and compliant hasn’t always been high on my list of tasks when building a new page or site in the past, until recently.

The company I work for now is very proud of the fact that most, if not all, of the pages on all of their sites are W3C valid to the Scrict standard. Its a good move I think – it makes the developers code better in the long run, so long as we’re always checking for valid code.

So, to check for valid code on a site, I’ve found a neat addon for Firefox called HTML Validator (original, eh?)

However, I have found it to be a little touch-and-go. Sometimes it just doesn’t seem to comply with W3C standards. So I decided to make a small Bookmarklet / Del.icio.us-style browser brookmark link for the current site you’re viewing. Simply make a new bookmark on your browser, and enter the following code as the bookmark URL:

javascript:(function(){f='http://validator.w3.org/check?uri='+encodeURIComponent(window.location.href)+'';a=function(){if(!window.open(f+'','deliciousuiv5','location=yes,links=no,scrollbars=yes,toolbar=no,width=700,height=550'))location.href=f+'jump=yes'};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()

Clicking your new bookmark will bring up a new popup window with the URL of the current page you’re viewing, to validate against the W3C site. Neat!

 

HTML Validation checking – Firefox & OSX

Good times – http://users.skynet.be/mgueury/mozilla/
Can’t get better than that!

100+ warnings on my own homepage? Bad times!…