How to Add Apple Touch Icon to Your Drupal Theme
Submitted by Douglas on Tue, 01/15/2008 - 11:46pm.
The new system update for the iPhone is now out. One of the new features is you can add bookmarks to the front screen, a.k.a the springboard. The graphics that appear on the home screen are 57x57 pixel PNG files. You put the png file somewhere on your your server. Then you edit your template.php to activate it. Add the drupal_set_html_head() function call with the html code for the png.
drupal_set_html_head('<link rel="apple-touch-icon" href="/folder-path/apple-touch-icon.png"/>');
Just like a favicon.ico, the iPhone will look for a /apple-touch-icon.png automatically in the root of your server.
New Touch Icons module
Today I released my new Touch Icons module in Drupal contrib.
It provides additional fieldsets for the theme settings pages, allowing site owners to configure Apple Touch icons on a per-theme basis, much like the logo and favicon settings provided by Drupal core.
Themers can easily provide
apple-touch-icon.pngin the theme folder, where the Touch Icons module will find it automatically. The module generates the necessary<link>elements, so no custom code is required in the theme.Site owners can choose the theme's defeault touch icon, or upload a custom one of their own. The newer
apple-touch-icon-precomposedformat, recognized by iPhone OS 2.0, is also supported.As you hinted in your earlier comment, this module will be a big help for multi-site installations, and sites with more than one active theme (such per-user theme preferences).
Iphone 160dpi
Remember the iphone screen res is 160dpi, might come in handy when making your icon a little crisper.
You don't have to alter
You don't have to alter anything. Just add the file in the top level of your site with that same name. Gets picked up like favicon.ico.
apple-touch-icon.png
Yes. That is true. You can just drop a file named exactly apple-touch-icon.png to the root of your web server and it will be used as the icon, just like a favicon.ico. In fact you can watch your web server logs to look for apple-touch-icon.png being loaded successfully or unsuccessfully. The purpose of my posting was how to add the icon to one's theme. I was assuming that you would want a different icon based on the theme, based on the particular function, or that you had more than one Drupal site sharing the same web root. The real benefit is that the icon can be part of your theme.
-Douglas
Post new comment