Multi-resolution Touch Icons (iPad, Retina Displays)

Hi Chris! Thanks for the feature request.

I had already discovered this, and have been considering it as a feature for the module. There are just a couple of problems which I'm still mulling over:

1. The sizes attribute annoys me, since it isn't valid HTML. It's harmless, but could be a problem for any organisation that requires their web pages to pass W3C validation.
2. Adding more file fields to the settings form would make it a lot more cluttered, and I want this to be an easy module to use. The FAPI #states feature of D7 could alleviate this problem.

The help text included with the module needs improvement. I should implement hook_help() and reduce the amount of text in the settings form.

Tags should be comma-separated

I found a note about an alternative method using using CSS Media Queries, which looks very interesting. As far as I know, it isn't documented or recommended by Apple, but it avoids the use of the non-standard sizes attribute.

The Apple Docs say the sizes attribute only works for iOS 4.2 and above.

More useful notes:

http://mathiasbynens.be/notes/touch-icons

Apparently the order of the link elements for different sizes is worth considering.

I could use use the D7 image styles API to generate different icon sizes. This would allow site admins to upload a large icon, and get it re-sized for each device type. This would reduce complication in the settings form.

Upgrading priority to major, since I really want to support the full range of devices.

Postponing it until I've got a stable 7.x-1.0 release out the door. This will likely go into 7.x-2.x development. I'm not inclined to add new features in the D6 branch, as I would rather focus on D7 from now.

D7 Image Styles could also be used to generate the precomposed icons, using ANY available image effects. Rounded corners, overlays, backgrounds, or anything effects provided by contrib modules. Imagefield crop might be a cool one to use!

Just upload a single large square image, and get 6 icons out. Simple scale for the three plain icons sizes, or special effects + scale for the precomposed icons.

6 image styles with the correct sizes could be declared by touch_icons.module. These could be over-ridden, or users could create image styles of their own.

Hmmm, lots of things to try...

I just ran into this situation and that's whats keeping me away from using the module. Some people might want the touch icon to be different under different screen resolutions. I think the resizing option is a different issue all together, a different feature request. I think the module does need to provide a way to let a user upload different images for different resolutions.

I am happy to help out with figuring out what's the best way to add the support for touch icons in different sizes, I do want to switch my site back to using the module instead of having a few drupal_add_html_head_link() in my template.php.

Thanks for this great module! In an attempt to use this module myself for my own website, I forked the 2.x-dev branch and started working on integrating multi-resolution support.

Here's the URL of the sandbox: http://drupal.org/sandbox/Ignigena/1884316

Still needs some heavy lifting before it's completely ready but here's what I have implemented so far:

• Various resolutions and platforms are defined in structured array. This keeps the amount of module code down when building both the admin form and the output that is placed in the theme header. Also allows for quick and easy addition of new resolutions and device support.
• Theme header code is composed using Javascript to properly sniff out which device (iPad/iPhone) and whether or not it's a Retina device. This keeps server load low as we're only loading the appropriate image for the device instead of having 6 different tags with each image in the header.
• I also added the ability to define custom startup images. This might be better suited as a sub-module or another module altogether. But it made sense for my uses so that's why it's in there right now.

I still have to implement the form validation function to check the icon sizes with the required values encoded in the array definition. Also, I'm sure some code could be cleaned up a ton or abstracted some more. I've tried to keep theme settings names the same for easy upgrading but it would probably be good to add an upgrade function. Once I have the code to a point where it's somewhat stable I'll post a patch here.

Hope someone finds this useful!

Hi Albert,

I'm happy to accept patches for touch_icons. Thanks for getting started with this!

I'll take a detailed look at your code later this week. Here are my initial thoughts.

• I agree with you about keeping icon-information in a structured array, and using this to build the settings UI as well as the head links.
• I'm wary of the javascript approach you describe. The problem I see with devicePixelRatio is that it doesn't take into acount the entire screen size of the device. Non-iOS devices have been making use of touch icons for a while, and there's a much greater range of screen sizes and resolutions. An article at QuirksMode goes into some detail about this.
  The Apple documentation recommends using the sizes attribute, and the effectiveness has been explored in an article by Mathias Beynens. This is my preferred approach; with more mobile OS platforms on the way (Tizen, Ubuntu, FirefoxOS), device-agnostic code makes more sense to me. The nature of the touch icons use-case means dvices need to cache these icons, so server load isn't a worry to me. (Unless there are some alarming figures I don't know about yet!)
• Custom start-up images have already been a feature request for touch_icons, and I spun it out to a seperate module as you suggested. It's called iOS Startup Image, and is currently a sandbox project, and does not address retina-sized images yet.
  #1665754: Add ability to provide a startup image for mobile home screen.
• Having an upgrade function would be a good idea. The theme-setting names differ somewhat between 6.x-1.x and 7.-1.x branches.

Absolutely! I'm glad to help but also don't want to step on any toes. I'm pretty sure much of my code is still pretty messy and could use some naming consistency. Hopefully I'll have a chance to clean some of it up before you take a look :)

I'm wary of the javascript approach you describe. The problem I see with devicePixelRatio is that it doesn't take into acount the entire screen size of the device. Non-iOS devices have been making use of touch icons for a while, and there's a much greater range of screen sizes and resolutions.

Good points all around. Honestly, I just liked the feeling of a more compact block of code in the header versus separate lines with a separate meta tag different icon size. So, to this extent I've just always used the same JS snippet in all my sites. However, I do see your point of cross-device compatibility and keeping with the Apple documentation so I would agree with you on all of this.

Custom start-up images have already been a feature request for touch_icons, and I spun it out to a seperate module as you suggested. It's called iOS Startup Image, and is currently a sandbox project, and does not address retina-sized images yet.

Makes total sense!

It's been a while since there was activity on this thread. This would be nice to get done.

Since the status is "Postponed (maintainer needs more info)", I'll ask ... What more information would be helpful?

According to this comment on Stack Exchange, these are the latest Apple standards with iOS 8 and the iPhone 6 Plus:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

The standard icon is still 57x57.

It would be great to add the feature with sizes. Do someone have patch to it?

For those looking for more flexibility, the "responsive favicons" module can do multiple sizes/devices.

D7 reached its EOL back in January 2025, and there is no active release for D7 for this module anymore.
Development or support is not planned for D7. All D7-related issues are marked as outdated in a bunch.