One div aims to highlight the potential of CSS3 through a library of single element logos.All icons displayed on the website are realised in pure css with only one html div. The challenge is also to provide an alternative to SVG. Indeed icons allow precise borders preserved even resized (As vector format). Then we can see a clear interest in responsive design.
How does this work?
The concept it's pretty easy actually. Apple provides a link rel='apple-touch-icon', their version of a favicon.
That's the special icon that the iOS device uses in the home screen.
I've started some experiments and then realizing two things:
To specify a bookmark icon for all pages of a web site, place a PNG image named "apple-touch-icon.png" at the root directory of your web server - similar to the "favicon.ico" for site icons.
To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel="apple-touch-icon" href="/customIcon.png"/> within the <head> element of the page.
The bookmark icon dimensions should be 57x57 pixel