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!
Post changelog
- 2020-05-17 – Remove old insecure image references, hotlinks, etc
- 2020-05-17 – Decouple gulp from SCSS generation
- 2018-12-24 – Generate (but not use yet) RWD images
- 2018-09-01 – Importing all the old blog posts
