When a request comes in, inspect the user agent string to work out the device that is accessing the page. Based on that, you can decide which icon metadata to insert into the page.
First I want to see which devices load which icons (without any modification). On each request, log the UA string and the path of the file it requested.
Then, using the UA string, determine the type of device / browser in use and set a variable called device, with the value:
ios for iPhone and iPad (all the apple-touch-icons)
chrome for Androids and desktop Chrome browsers (manifest.json)
ie for Windows Phone or Internet Explorer desktop users (browserconfig.xml)
(maybe) ie10 for IE 10 (msapplication-tileimage)
other for anything else (just the 16 and 32px favicons)
Jade can look at the value of a variable and add content based on it. I can't remember the syntax right now but before each meta statement you can check the condition of a variable and get it to write the line if that condition is true.
When a request comes in, inspect the user agent string to work out the device that is accessing the page. Based on that, you can decide which icon metadata to insert into the page.
First I want to see which devices load which icons (without any modification). On each request, log the UA string and the path of the file it requested.
Then, using the UA string, determine the type of device / browser in use and set a variable called
device, with the value:iosfor iPhone and iPad (all the apple-touch-icons)chromefor Androids and desktop Chrome browsers (manifest.json)iefor Windows Phone or Internet Explorer desktop users (browserconfig.xml)ie10for IE 10 (msapplication-tileimage)otherfor anything else (just the 16 and 32px favicons)Jade can look at the value of a variable and add content based on it. I can't remember the syntax right now but before each meta statement you can check the condition of a variable and get it to write the line if that condition is true.