Company & Industry Related News

How to create and publish Apple web clip icons

Northeast Web Design Apple IconA really cool feature of the Iphone and Ipad is the ability to save icons of web pages to your home screen. These links, represented by an icon, are called Web Clips. Users have been able to do this for a few years now since Iphone launched the 1.1 3 update and for Itouch and ipad users its been available since apple launched the 2.0 operating system. Support for multiple icons for different device resolutions is available in iOS 4.2 and later.

Web clips are a great way to bookmark a site and have easy access to it without having to type in the address into a new window in your web browser. There is an extensive amount of information available about how to create one of these on apple’s website. I am going to explain and walk you through the process of creating and publishing this feature to your web page.

First you need to pick your image for the Icon. If you are building this for your company website you will most likely want to use a company logo but just about any picture will do. In this case I will be using the Northeast web design company logo.

These icons and images must meet specific criteria so that iOS can display them properly. In addition, icon and image files have naming requirements. I will guide you through the best way to do this.

Web clip icon recommended sizes for web apps and websites (In Pixels)

  • Iphone and Itouch – 57 x 57
  • High Resolution Iphone and Itouch – 114 x 114
  • Ipad – 72 x 72
  • High Resolution Ipad – 144 x 144

Now you will notice that there are a few different options. It is not necessary to create each size and incorporate codes for each of them because by default your apple device will resize the icon to best fit its resolution. I recommend creating the highest resolution version for high resolution Ipad. This way the icon will only be downscaled for the other devices and not up scaled. Sometimes images can appear blurry or pixilated if they are being stretched, so that’s why I recommend going with the highest resolution.

Ok, so we have our image and we know what size it needs to be. The next step is the design of the icon. Below I have included some great helpful tips located on apple.com

Tips for Designing Great Icons and Images

Beautiful, compelling icons and images are a fundamental part of the iOS user experience. Far from being merely decorative, the icons and images in your app play an essential role in communicating with users.

For the best results, enlist the help of a professional graphic designer. An experienced graphic designer can help you develop an overall visual style for your app and apply that style to all the icons and images in it.

Use universal imagery that people will easily recognize. Avoid focusing on a secondary or obscure aspect of an element.

Embrace simplicity. In particular, avoid cramming lots of different images into your icon. Try to use a single object that expresses the essence of your app. Start with a basic shape and add details cautiously. If an icon’s content or shape is overly complex, the details can become confusing and may appear muddy at smaller sizes.

Use color and shadow judiciously to help the icon tell its story. Don’t add color just to make the icon more colorful. Also, smooth gradients typically work better than sharp delineations of color.

In general, avoid using “greek” text or wavy lines to suggest text. If you want to show text in your icon, but you don’t want to draw attention to the words themselves, start with actual text and make it hard to read by shrinking it or doubling the layers.

In general, create an idealized version of the subject rather than using a photo. Although it can be appropriate to use a photo (or a screenshot) in an app icon, it’s often better to augment reality in an artistic way. Creating an enhanced version can help you emphasize the aspects of the subject that you want users to notice.

If your app has a very recognizable UI, consider creating a refined representation of it, instead of using an actual screenshot of your software in the app icon. Creating an enhanced version of the UI is particularly important when users could confuse a large version of the icon with the actual interface of the app.

Avoid using iOS interface elements in your artwork. You don’t want users to confuse your icons or images with the iOS UI.

Don’t use replicas of Apple hardware products in your artwork. The symbols that represent Apple products are copyrighted and cannot be reproduced in your icons or images. In general, it’s a good idea to avoid replicas of any specific devices in your artwork, because these designs change frequently and icons or images that are based on them can look dated.

Don’t reuse iOS app icons in your interface. It can be confusing to users to see the same icon used to mean slightly different things in multiple locations throughout the system.

Portray real substances accurately. Icons that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

Use transparency when it makes sense. Transparency in an image can help depict glass or plastic, but it can be tricky to use convincingly. You should not use transparency in your app icon.

Application Icons

An application icon is an icon users put on their Home screens and tap to start an application. This is a place where branding and strong visual design should come together into a compact, instantly recognizable, attractive package. Every application needs an application icon.

Note: If your app is a game, its app icon is also used in Game Center.

Try to balance eye appeal and clarity of meaning in your icon so that it’s rich and beautiful and clearly conveys the essence of your application’s purpose. Also, it’s a good idea to investigate how your choice of image and color might be interpreted by people from different cultures.

Create different sizes of your application icon for different devices. If you’re creating a universal application, you need to supply application icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

  • 57 x 57 pixels
  • 114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

  • 72 x 72 pixels
  • 144 x 144 (high resolution)

When iOS displays your application icon on the Home screen of a device, it automatically adds the following visual effects:

  • Rounded corners
  • Drop shadow
  • Reflective shine (unless you prevent the shine effect)

For example, a simple 57 x 57 pixel iPhone application icon might look like this:

Sample Apple web clip icon

When it’s displayed on an iPhone Home screen, iOS adds rounded corners, a drop shadow, and a reflected shine. So the same application icon would look like this:

Completed Apple web clip icon

Note: You can prevent iOS from adding the shine to your application icon. To do this, you need to add the UIPrerenderedIcon key to your application’s Info.plist file (to learn about this file, see “The Information Property List” in iOS App Programming Guide).

The presence (or absence) of the added shine does not change the dimensions of your application icon.

Ensure that your icon is eligible for the visual enhancements iOS provides. You should provide an image that:

  • Has 90° corners (it’s important to avoid cropping the corners of your icon—iOS does that for you when it applies the corner-rounding mask)
  • Does not include a drop shadow
  • Does not have any shine or gloss (unless you’ve chosen to prevent the addition of the reflective shine)
  • Does not use alpha transparency

Give your application icon a discernible background. Icons with visible backgrounds look best on the Home screen primarily because of the rounded corners iOS adds. This is because uniformly rounded corners ensure that all the icons on a user’s Home screen have a consistent appearance that invites tapping. If you create an icon with a background that disappears when it’s viewed on the Home screen, users don’t see the rounded corners. Such icons often don’t look tappable and tend to interfere with the orderly symmetry of the Home screen that users appreciate.

Be sure your image completely fills the required area. If your image boundaries are smaller than the recommended sizes, or you use transparency to create “see-through” areas within them, your icon can appear to float on a black background with rounded corners.

For example, an application might supply an icon on a transparent background, like the blue star on the far left. When iOS displays this icon on a Home screen, it looks like the image in the middle (if no shine is added) or it looks like the image on the right (if shine is added).

Additional Apple web clip icon

An icon that appears to float on a visible black background looks especially unattractive on a Home screen that displays a custom picture.

Create a large version of your application icon for display in the App Store. Although it’s important that this version be instantly recognizable as your app icon, it can be subtly richer and more detailed. There are no visual effects added to this version of your app icon.

For the App Store, create a large version of your app icon in two sizes so that it looks good on all devices:

  • 512 x 512 pixels
  • 1024 x 1024 pixels (high resolution); recommended

If you’re developing an app for ad-hoc distribution (that is, to be distributed in-house only, not through the App Store), you must also provide the large versions of your app icon. This icon identifies your application in iTunes.

iOS might also use the large image in other ways. In an iPad application, for example, iOS uses the large image to generate the large document icon, if a custom document icon is not supplied.

Note: For all images and icons, the PNG format is recommended (avoid using interlaced PNGs).

The standard bit depth for icons and images is 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel.

You do not need to constrain your palette to web-safe colors. Although you can use alpha transparency in the icons you create for navigation bars, toolbars, and tab bars, do not use it in application icons.

apple-touch-iconThose are some great tips! In this instance I have resized the NEWD company logo and added some gradient to it to add some depth. I have included a photoshop template you can use to create your own icon in the highest resolution. Apple devices automatically add effects and round out the corners of your image so make sure you do not round out the corners or add any effects unless you intend to shut off the automatic effects defaulted by apple via code. You will want to save this file as a PNG file.

Now I will explain how to code this to your site accordingly. It is really important to name the file depending on how you intend on the icon to be used. Below I have listed more useful information I gathered from apple.com

  • To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png or apple-touch-icon-precomposed.png. If you use apple-touch-icon-precomposed.png as the filename, Safari on iOS won’t add any effects to the icon.
  • To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:
<link rel=”apple-touch-icon” href=”/custom_icon.png”/>
  • In the above example, replace custom_icon.png with your icon filename. If you don’t want Safari on iOS to add any effects to the icon, replace apple-touch-icon with apple-touch-icon-precomposed.
  • To specify multiple icons for different device resolutions—for example, support both iPhone and iPad devices—add a sizes attribute to each link element as follows:
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />
  • The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 57 x 57.

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used. If multiple icons are suitable, the icon that has the precomposed keyword is used.

If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon… or apple-touch-icon-precomposed… prefix. For example, if the appropriate icon size for the device is 57 x 57, the system searches for filenames in the following order:

  1. apple-touch-icon-57×57-precomposed.png
  2. apple-touch-icon-57×57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

See “Custom Icon and Image Creation Guidelines” for webpage icon metrics.

Okay so we want to use the code to specify this for every page on our site so we would name the PNG

apple-touch-icon.png

Now lets code it into our site. Place the file in the root document folder.

We insert the following code to our site.

<link href=”https://northeastwebdesign.com/apple-touch-icon.png” rel=”apple-touch-icon”>

Now lets go ahead and test out our web clip icon. We need to be on an Iphone, I touch or Ipad. Click on the web page and let it load up.

To bookmark this – or any other page – you simply tap on the “book” symbol along the bottom of the screen.

bookmark this

Click Add to Home Screen. Tap it and you’ll now have a chance to make your own custom name of the bookmark: Click add and bam there it is right on your home screen with the rest of your apps.

Add to Home Screen

I hope that you enjoy this useful shortcut for your apple device. Now you know how to do it so go ahead and make your own Icon and add it to your site!

PROTECT IP / SOPA Breaks The Internet

Stop the firewall of America, please take a few moments to watch “Fight for the Future”, this video helps to explain what our government is trying to do to gain control over the internet. This bill if passed, is trespassing on our constitutional rights of freedom of speech and will effect globally how the internet is manipulated by government for certain benefit for industry specific corporations.

PROTECT IP / SOPA Breaks The Internet from Fight for the Future

Protect our rights to free speech, privacy, and prosperity. The Senate is scheduled to vote on the internet censorship bill on Tuesday, January 24th, and unless we can find 41 senators to block the vote, it is going to pass. Please go to American Censorship.org to petition your state’s senators.