Grabbing a favicon from any website

Saturday, 5 May 2012

⚠️ This is an old post

It's possibly been exported and imported from at least three different blogging platforms over the years. That probably means, at best, there are broken images and links. If the post is technical in nature, any advice is probably out of date and irrelevant. Or it is really old, it was the wafflings of a teenager with too much time on his hands working out what blogging is… If it is the latter I would probably cringe if I re-read it. But it's here because it's part of my past, not my present.

You've been warned! Onwards…

One of the great discoveries I made this week relates to grabbing a favicon from any website as required; Google has put together a handy API which takes in a URL, and outputs a PNG 16x16 image of the site’s favicon. This has the potential to be very handy for something. I’m not 100% sure what I’m going to use it for, but I’m going to use it for something!

An example of this is:

<img src="https://www.google.com/s2/u/0/favicons?domain_url=http://google.com">

Which outputs:

For a full demo of this head over the snippet page


Update: I’ve thrown together a JS Fiddle demoing a possible use for this. If anyone can work out a method of getting url() and attr() to concatinate nicely I will be a very happy person! I’ve got a demo of what I’m after using JavaScript, but I’m quite keen to have a CSS only method of achieving this!

Back to all posts