Parse apple-touch-icon from mobile websites

Question

With a given url like www.example.com i want to extract the apple touch icon by e.g. searching the dom for this attribute:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

The Problem is that example.com doesn't provide this tag on the normal website, just on the mobile m.example.com website. I think they use server side device detection and add this tag only on mobile devices. Any idea on how i could get this icons on such websites?

Answer 1

If example.com has a m.example.com mobile version, they are probably redirecting mobile phone users using User Agent sniffing.

The website's server basically looks at your request's User-Agent HTTP header and matches it against a set of values to detect mobile browsers. Here is an example of how it is done in Apache:

RewriteCond %{HTTP_HOST} ^(www\.)?example\.com$ [NC]
RewriteCond %{HTTP_USER_AGENT} (.*)iPhone(.*) [NC,OR]
RewriteRule ^ http://m.example.com [L,QSA]

The good news is you can fool the server into serving you m.example.com by setting the header yourself. Here is an example with curl :

curl facebook.com

curl facebook.com -L -A "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

The first one will retrieve the HTML for facebook.com, the second one sets the User-Agent header to the iPhone's value. Note that we must use the -L option in order for curl to follow the redirect from facebook.com to m.facebook.com.