Create a Website Icon for Your Mobile Device

Chimp MediaHow Tos1 Comment

homescreenicon
Create a Website Icon for Your Mobile Device

I want that!

You know how when you’re on your mobile device and you go to your own website and want to bookmark it, you get either some random image or a teeny tiny screen shot of your website as the home page icon?  Annoying!

Keep reading to find out how to set a custom image as your home screen website icon for your mobile device, on either an Apple or Android device!

 

First for the Apple Icon . . .

 

Create Your Image

You’ll need to use an image editing software like Photoshop, Photoshop Elements, Illustrator, etc. that will allow you to manually adjust the resolution of your image.

  1.  Set your image size to 300 pixels wide by 300 pixels high.  It used to be popular to set these images to 144 x 144, but the larger image works better on the newer retina display screens on the iPad and iPhone.
  2. You’ll need to make the resolution (pixels/inch) 326 – again, to look nice on the retina displays.  You can use a lower resolution, but then when you use a new iOS device, the image will look fuzzy.
  3. Then you want to convert the color mode to RGB.  In some programs, it’s Adobe RGB Profile.

That’s all you need to do to the image itself.  The gradient look, or shiny feel of the iOS icons will be done automatically when it’s downloaded to the device later.

 

Save and Name Your Image

  1. When you save your image, you should save it with the file extension of .png.  A file type of .jpg or .gif might work, but .png will be sharper and better quality.
  2. The name of your image has to match this exactly:  apple-touch-icon.png.  All lowercase, and don’t forget the hyphens.

 

Upload Your Image to Your Server

  1. Now you’re ready to upload your image to your server, so when you visit your website via your device, it can find the file.  Your device will search in the root directory of your site, so this is where you need to place your icon.
  2. You will need FTP access to the folders and files on your site.  There are lots of free programs for this, like CuteFTP and my favorite, FileZilla.  You’ll need to get your ftp username and password from your hosting provider.
  3. Your icon must be uploaded into the root directory of your site, usually public_html.  The root directory is where you’ll find your home page file, usually index.html, index.php, or default.asp.  It’s the highest level folder of your site.

 

Get the Icon onto Your Device

  1. On your device, using your browser, go to your website.
  2. Tap the Share icon – on an iPhone, it looks like a square with an arrow shooting out of it.
  3. On the next screen, you’ll be given share options, usually Facebook, Messaging, Twitter, etc.  Among this list will now also appear your new website icon.  In some cases, your icon doesn’t show in this list.  In this case, tap the Add to Home Screen icon and skip to Step 5.
  4. Tap your new icon and select Add to Home Screen.  If you’ve selected to Add to Home Screen in Step 3, skip this step.
  5. Name it whatever you want, but keep it short – this is the text that will appear below the icon on your device.  After you’ve typed in the name you want, tap Save or Add.

 

Your new icon is now showing up on your home screen, with the nice gradient/shine like the other icons.  Just tap it to go directly to your website!

 

Now for the Android Icon . . .

All of the steps are the same as above, even naming the icon apple-touch-icon.png.  If you’ve already done the above steps for an iOS device, you don’t need to repeat them for the Android.  Just add the following to the above process.

  1. You’ll need to add two lines of code to the header information in your website, between the <head> and </head> tags.

<link rel=”apple-touch-icon” href=”/apple-touch-icon.png”/>
<link rel=”apple-touch-icon-precomposed” href=”/apple-touch-icon.png”/>

  1.  When you visit your website on your device, you’ll bookmark your site instead of sharing it.  Then access your browser’s bookmarks, long-touch yours, and add it to your home screen.

Sometimes, your icon still won’t show up correctly on Android.  If your site uses SSL, a standard bookmark may appear if your certificate is expired or doesn’t match your domain.  There are phones by some manufacturers where your icon will appear as a tiny overlay on top of the regular bookmark icon.  Since this platform is widely open source and not regulated like Apple’s is, there isn’t a sure-fire way to ensure this will always work across all phones.

 

Enjoy your own home screen icon.  Not all companies have one, so you’ll be ahead of the curve!

One Comment on “Create a Website Icon for Your Mobile Device”

  1. whoah this weblog is fantastic i love reading your posts.
    Keep up the good work! You recognize, a lot of people are searching around for this information, you can aid them greatly.

Leave a Reply

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