Apple touch icon title

Use Apple touch icon

Development flow integration

Use Apple touch icon ( apple-touch-icons )

apple-touch-icons requires that at least one Apple touch icon is present and of a standard size.

Why is this important?

Since iOS 1.1.3 , Safari for iOS has supported a way for developers to specify an image that will be used to represent the web site or app on the home screen. The image is known as the touch icon.

Per Apple’s current guidance, default touch icon sizes are as follows:

Device or context	Icon size
iPhone	180px × 180px (60pt × 60pt @3x)
iPhone (X/Plus)	120px × 120px (60pt × 60pt @2x)
iPad Pro	167px × 167px (83.5pt × 83.5pt @2x)
iPad, iPad mini	152px × 152px (76pt × 76pt @2x)

Not declaring the touch icon in the page and having it in the root of the site is not recommended, as Apple may change what is requested by default.

In older versions of Safari for iOS, the precomposed keyword could be used to prevent iOS from adding different visual effects to the touch icon (i.e., rounded corners, drop shadow, reflective shine). Starting with iOS 7, no special effects are applied to touch icons, so there is no need to use the precomposed keyword anymore.

When using one image, there is no need to use the sizes attribute.

As of iOS 11.1.0 , Safari for iOS supports the web app manifest file which provides a standard, cross-browser way of defining, among other, the icons browsers can use in various contexts (home screen, application menu, etc.). However, Safari ignores the icons defined in the web app manifest and still uses the non-standard apple-touch-icon .

What does the hint check?

The hint checks if one or more apple-touch-icon declarations exist in the , and:

• each has rel=»apple-touch-icon»
• each declared image is accessible (e.g., doesn’t result in a 404 ),
• each declared image is a PNG of one of the resolutions specified above

Examples that trigger the hint

No apple-touch-icon was specified:

The apple-touch-icon is not specified in :

The apple-touch-icon has a rel attribute different than apple-touch-icon :

The apple-touch-icon is not accessible:

Response for apple-touch-icon.png :

The apple-touch-icon is not a PNG file:

One or more apple-touch-icon files is not a recommended size:

Examples that pass the hint

How to use this hint?

This package is installed automatically by webhint:

To use it, activate it via the .hintrc configuration file:

Note: The recommended way of running webhint is as a devDependency of your project.

Источник

Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Apple Touch Icon

Иконка сайта в iOS на экране закладок и домашнем экране.

Иконки разных размеров указываются атрибутом sizes :

Apple Touch Icon Precomposed

Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

Mask Icon

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .

Apple-Mobile-Web-App-Title

При добавлении сайта на домашний экран в iOS задает имя иконки.

Apple-Mobile-Web-App-Capable

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

Apple-Mobile-Web-App-Status-Bar-Style

Задает стиль панели состояния при полноэкранном режиме.

Может иметь следующее значение:

default	Белый фон
black	Черный фон
black-translucent	Прозрачный фон и белый цвет иконок и шрифтов

default

black

black-translucent

Apple-Itunes-App

В iOS Safari выводит баннер с приложением в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

Format-Detection

В iOS запрещает распознавать номера телефонов и адреса.

Источник

Safari Web Content Guide

Configuring Web Applications

A web application is designed to look and behave in a way similar to a native application—for example, it is scaled to fit the entire screen on iOS. You can tailor your web application for Safari on iOS even further, by making it appear like a native application when the user adds it to the Home screen. You do this by using settings for iOS that are ignored by other platforms.

For example, you can specify an icon for your web application used to represent it when added to the Home screen on iOS, as described in Specifying a Webpage Icon for Web Clip . You can also minimize the Safari on iOS user interface, as described in Changing the Status Bar Appearance and Hiding Safari User Interface Components , when your web application is launched from the Home screen. These are all optional settings that when added to your web content are ignored by other platforms.

Read Viewport Settings for Web Applications for how to set the viewport for web applications on iOS.

Specifying a Webpage Icon for Web Clip

You may want users to be able to add your web application or webpage link to the Home screen. These links, represented by an icon, are called Web Clips. Follow these simple steps to specify an icon to represent your web application or webpage on iOS.

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

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:

In the above example, replace custom_icon.png with your icon filename.

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:

The icon that is the most appropriate size for the device is used. See the “Graphics” chapter of iOS Human Interface Guidelines for current icon sizes and recommendations.

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 no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon. prefix. For example, if the appropriate icon size for the device is 58 x 58, the system searches for filenames in the following order:

Note: Safari on iOS 7 doesn’t add effects to icons. Older versions of Safari will not add effects for icon files named with the -precomposed.png suffix. See First Steps: Identifying Your App in iTunes Connect for details.

Specifying a Launch Screen Image

On iOS, similar to native applications, you can specify a launch screen image that is displayed while your web application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a link element to the webpage, as in:

In the above example, replace launch.png with your startup screen filename. See the “Graphics” chapter of iOS Human Interface Guidelines for current launch screen sizes and recommendations.

Adding a Launch Icon Title

On iOS, you can specify a web application title for the launch icon. By default, the tag is used. To set a different title, add a meta tag to the webpage, as in:

In the above example, replace AppTitle with your title.

Hiding Safari User Interface Components

On iOS, as part of optimizing your web application, have it use the standalone mode to look more like a native application. When you use this standalone mode, Safari is not used to display the web content—specifically, there is no browser URL text field at the top of the screen or button bar at the bottom of the screen. Only a status bar appears at the top of the screen. Read Changing the Status Bar Appearance for how to minimize the status bar.

Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.

You can determine whether a webpage is displaying in standalone mode using the window.navigator.standalone read-only Boolean JavaScript property. For more on standalone mode, see apple-mobile-web-app-capable .

Changing the Status Bar Appearance

If your web application displays in standalone mode like that of a native application, you can minimize the status bar that is displayed at the top of the screen on iOS. Do so using the status-bar-style meta tag.

This meta tag has no effect unless you first specify standalone mode as described in Hiding Safari User Interface Components . Then use the status bar style meta tag, apple-mobile-web-app-status-bar-style , to change the appearance of the status bar depending on your application needs. For example, if you want to use the entire screen, set the status bar style to translucent black.

For example, the following HTML sets the background color of the status bar to black:

For more on status bar appearance, see the “UI Bars” chapter of iOS Human Interface Guidelines .

Linking to Other Native Apps

Your web application can link to other built-in iOS apps by creating a link with a special URL. Available functionality includes calling a phone number, sending an SMS or iMessage, and opening a YouTube video in its native app if it is installed. For example, to link to a phone number, structure an anchor element in the following format:

For a complete look of these capabilities, see Apple URL Scheme Reference.

Copyright © 2016 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2016-12-12

Источник

How To Setup An Apple Touch Icon For Your Website And Individual Webpages

What are Apple Touch Icons?

Apple uses Apple Touch Icons to represent websites (similar to a favicon) on their iOS.

Apple Touch Icons are used with iPads, iPhones, Safari, and other general Mac systems for applications and websites.

Why is setting up Apple Touch Icons important?

Apple systems are very popular. iPads, iPhones, and Apple Safari (in general) are used by a large mass of internet users and captivating as many website visitors as you can is without question, common sense.

When Mac iOS users bookmark or save a website to their iOS system, by mobile device, etc, the webpage is saved to the home screen as a screenshot of the page, which can be very unflattering.

Setting up an Apple Touch Icon for your website will over-all “boost” the visual optimization of your website for iOS users, which can be very flattering.

How to set up Apple Touch Icons

The are different options to apply an Apple Touch Icon to your website be that for the entire website, single pages, etc. But first you will need to create an icon to use as your Apple Touch Icon (if you do not have one), host the icon image online, and finally insert the code into the “header script” of your website (if needed for separate pages).

This is the basic process to setup the Apple Touch Icon:

1. Design Apple Touch Icon
2. Host Apple Touch Image Online (Create Image URL/Or Host In Root Document Folder)
3. Add Header Script/Link Element To Your Website (For Single Pages/Replace Main Icon)

1. Design The Apple Touch Icon

The design and specifications of your Apple Touch Icon are important. How you design your Apple Touch Icon is up to you. You can do it yourself, purchase an icon from online image stores such as graphicriver.net, or hire a designer.

Below are common concerns and exact specifications about the Apple Touch Icon design.

• What size should the Apple Touch Icon be?

By default your Apple Touch Icon should be at most 144 x 144 pixels.

144 x 144 is the perfect size for iOS with retina displays. Icons will be compressed for other devices such as the iPhone.

Later on we will get into setting up size attributes to use the Apple Touch Icon properly for mobile devices. If the image attribute is not set, by default the icon will be 57 x 57 pixels, which is the bare minimum.

If you plan to use different size images 72 x 72 is used on iPads and 114 x 114 is used on iPhones.

• What image format should the Apple Touch Icon be?

Portable Network Graphics/Png.

• What should the title of the Apple Touch Icon image be?

There are 4 different options to setup the Apple Touch Icon image on your website using image titles.

What separates the default option 1 from option 2 is that option 1 will also add a “gloss” effect to the icon and option 2 will NOT add any effects to the Apple Touch Icon. By default Apple will round corners of the Apple Touch Icon. This rule applies for all options.

Option 1 (Round Corners With Gloss Effect)

Option 2 (Round Corners With NO Effects)

[Normal_Box]apple-touch-icon-precomposed.png[/Normal_Box]
Option 3 is not much of an option. If you wish to implement an icon for seperate pages (ie a custom Apple Touch Icon), the image may be titled anything, and may be hosted anywhere.

Option 4 (For iPads, iPhones, Retinas)

This option is used in conjunction with the 2nd option (multiple icons) under 3. Apple Touch Icon Header Script/Link Elements below.

2. Host The Apple Touch Icon Image Online/Image URL

For the Apple Touch Icon to work correctly, the icon image will need to be hosted online. The image needs to be to be accessed by the image’s URL and you will need to save this URL if you wish to implement the icon for separate pages ,etc.

Hosting the Apple Touch Icon image in the root folder of your website will automatically implement the Apple Touch Icon for every page on your website.

3. Apple Touch Icon Header Script/ Link Elements

There are 2 options to setup the Apple Touch Icon for seperate web pages.

1. To specify an icon for a separate/single webpage or to replace the main website Apple Touch Icon with a webpage-specific icon, add a link element to the webpage. Link Elements are added to the head (header scripts) of a specific page.
[Normal_Box]

Replace /custom_icon.png with your image icon file name/URL.

If you don’t want Safari on iOS to add any effects to the icon, replace “apple-touch-icon” with “apple-touch-icon-precomposed”.

2. To specify multiple icons for different device resolutions such as iPhone and iPad devices. Detail the most appropriate size for the device that is used.
[Normal_Box]

If you don’t want Safari on iOS to add any effects to the icon, replace “apple-touch-icon” with “apple-touch-icon-precomposed”.

Источник