Apple Touch Icon Customize Your Website For Apple Products

iPhone Screen Shot Apple Touch Icon

There are plenty of Apple mobile device users out there, so why not take an extra minute or two and add a little known customization to your website in the form of an Apple Touch Icon and make those visitors fell special. If you manage your website, this really is easier than it looks and it’s a customization that will make you standout above your competition.

What is an Apple Touch Icon?

Apple touch icons are basically favicons for Apple mobile devices and when set in your HTML it will be displayed when a user saves your web page to their home screen on any of their Apple mobile (iPad, iPhone, and iPod) devices.

Unfortunately Apple didn’t just use the already defined favicon standard and instead created their own short code to do this, thus you have to do a little work to setup this special icon. However, setting the Apple Touch Icon is relatively easy and a good idea, because by default iOS just saves a small thumbnail of your website as the application icon on a mobile device. These default thumbnails are often hard to identify and generally don’t look all that great.

Creating an Apple Touch Icon

To create an Apple touch icon you don’t have to be a professional graphic designer. As long as you have a good quality image that scales well and access to some simple image editing tools, you’ll be just fine. On the other hand, if you don’t already have an image that scales well or any image editing tools, then just hire a graphic designer to create your icon for you.

Begin by creating a square .png formatted graphic that is sized to 152 by 152 pixels. A 152-pixel image is the perfect size for the Apple iPad and will allow other Apple devices to properly resize the icon as needed. Although you can create individual icons specific to each of the Apple Mobile Device Types, we’ve found that creating one icon sized for the iPad works just fine. NOTE: if you love getting down and dirty and knowing all the little details about coding, checkout the iOS Human Interface Guidelines: Icon and Image Sizes or Safari Web Content Guide: Configuring Web Application articles.

By the way, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. Although some of these features were once key characteristics of Apple icons, some have since been deprecated and the device will automatically add those features that are still supported.

Implementing Your Apple Touch Icon

Implementing your Apple Touch Icon is very easy to do and requires one simple line of HTML code, unless of course you create individual touch icons for each device type. In that case you’ll need to add one line of HTML code for each of the images you create for the different devices; one more reason we use just one image for all device types.

<LINK REL=”apple-touch-icon” HREF=”http://your-dowmain.com/directory-path-to-image/apple-touch-icon.png” />

Make sure you upload your Apple Touch Icon to your web server and if you name your image file “apple-touch-icon.png” the only changes you need to make to the above line of code are to replace “your-domain.com” with your domain name and “directory-path-to-image” with the directory path to your touch icon.

Testing Your Apple Touch Icon

Once you’ve created your Apple Touch Icon, uploaded the image to your website, and made the appropriate HTML code edits you’re readying to test your handy work. Grab your favorite Apple mobile device, launch Safari, and visit your website. After your website loads press the AirDrop icon (looks like a box with an arrow pointing out the top of it) at the bottom of Safari. AirDrop will open and you should see a scrolling list of icons in the bottom portion of the display; press the “Add to Home Screen” icon and that’s it.

If all goes well you should see your customized Apple Touch Icon displayed on your mobile device; it will probably be the last icon on the last page of icons on your device. Below is how our Millionaire Success Network Apple Touch Icon looks on an iPhone. Oh… it looks the same on an iPad too!

iPhone Screen Shot Apple Touch Icon Preview

That’s it, simple and quick!

PS – this should work for your Android mobile devices visitors as well, with no other changes required. And if you have any problems getting the above code to work, try moving your Apple Touch Icon to the root directory of your web server and adjusting the image path accordingly.

Although this isn’t the same as having a dedicated iOS application, it does provide a better mobile user experience for visitors who routinely access your website from their mobile devices. More importantly it gives you complete control of how your brand is displayed to mobile users that bookmark your site to their home screen.

Being able to control every aspect of your brand and how it’s presented to your customers is priceless, so take an extra minute or two and add that Apple Touch Icon to your websites HTML code and take control of your branding today.

Readers Comments

comments powered by Disqus

Sign Me Up For Millionaire Success Tips & More!

We Respect Your Privacy

Recent Comments

Recent Tweets

Connect With Us

Apple Touch Icon Customize Your Website For Apple Products

iPhone Screen Shot Apple Touch Icon

There are plenty of Apple mobile device users out there, so why not take an extra minute or two and add a little known customization to your website in the form of an Apple Touch Icon and make those visitors fell special. If you manage your website, this really is easier than it looks and it’s a customization that will make you standout above your competition.

What is an Apple Touch Icon?

Apple touch icons are basically favicons for Apple mobile devices and when set in your HTML it will be displayed when a user saves your web page to their home screen on any of their Apple mobile (iPad, iPhone, and iPod) devices.

Unfortunately Apple didn’t just use the already defined favicon standard and instead created their own short code to do this, thus you have to do a little work to setup this special icon. However, setting the Apple Touch Icon is relatively easy and a good idea, because by default iOS just saves a small thumbnail of your website as the application icon on a mobile device. These default thumbnails are often hard to identify and generally don’t look all that great.

Creating an Apple Touch Icon

To create an Apple touch icon you don’t have to be a professional graphic designer. As long as you have a good quality image that scales well and access to some simple image editing tools, you’ll be just fine. On the other hand, if you don’t already have an image that scales well or any image editing tools, then just hire a graphic designer to create your icon for you.

Begin by creating a square .png formatted graphic that is sized to 152 by 152 pixels. A 152-pixel image is the perfect size for the Apple iPad and will allow other Apple devices to properly resize the icon as needed. Although you can create individual icons specific to each of the Apple Mobile Device Types, we’ve found that creating one icon sized for the iPad works just fine. NOTE: if you love getting down and dirty and knowing all the little details about coding, checkout the iOS Human Interface Guidelines: Icon and Image Sizes or Safari Web Content Guide: Configuring Web Application articles.

By the way, when creating your icon, don’t worry about adding fancy rounded corners or glowing effects. Although some of these features were once key characteristics of Apple icons, some have since been deprecated and the device will automatically add those features that are still supported.

Implementing Your Apple Touch Icon

Implementing your Apple Touch Icon is very easy to do and requires one simple line of HTML code, unless of course you create individual touch icons for each device type. In that case you’ll need to add one line of HTML code for each of the images you create for the different devices; one more reason we use just one image for all device types.

<LINK REL=”apple-touch-icon” HREF=”http://your-dowmain.com/directory-path-to-image/apple-touch-icon.png” />

Make sure you upload your Apple Touch Icon to your web server and if you name your image file “apple-touch-icon.png” the only changes you need to make to the above line of code are to replace “your-domain.com” with your domain name and “directory-path-to-image” with the directory path to your touch icon.

Testing Your Apple Touch Icon

Once you’ve created your Apple Touch Icon, uploaded the image to your website, and made the appropriate HTML code edits you’re readying to test your handy work. Grab your favorite Apple mobile device, launch Safari, and visit your website. After your website loads press the AirDrop icon (looks like a box with an arrow pointing out the top of it) at the bottom of Safari. AirDrop will open and you should see a scrolling list of icons in the bottom portion of the display; press the “Add to Home Screen” icon and that’s it.

If all goes well you should see your customized Apple Touch Icon displayed on your mobile device; it will probably be the last icon on the last page of icons on your device. Below is how our Millionaire Success Network Apple Touch Icon looks on an iPhone. Oh… it looks the same on an iPad too!

iPhone Screen Shot Apple Touch Icon Preview

That’s it, simple and quick!

PS – this should work for your Android mobile devices visitors as well, with no other changes required. And if you have any problems getting the above code to work, try moving your Apple Touch Icon to the root directory of your web server and adjusting the image path accordingly.

Although this isn’t the same as having a dedicated iOS application, it does provide a better mobile user experience for visitors who routinely access your website from their mobile devices. More importantly it gives you complete control of how your brand is displayed to mobile users that bookmark your site to their home screen.

Being able to control every aspect of your brand and how it’s presented to your customers is priceless, so take an extra minute or two and add that Apple Touch Icon to your websites HTML code and take control of your branding today.



Sign Me Up For Millionaire Success Tips & More!

We Respect Your Privacy

Recent Comments

Recent Tweets

Connect With Us

© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
backtotop