How to Make Your Website Icon Look Like an App

Access Your Site from an iPhone with an App-Like Icon

So you’ve gotten your website online using WordPress, and hopefully using a cutting-edge theme such as Winning Agent Pro. Your site looks beautiful on your computer screen and, since your theme is mobile responsive, it also looks quite snazzy on your iPhone and iPad. Now, how about taking it one step further for those mobile devices? Just like a favicon works to customize your site title in a browser, a specific-sized icon can be used to add your site to the screen of any iPhone and iPad, and, look just like an app icon. If I’ve lost you, I’ll explain — using Safari on your iPhone or iPad, you can tap the share button at the bottom and select Add to Home Screen:

If you have not added any app-like icon images that we’re showing you how to do in this article, your site’s icon will appear as miniature view of the page:

Unless one has x-ray vision, they’re not likely to be able to make out the contents of that image. Never fear — all you need to do is follow these steps:

Step 1 : Create

Create four square images in the sizes below.  Don’t worry about the rounded corners, iOS takes care of that for you.

For iPhone and iPod touch, create icons that measure:

• 120 x 120 pixels

• File name: apple-touch-icon-120×120.png

• 60 x 60 pixels (standard resolution)

• File name: apple-touch-icon.png

For iPad, create icons that measure:

• 152 x 152 pixels

• File name: apple-touch-icon-152×152.png

• 76 x 76 pixels (standard resolution)

• File name: apple-touch-icon-76×76.png

Note: If you’d like to read more about these specifications, have a look at this article from Apple’s iOS Developers Library: iOS Human Interface Guidelines

Step 2: Copy

Copy these images to the root of your site, this is the folder where WordPress is installed. This is all you have to do for iOS (iPhone and iPad). However, to be thorough, add these four lines of HTML to your header to have your icon also appear on Android devices. If you’re using a current Genesis child theme, click under Genesis > Theme Settings for access to the wp_head() section.

Step 3 : Test

That is it! Now test your changes — on your iPhone or iPad, go to your website in Safari, tap the share icon on the bottom and tap the Add to Home Screen option. You should see your new icon and your site title on the right, where you have a chance to shorten the text. Here’s how the Winning Agent Pro demo site appears:

Step 4 : Share

Last but not least, share this with all of your prospects and clients! Wouldn’t you rather them tap on YOUR website icon instead of Realtor.com? Yep, I thought so.