Input favicons

The newly available <input> types are one of the easiest and most useful (well, when viewed on an iPhone at least) ways to practise HTML5 citizenship. I have an <input> that is used for a URL and the excellent news is, lo and behold there is an <input type="url">. But I also wanted to add an extra little nicety by displaying the URL’s related favicon along with the <input> as above.

This can achieved really simply using Google’s unofficial favicon API and a sprinkling of jQuery:

$("input[type=url]").change(function() {
  var match = /^(?:https?:\/\/)?([\w\d\._-]+)/i.exec(this.value)
  var domain = (match && match[1]) || ""

  $(this).css("background-image",
    "url(http://www.google.com/s2/favicons?domain=" + domain + ")")
}).change()

Suprisingly this actually works in IE8(!) and in IE6/7 everything will degrade gracefully: the browser falls back to using type="text" and jQuery won’t find the correct <input>s to add the behaviour to - the user simply won’t see the functionality.

Of course the same thing could have been achieved by using a class="url" instead of type="url", it would have even worked in IE6/7, but that just wouldn’t have felt so right - plus it’s exactly what IE users deserve!

P.S. You’ll need to add a teeny bit of styling, Google’s favicon images are 16×16px and this did it for me:

input[type=url] {
  background-repeat: no-repeat;
  background-position: 2px 2px;
  padding: 3px 3px 3px 19px;
}

P.P.S. g.etfv.co also looks interesting and it’s even open-source, though that looks suspiciously like SVN. SVN‽