Winning Agent

Sales That Work

  • About
  • Store
  • Blog
  • The Stream
  • Forum
  • Jobs

How to Make Your Website Icon Look Like an App

August 25, 2014 by Ginger Coolidge Leave a Comment

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedIn

winning-agent-iphone-screen

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:

add-to-home-screen-share

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:

before-icons

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.

Note: Replace www.yoursite.com with the path of your website.

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:

iPhone-home-screen-winning-agent-icon

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.

More Great Reading

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedIn

Filed Under: Realtor Tech Tips, Web and Social Media Tagged With: Hyperlocal Websites, Image, Realtor Websites

About Ginger Coolidge

Tech junky, Genesis way of WordPress-ing, Dog rescue/lover, 2 cups coffee = verbal, I blog over at gingercoolidge.com

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Looking For Something?

Email Newsletter

Sign up to receive free updates from the Winning Agent blog.

Connect With Me

  • Facebook
  • LinkedIn
  • Pinterest
  • Twitter

StudioPress Real Estate WordPress Theme: Agent Focused Pro Theme

StudioPress Premium WordPress Themes: Winning Agent Pro Theme




Loan Types & Property Definitions

There are a lot of different types of mortgages, and there are a lot of different types of real estate property. Here is a list of the most common types of each. We’ve added some links to the most popular articles on the subject.

Read More

Real Estate and Mortgage Forum

We think getting many viewpoints to a particular question is important because it helps you to make better decisions. It’s so important that we have woven the Forum all throughout Winning Agent. We invite you to ask questions, make comments, and be part of the discussion.

Read More

Glossary of Real Estate Terms

Real estate and mortgage finance often times comes with its own unique language. If you work with it every day, it becomes 2nd nature, but most people don’t work with it every day. So we’ve created a glossary of mortgage and real estate terms.

Read More

Copyright © 2023 Winning Agent · Powered by the Genesis Framework · Contact Us
Become an Affiliate
This site uses affiliate links, but know that we only recommend products we personally use and enjoy!

 

Loading Comments...