Drupal 7 Touch Icons: How to add Apple specific icons

By adam
Sun, 2015-02-22 17:35
Daily Dose of Drupal Episode #194

Share with Others

Today, there exist many different options to digest content. One of the most popular options is Apple products like the iPhone and iPad. A unique thing about iOS is that they use specific icons when users want to add your website as a bookmark on their home screens. This icon is then used to quickly launch your website, similar to how you launch a bookmark in your browser.

Normally, websites don't have this icon available so what almost always ends up happening is Apple using a screen shot of the webpage as the icon. Having a generic screen shot can effect your branding message.

The Touch Icons module allows you an simple way to upload an icon that Apple will reference when looking for the bookmarking icon. Also, in this video I show two alternative methods for providing Apple access to the icon.

Hey everybody and welcome to episode 194 of the Daily Dose of Drupal. Today we’re going to be looking at a module called Touch Icons. You might not be too familiar with what Touch Icons are but they basically are they allow when a user is using an iOS device and they bookmark a certain webpage, it’s the icon that would appear on their home screen.

So it’s a module that definitely kind of get overlooked but a module that really is helpful beings that iOS adoption is so high. So we’re going to take you kind of what that means and how that kind of looks once it’s done. So there’s a few ways to go about doing this. I’m going to show you all three ways that I know. I’m sure there’s others but these three will definitely work. So there is a Drupal module that will handle almost all of this for you and it’s the Touch Icons module.

So what this module basically does is it allows you to upload this Apple Touch icon to a distinct place and then it will reference that when a user wants to add as a bookmark on their mobile device. So that module is pretty easy to get installed so just download the zip file. Again I’m using 1.0 beta 2 and make sure if you are watching this on a later date you’re using the same version. It looks like it hasn’t been updated in a few years but it might change, you’ll never know. So just make sure to double check that.

So once you the module installed we can come over to our website here and get it enabled. So right there we’re going to enable it, we’ll make sure we save it and there’s no configuration you’ll see on that page specifically. When you do enable the Touch Icons module it will appear under your individual theme that you’re using. So modify that, we can go under Appearance and then use your theme user.

We’re using the default bartik. And then if you scroll to the bottom here you’ll see a field set for IOS Touch Icons and there’s two different versions in here. There’s the IOS Touch Icon and then IOS Touch Icon Pre-Compressed. Basically the difference is the pre-compressed version allows you more control over your ICON and it doesn’t’ allow IOS to do some special effects with your icon so that is if you look an IOS device you’ll typically see rounded corners and it has like a shadow effect to it. If you upload just to IOS Touch Icon it’ll do all of that for you. As the module reads here, it has a rounder corner and a glass effect overlay to the icon which is kind of nice. But some IOS devices don’t…basically don’t allow for this Touch Icon just by itself so it’s always best to upload both versions in your sight.

So once you get the module installed then you can easily upload an icon just to…this system. So we can click Upload Icon and you can find an icon. Here’s a little bit of a caveat, as IOS continues to grow and come up with new versions it obviously increases the size of the Touch Icon that’s needed. So from the little research I did, you best want and you’ve wanted upload as 152x152 image. If you have only here little quick, you’ll see here here’s the Apple Touch Icon that they’re using and this is obviously is specific to Apple and if we just look at the image real quick you’ll be able to see right there it says it’s 152x152 pixels. So that’s the icon I would recommend uploading. It’s also important to note how they save icon. You can see here that they save the icon as Apple-touch-icon.png.

So again, when somebody comes to apple.com it wants to bookmark that page. This icon right here you’ll see what will appear on their mobile device image. So on the home screen or in a folder or whatever, similar to any other app you would download. Okay so back to the sight here, so again I can just browse out to an icon. I’m just going to pick one that I downloaded here and when I upload this, again it’s called Apple-touch-icon.png and I’m going to do the same thing for my pre-compressed and again that’s the same exact name except for it’s got –pre-compressed on it and it’s a PNG as well. So once I do that I can save this and I see here now I have both of these uploaded to my system.

There’s the one and there’s the other one. So that’s all there is to the module really, so now when somebody would go and add an icon off f our website, this is what would appear and it would look. Again it went up here and it would look similar to this, so that will be a Drupal icon and again you can change this to modify that to whatever you’d want but again use that 152x152 size. So the other way I want to show you is that you actually probably don’t this module necessarily and there’s a lot of other ways to do it and it obviously makes it really easy to get that uploaded especially if you don’t have FTP access to your website so that would be the module I would use. But if you want to do it differently, you can actually pull up your FTP client and you’ll see here and you can actually upload these files directly to your directory.

So in Drupal the root directory is the directory in which your index.php file is in. So if we look here under the coat folder, we scroll inside of that, you’ll see right…there it is. Right there there’s our index.php so this is our root folder, so we easily can come over here to our icons that we have before and this is again this is on the left site here, here’s my home or local directory. I could go in here and I could drag this apple-touch-icon-png right into my root directory. And then in theory if I do that, I’m just looking here and then if I go to my development site here and I go appletouch-icon.png you’ll see it’s right there.

So that’s in my root directory so it’s right there, no folders or anything else needed and then that’s referencing this image or this image right here. So that would work as well as an option but the problem with that is if you have to update Drupal core or any major updates to your site, that will get erased so you’d have to redo it again which again one of the other good idea is you just have to drop it over again but let’s say you don’t want to use the module and you don’t want to put it in your root directory, it also allow you to specify this specific place for Apple to look for these images. So to do that, all you need to do is you need to come in to your index file so I’m just going to pull up one just for the…there’s maintenance-page.tpl.php files were the head of the document is located.

So that’s where we need to tell Apple to look for our Touch Icon. So I want to say I can just simply add a link here and I can do around and I just type in Apple Touch Icon so that’s what it is. And then I can do an Href and then this is exactly and then this is exactly I can tell where I want it to look. So instead of adding it to my root directory like I did before, I just went in here and I add it to my sights all themes images folder and you can see I have them both in there. I’m just going to grab this one. This is called Appletouch-icon.png.

So when I copy the URL to clipboard I’m going to come I here and paste that and you’ll get a lot of stuff I don’t need but if I can go all the way back down to the /sites folder so it’s now looking in sites all themes, images appletouchicon.png and then I can close that off right there and there we go. So now instead of having it to be in the root directory, it now can look for inside my theme which I don’t have to worry about updating and losing going forward. So that is it, listen guys, there’s three different ways to do it, one of them is again to…two different ways are to ignore using the module and simply upload to the…your individual theme right there or if you do want, you can upload it directly to the root directory. Again the root directory is located right inside your cold folder there, wherever the index.php file is located. Also if you do want to use the module, the module works really easily as well. Again all that works off of your appearance or your theme and then you can upload your icons right there for both pre-compressed and compressed or uncompressed Apple icon.

Again it’s really important to note that you want to use 152x152 size as in that will work for the different IOS versions especially the new stuff with iOS 6 and the iOS 6 plus versions. So there we go, so that’s all there is with the module, pretty simple, but again it’s a really nice little thing to add for users especially if you want them to bookmark it and have your branding be cohesive throughout your website. But one thing to note, if you do not have a Touch Icon, by default Apple will most likely just do a screenshot of your website. So it kind of ends up looking pretty white and plain typically.

So it’s always nice to have a logo attached to your brand. So anything else, any questions about it, make sure to leave them in a comments. Otherwise make sure to check out Code Karate, closing in to find out some contents we have going on as well as check out our courses we have as well and sign up for our newsletter. We love to hear from you and love to interact. So until next time, have a good one.