Creating a web clip icon for each iOS resolution

There are apps in the Mac App Store, like Icons, that can help developers create web clip icons. Otherwise, you can just use your favorite graphic editor or even the basic OS X utility Preview (included free on every Mac) to create the image files required.

For the iPhone 4 and latest-generation iPod touch, a 114px x 114px image is what you’ll need. IPads optimally use 72px x 72px, and all other iOS devices prefer 57px x 57px image files. In all cases, the web-standard resolution of 72dpi is the way to go. If you like, you can manually create a custom image for each device, or you can just create an image targeting one device and let the others scale the image up or down as needed.

One thing that iOS does on your behalf is add image effects like rounded corners, a drop shadow and the iconic reflective shine to the icons you create. To take advantage of this, ensure that the image file you create is perfectly square and free of any shine or gloss. If you prefer to add your own effects, be sure to append the -precomposed keyword to the end of the image file name.

Adding the icons to your website

If you’ve decided to use just a single image or set of images for your entire site, then simply copy the files to the root directory of your domain. On the other hand, if you want to add different icons to different individual pages of your site and name them however you like, simply add the following link element to your pages, substituting your custom file name for the href value:

<link rel="apple-touch-icon" href="/your-custom-icon.png"/>

This also works if you create specific icons for each device’s particular display characteristics. You also need to include the size attributes, as illustrated in the following code:

<link rel="apple-touch-icon" href="your-custom-icon-for-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="your-custom-icon-for-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="your-custom-icon-for-iphone4.png" />

Now when someone decides to add this page to their home screen, the image file you created will be used in place of a scaled-down thumbnail of the page itself.

Users increasingly want to access content on the Internet using their mobile devices, and that means iOS devices for a large percentage. If you want to make a lasting impression, make your content accessible on iPhones and iPads first of all, but also make sure that if users do want to save your site for later viewing, they can find it among their many web clips and apps with relative ease.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• A Media Tablet Forecast, 2011 – 2015
• The rise of tablets in the enterprise
• Why iMessage won’t kill SMS

1. Find Twitter for Mac in the Finder. You can do this by either looking for it yourself (it will most likely reside in [Your name]/Applications) or by right- or Control-clicking on Twitter in your Dock and choosing Options > Show in Finder.



2. Once you’ve located the app, quit it if it’s running, then right-click on the icon and choose Show Package Contents. This lets you look inside the app bundle to find the files it needs to run, so be careful about what you do as you explore. Next, navigate into the Contents folder, and then find the Resources folder inside that. You’ll see three .icns files — the 3D one from the latest update and two others.



3. If you try to change the files while they’re still in the application bundle, it won’t work, so drag the three files out onto your Desktop. Rename the 3D icon to Icon1.icns and then rename the icon you want to use as Icon.icns. Note that the file name is case-sensitive. Now drag the renamed icons back into the Resources folder. You’ll have to click “Authenticate” and type your password in order to overwrite the existing files.



4. The last thing to do is drag Twitter out of the Dock and relaunch the application. Your new/old icon should now show up, and all is right with the world again.

This method works with any application, not just Twitter. Just make sure that the icon you drag in has exactly the same name as the app’s existing icon, and you should be good to go.

Related content from GigaOM Pro (sub req’d):

• How to Market Your iPhone App: A Developer’s Guide
• Mobile App Developer Survey: Profiles, Platforms and Monetization
• App Developers: Are You Ready for HTML5 and Metered Data?

Apparently, as far as the folks at Apple are concerned, all roads lead to Cupertino.

Toying with your latest Apple purchase, it’s not unusual to marvel at the visual joys of the Cupertino company’s product design — gorgeous electronic objects one and all, whether it be the pristine sheen of a brand new Unibody Mac Book Pro or the iconic form factor of an iPod classic.

Dazzled by these aesthetically excellent devices, it’s sometimes easy to forget the software. You might still get that warm glow as you swipe your finger across your brand new iPhone’s oleophobic screen, but did you ever stop to consider any of those lovely looking icons speeding past your extended index digit?

An icon that’s certainly worth a moment of your time is the one that Apple created for Maps. Grab your iPhone now and took a good look at it — notice anything familiar? Try looking a little closer.

Just in case you’re not familiar with that address – 1 Infinite Loop, Cupertino, CA — it’s precisely where the magic happens, the place where dreams are made: the location of Apple’s headquarters in California.

It’s not coincidental that the iPhone Maps icons references Apple’s headquarters. The Address Book application for OS X features the very same address for Apple’s HQ, and the Cupertino folks certainly aren’t strangers to incorporating curious details and other such Easter Eggs in their product designs.

If you’ve discovered any other interesting Apple Easter Eggs, let us know!

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile Q4: All Eyes Were on Android, 4G and the Rising Tablet Tide
• Report: A Mobile Video Market Overview
• In Q3, the Tablet and 4G Were the Big Stories

Well, it did. Enough of one to warrant a rejection of the update by Apple. And this isn’t the first time the iPhone-likeness has gotten a developer in trouble, either. Pocket God, which owes its popularity at least in part to the weekly content updates from developer Bolt Creative, was also blocked at the beginning of April for similar reasons. Obviously, this was more than a minor inconvenience since it completely threw off Bolt Creative’s update schedule, which is the main selling point of their app.

Apple didn’t point out exactly what had caused the rejection in the case of Pocket God, but it did refer to the use of copyrighted images. Bolt eventually decided that it must’ve been an image resembling an iPhone that they’d introduced in an options screen, but Apple didn’t just identify the offending graphic right away, which would’ve been too easy.

I haven’t seen the image Pocket God used that caused their rejection, but Instapaper developer Marco Arment has posted screenshots of the icon that he used to inspire Apple’s wrath. It’s exactly the same as one used for FileMagnet, another (approved) iPhone app currently available. I’m sure the icon is identical because Arment got it from Joshua Keay, the guy who designed it for FileMagnet in the first place.

The problem then appears to be one of consistency. Depending on who’s looking at your app, and on what day, you may garner a rejection when on any other day, you’d slip through unnoticed. Whatever standards Apple has adopted in-house as the criteria for rejection, they obviously need to be looked at again to establish better, less ambiguous, and more consistent standards. As they stand, it must be like asking three different people to draw a house, and getting three completely different images back. The task for Apple is then to pre-determine the nature of the house so that they get consistent results back when they ask different people to go out and draw the same one.

At this point, Apple can’t really get by on the assumption that these are growing pains with the app review process. This kind of multiple standard really undermines the fairness of the app store, especially when the only thing at issue is the use of an image that resembles the device the app is being sold for. If you want to maintain your tyrannic control over apps, at least show us you’re a just and consistent tyrant.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• Mobile Q4: All Eyes Were on Android, 4G and the Rising Tablet Tide
• Report: A Mobile Video Market Overview
• In Q3, the Tablet and 4G Were the Big Stories

Movies, created by French developer, Olivier Bernal, went live at the App Store on December 19. The app, retailing at $2.99, allows users to grab essential information on the latest box-office releases.

The icon for Movies clearly features a watermark from iStockphoto, a royalty free image library, implying that rather than purchase the master image, Bernal has pilfered the preview sample.

This particular iStockphoto license (including the ‘Electronic Items for Resale’ addendum) is available for 115 credits. At 95 cents per iStockphoto credit, this would be a one-off cost of $109.25. Bernal would therefore need to generate only 37 sales of Movies to cover the cost of the image license.

Achieving just 37 sales is hardly a difficult objective when you also consider that, in order to maximize the potential customer-base for his app, Bernal has created several iterations using the same icon, including Cinema and Cinema UK.

It seems that this may not be the first time Bernal has pilfered from iStockphoto. There are two more highly suspect app icons – TV Shows and Week Number of the Year. The TV Shows icon features a white diagonal line, quite possibly from an iStock Photo watermark. The latter of the pair, clearly uses an iStock Photo sample, titled Calendar – icon idea.

It’s not as immediately obvious as our prime suspect, but enlarging the app icon and then comparing it to the iStockphoto sample image, the original watermark is easily visible.

Sites such as iStockphoto provide a valuable service to organizations with limited design resources, allowing independent creatives to distribute royalty-free visual assets at reasonable rates. It’s therefore somewhat disappointing to see independent developers effectively stealing — surely they should understand the value of content generated by fellow independents?

Furthermore, setting aside development time and cost, distributing via the App Store is hardly prohibitive in terms of initial outlay: Apple charges a one-off fee to developers of $99. It seems that either saving a few bucks or just downright laziness on Bernal’s part led him to grab the sample imagery from iStockphoto.

The question is, now that Bernal has been called out on his immoral icon antics, what will his next move be? It’ll be most interesting to see how he handles the designers whose creations he has illicitly profited from; ideally, after a hasty apology, Bernal will be compensating them for their contribution to his App Store products.

Note that we’ve tried to reach Bernal for comment on the story but have yet to hear back. We assume he was too busy shoveling a mountain of coal from his stocking, stealing bonbons from children and kicking puppies.

UPDATE: We heard back from Mr. Bernal:

For [your] information, I bought the right to use the pictures this morning. You were right, at the beginning I first started with nothing and can’t afford to pay for the pictures, it’s perfectly normal to pay if I intend to continue to use it.

He says the updated, non-watermarked icons will be implemented with the next updates to the applications sometime in January.

Related research and analysis from GigaOM Pro:
Subscriber content. Sign up for a free trial.

• How to Market Your iPhone App: A Developer’s Guide
• Virtual Worlds: Trends and Opportunities