Добавляем иконку сайта для iOS iPhone iPad

When the iPhone launched a few years ago with web apps as the standard way of getting to content, Apple introduced a way to specify an icon for the website to be used if a user chooses to bookmark it to the homescreen. Even though a lot of the previous web apps are now native apps instead, you can still add this icon on your website for users wanting to bookmark it.

Creating the icon file

You can use any graphics application to create an icon of your choice. The beauty of the icon is that you do not have to think about the glossy finish or the rounded corners, effects which iOS automatically applies.

The only thing you need to consider (apart from the artwork itself) is the size of the icon. As Apple has introduced the iPad and also the more high-res iPhone 4, there are now a variety of icon sizes you can use:

  • Standard iPhone: 57×57
  • For the iPad: 72×72
  • Optimized for iPhone 4: 114×114

Another thing to consider when designing is that you can if you wish choose not to have iOS add any effects at all to your icon. This is done by appending the -precomposed suffix to the file naming (see the file naming section).

The icon support was introduced in iOS 1.1.3. Support for precomposed icons were added in iOS 2.0. Different device resolution support for icons is available from iOS 4.2 and later.

Naming the file

By default, iOS will search your website root to see if it can find icons saved with the proper naming, that is unless you have specified the icon in the HTML code (see below).

Basic Format
The standard and basic format, if you are only using one icon, would be to save your file with the nameapple-touch-icon.png and upload it to the root directory of your site. Should you want to apply your own styles and you want to tell iOS not to add its default styles, append -precomposed like this: apple-touch-icon-precomposed.png.

Device Specific
If you want to create an icon that looks best on each device (which I would recommend you doing), then you can add in the size in the file name as following:

  • apple-touch-icon-57x57.png (standard iPhone)
  • apple-touch-icon-72x72.png (standard iPad)
  • apple-touch-icon-114x114.png (iPhone 4)
Important! All of these files must be uploaded to the root of your website in order for iOS to recognize them, unless you specify the icon in the HTML source.

Specifying the file in the HTML

If you want to name the icons according to your own wish or upload them into a specific directory or perhaps even more useful, use different icons for different pages on your site, you should tell iOS where to look for the icon in the HTML source.

To do this, you need to add a little bit of code in the section of your website.

One icon only
If you want to have one icon for the entire site, regardless of device and resolution use this code (replacing /your-icon-file.png with the proper path to your icon):

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

Should you rather want iOS not to add the default styles to the icon, use apple-touch-icon-precomposed instead of apple-touch-icon in the rel attribute.

Multiple icons for different resolutions (recommended)
Adding multiple icons optimized for the different resolutions of the iOS devices (which again I recommend), just requires a few extra lines of code:

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

When there is no sizes attribute set, it will default to 57×57 which is why it is left out in the first example.

Your icons can be named exactly what you want to name them as this does not affect their display as long as they are appropriately referenced in the code.

As with previous examples, if you don’t want iOS to apply the default effects, use apple-touch-icon-precomposed instead of apple-touch-icon in the rel attribute.

Adding an iPhone/iPad Icon for Your Website | Bernskiold Learning.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *