NeutralAxisTwitter

Use a Custom Icon for Any iPhone Web Clip

by on Jan.14, 2010, under iPhone
Visited 5842 times, 6 so far today

In a previous post, I described how to make custom iPhone and iTouch icons for web pages you host yourself.  That procedure couldn’t be done for web pages you didn’t control, such as a Google Spreadsheet.  Here’s an option for creating custom icons for that sort of situation as well.

As recap, what we’re trying to overcome with these icons is this:  When you browse to any web page on your iPhone or iTouch, you can have it create an icon on your home screen that goes directly to that page.  That’s called a web clip.  Doing this generates an icon that is a scaled and cropped picture of the image on screen at the time unless the website owner has created their own iPhone icon.  How to do that for your own website is what my previous post on the topic described.  This post covers how to use a custom icon for a website you don’t control.  Note that this isn’t the same thing as creating an icon for an App purchased from the iTunes App store.  I think the only way to change those is to jailbreak your device.

I wanted to make a custom icon for a Google Spreadsheet used to keep track of storage boxes full of CDs.  The image at the head of this post shows the default icon created as a scaled image of the page, and my new icon.  With the two options presented here, it doesn’t matter if the site already has an icon associated with it or not.  Also keep in mind that the iPhone adds the reflection effect on its own.  Your icon image shouldn’t have any added reflection.

Host your own icon

After making a suitable image for the icon, (57×57 png format), save it to somewhere within your website path.  Open a text editor and make an html file like below in your webserver’s root folder.  Of course you’ll need to alter the paths and label names to suit your specific locations.  The image file and html file can be named anything.  After you’ve saved the file, leave the editor open because you’re not done with it yet.

<html>
<head>
   <link rel="apple-touch-icon" href="path/to/iconfile.png"><title>Icon Label</title>
   <!--start_comment
   <meta http-equiv="refresh" content="0; URL=http://URL_of_site_to_load.com">
   end_comment-->
</head>
<body>
</body>
</html>

The <link> line establishes which image to use for the icon and the label.  The <meta> line tells your browser to immediately refresh, or redirect, to the URL specified.  Notice that the <meta> line is within a comment.  That important for now.  If it weren’t commented out, you would browse to this file on your iPhone and immediately be sent to the destination without being given time to add it to your home screen.  The comment prevents that from happening.

All this file will do is load a blank page.  When the blank page loads, touch the + button and add it to the home screen.  You should see your new icon appear.  Go back to your editor and remove the comment start and end tags surrounding the <meta> line and re-save the file.  Now when you touch the new icon, you’ll go to this file, which will then immediately forward you on to the destination URL.  You’ll briefly see this file’s URL in the address bar of the browser.

Here’s another before/after example of an icon I made using the logo of the local public library.

Hosting by others

Webclipicons.info provides a free service that can handle this for you if you don’t have access to your own hosting.

Through their website, upload a 57×57 PNG image to be used for your icon, supply the URL of the page it goes to, a label, and your email address.  Nearly instantly, you’ll get an email back with a link to a webclips.info URL.  Browse to that URL and create the web clip.  When you touch your new custom icon, you’ll briefly see that your browser is loading a webclips.info URL, which then immediately forwards on to the destination URL.  Since this is being done as a forwarding service, don’t use a URL that contains embedded usernames or passwords that webclipicons could conceivably intercept.  There’s also a choice to make the new icon available publicly to other users.  The default is public.

:,


Tweet ThisFacebook ShareRight Click & Copy URL

Leave a Reply

See Commenting Guidelines

Spam protection by WP Captcha-Free

Visit our friends!

A few highly recommended friends...