Click to send mail
This is mostly for blogs with alot of outbound links, but that's not stopping you from using it where ever you want. Outbound links could lead anywhere, it's nice to let your readers know what site they're about to go to. (Its even nicer to let them know they're about to view a PDF!) So I wrote some very simple CSS to append a favicon to the end of all links that fulfill certain criteria.
There is a jQuery based solution for this. But that violates a cardinal rule of the internet: don't steal bandwidth, so I took it one step further, and saved the favicons of all the blogs and sites that I regularly reference to a folder: .ico. Then using this simple code, presto, problem solved.
a[class='DC'] { background:url(/img/icos/deadlycomputer.ico) no-repeat right top; padding-right:20px;}
a[class='tftf'] { background:url(/img/icos/tftf.ico) no-repeat right top; padding-right:20px;}
a[class='cobra'] { background:url(/img/icos/cobra.ico) no-repeat right top; padding-right:20px;}
a[href*='google.com'] { background:url(/img/icos/google.ico) no-repeat center right; padding-right:20px;}
a[href*='mail.google.com'] { background:url(/img/icos/gmail.ico) no-repeat center right; padding-right:20px;}
a[href*='picasaweb.google.com'] { background:url(/img/icos/picasa.ico) no-repeat center right; padding-right:20px;}
a[href*='xkcd.com'] { background:url(/img/icos/xkcd.ico) no-repeat center right; padding-right:20px;}
a[href*='youtube.com'] { background:url(/img/icos/youtube.ico) no-repeat center right; padding-right:20px;}
a[href*='wikipedia.org'] { background:url(/img/icos/wiki.ico) no-repeat center right; padding-right:20px;}
a[href*='bunny-comic.com'] { background:url(/img/icos/bunny.ico) no-repeat center right; padding-right:20px;}
a[href*='destructoid.com'] { background:url(/img/icos/destructoid.ico) no-repeat center right; padding-right:20px;}
a[href*='engadget.com'] { background:url(/img/icos/engadget.ico) no-repeat center right; padding-right:20px;}
a[href*='imdb.com'] { background:url(/img/icos/imdb.ico) no-repeat center right; padding-right:20px;}
a[href*='reddit.com'] { background:url(/img/icos/reddit.ico) no-repeat center right; padding-right:20px;}
a[href*='instructables.com'] { background:url(/img/icos/instructables.ico) no-repeat center right; padding-right:20px;}
a[href*='makezine.com'] { background:url(/img/icos/make.ico) no-repeat center right; padding-right:20px;}
a[href*='hackedgadgets.com'] { background:url(/img/icos/hackedgadgets.ico) no-repeat center right; padding-right:30px;}
a[href*='amazon.com'] { background:url(/img/icos/amazon.ico) no-repeat center right; padding-right:20px;}
a[href*='ebay.com'] { background:url(/img/icos/ebay.ico) no-repeat center right; padding-right:20px;}
a[href*='cnn.com'] { background:url(/img/icos/cnn.ico) no-repeat center right; padding-right:20px;}
a[href*='digg.com'] { background:url(/img/icos/digg.ico) no-repeat center right; padding-right:20px;}
a[href*='slashdot.org'] { background:url(/img/icos/slash.ico) no-repeat center right; padding-right:20px;}
a[href*='wordpress.org'] { background:url(/img/icos/wordpress.ico) no-repeat center right; padding-right:20px;}
a[href*='icanhascheezburger.com'] { background:url(/img/icos/icanhaz.ico) no-repeat center right; padding-right:20px;}
a[href$='.pdf'] { background:url(/img/icos/pdf.ico) no-repeat center right; padding-right:20px;}
a[href$='.doc'] { background:url(/img/icos/word.ico) no-repeat center right; padding-right:20px;}
a[href$='.docx'] { background:url(/img/icos/word.ico) no-repeat center right; padding-right:20px;}
a[href$='.ppt'] { background:url(/img/icos/ppt.ico) no-repeat center right; padding-right:20px;}
a[href$='.pptx'] { background:url(/img/icos/ppt.ico) no-repeat center right; padding-right:20px;}
a[href$='.xls'] { background:url(/img/icos/excel.ico) no-repeat center right; padding-right:20px;}
a[href$='.xlsx'] { background:url(/img/icos/excel.ico) no-repeat center right; padding-right:20px;}
a[href*='jquery.com'] { background:url(/img/icos/jquery.ico) no-repeat center right; padding-right:20px;}
a[href*='prototypejs.org'] { background:url(/img/icos/prototype.ico) no-repeat center right; padding-right:20px;}
a[href$='.mp3'] { background:url(/img/icos/mp3.ico) no-repeat center right; padding-right:20px;}
a[href*='mailto:'] { background:url(/img/icos/mail.ico) no-repeat center right; padding-right:20px;}
So, that's pretty simple isn't it? Well, I'm gonna make it even easier for you! Right below you can download all 23 favicons, and all that CSS code, and all the XHTML code used!
Aren't I awesome?
Yes.
10.15.2009 - v1.2
-Added jQuery, Prototype, email, mp3 to the list
-Added Amazon, eBay, CNN, Digg, and slashdot, PDF, Word, Excel, Power Point to the list
09.09.09 - v1.0
First release, includes Deadly Computer, Thirty-fivethousandfeet, Cobra, Google, Gmail, Picasa, XKCD, YouTube, Wikipedia, Bunny Comic, Engadget, IMDb, Reddit, Instructables, Make, Hacked Gadgets, ICanHasCheezburger, Wordpress
And here's what it looks like:
This work by stephen giorgi is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Permissions beyond the scope of this license may be available at http://steve.deadlycomputer.com/use.