Default apple touch icons

Мета-теги 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

Источник

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.

Источник

Favicons, Touch Icons, Tile Icons и т. д. Что выбрать?

От переводчика.
Это перевод статьи Филипа Бернарда с сайта css-tricks.com. Часть статьи, содержащую описание работы с созданным им сервисом, я позволил себе опустить. Если вы найдете ошибки, просьба сообщить о них в личном сообщении.

Статья содержит результаты проведенного им исследования, каким должен быть фавикон (и то что его заменяет), чтобы хорошо отображаться в различных случаях.

Фавикон был представлен в 1999 году, в Internet Explorer 5 (источник) и стандартизирован W3C несколько месяцев спустя. Это была маленькая иконка, представляющая сайт.

С тех пор большинство настольных браузеров следуют тенденции и используют фавикон тем или иным способом. Это очень просто, не так ли? Создать маленькую картинку и добавить в любой интернет-проект, чтобы сделать его «завершённым». Ничего сложного. Или нет?

Каков основной файл фавикона?

Ответ: favicon.ico. Просто, чтобы удостовериться: это не PNG, переименованный в favicon.ico. Хотя, некоторые браузеры простят эту ошибку, ICO это другой формат, поддерживающий несколько версий изображения.

Вопрос: Какого размера должен быть favicon.ico?

A: 16х16. Стандартный.
B: 32х32. Разве фавикон не обновлялся некоторое время назад?
C: 64×64. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
D: Ни один из перечисленных.

Формат favicon.ico изначально задуман Майкрософт и поддержан некоторыми другими производителями. Майкрософт рекомендует размеры 16х16, 32х32 и 48х48. Да, один ICO может содержать несколько изображений.

Браузеры обычно отображают фавикон на вкладках, и на обычных разрешениях, версия 16х16 выглядит хорошо:

16х16 на вкладке Chrome. Пока всё хорошо.

Но иконка 16х16 слишком мала для других мест: панели задач и рабочего стола.

16х16 в панели задач.

16х16 на рабочем столе. Не хорошо.

Когда иконка содержит несколько изображений, результат гораздо лучше.

16х16, 32х32 и 48х48 favicon.ico в панели задач. Выглядит как обычная программа.

16х16, 32х32 и 48х48 favicon.ico на рабочем столе. Идеально.

Вопрос: Каково назначение favicon.png?

На самом деле, чаще встречается другой файл, favicon.png. Люди часто спрашивают об этом.
Что это на самом деле?

A: Иконка для браузеров не поддерживающих favicon.ico. Такие как Firefox, наверно?
B: Иконка высокого разрешения. Знаете, со всеми этими новыми экранами с высокой плотностью пикселей.
C: Артефакт из прошлого. Теперь это новые иконки, например, Apple Touch icon.
D: Всё вместе.

Ответ: D.
Начиная с принятия HTML5, favicon.ico не слишком полезен. Был представлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

Так что мы должны объявлять?

Давайте посмотрим правде в глаза. Хотя, почти все настольные браузеры поддерживают favicon.ico, этот файл устарел. Да, вы по-прежнему можете использовать этот файл и всё будет работать, как задумано. Но серьёзно, это устаревший формат. Он не используется нигде, кроме веба. PNG поддерживается гораздо лучше.

favicon.ico — для старых версий IE. Для остальных браузеров и последних версий IE используйте PNG иконки. Так какие sizes необходимо определять? Скоро узнаем.

Вопрос: Какой формат необходим для поддержки мобильных платформ?

Согласно SmartInsights, больше 26% веб-трафика генерируется смартфонами и планшетами. Это будущее. Что нужно для поддержки этого мира?

A: favicon.ico. Это работало 15 лет назад, работает и сегодня.
B: PNG иконки. Вы сказали, что расскажете об этом.
C: Apple Touch icon. Кэп.
D: Здесь, всё равно, нет правильного ответа.

Ответ: D. Нужны PNG иконки. И Apple Touch icon. И плитки для Windows 8. И файл под названием browserconfig.xml.

Мобильные платформы гораздо более гетерогенны, чем обычные настольные браузеры. Размеры экранов и разрешения очень сильно варьируются и нет преобладающей операционной системы, такой как Windows, как это было во времена появления интернета.
Следствие: не думайте, что мобильный фавикон может быть одной универсальной картинкой или иметь универсальное объявление в HTML коде.

Вопрос: Какого размера должны быть PNG иконки?

A: 96х96 для Google TV
B: 196х196 для Android Chrome
C: 228х228 для Opera Coast
D: Все перечисленные

Ответ: D, и даже более. Например, 160х160 для старой версии быстрого набора Opera (давно в прошлом), или 128х128 для Chrome Web Store, всё сильно зависит от платформы, которую вы собираетесь поддерживать.

Вопрос: Каков размер Apple Touch icon?

Apple Touch icon используемые iOS для закладок и сайтов «на домашнем экране». На ум приходит 57х57, браво. Это правильно. Только это было 7 лет назад, когда был выпущен первый iPhone.

Ответ: Вплоть до 180х180.

После появления первого iPhone, было 3 важных релиза:

• iPad. С экраном гораздо большего размера.
• Retina-экраны. С удвоеной плотностью пикселов.
• iOS7. Плоский дизайн отличается на iPhone/iPad.

Всего есть 9 комбинаций.

Устройство	Экран	Версия iOS	Размер иконки
iPhone	Classic	6 и ниже	57×57
		7	60×60
	Retina	6 и ниже	114×114
		7	120×120
	6 Plus	8 и выше	180×180
iPad	Classic	6 и ниже	72×72
		7	76×76
	Retina	6 и ниже	144×144
		7	152×152

Старая 57х57 Apple Touch icon на блестящем Retina iPad. Мутно.

Большая 152х152 Apple Touch icon на Retina iPad. Аккуратно.

Если вы ответили неверно, не расстраивайтесь. Из 5000 популярных сайтов, которые предоставляют apple-touch-icon.png, менее 4% делают это правильно.

Некоторый могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch icon должна быть 152х152. Retina iPad под iOS 7 найдет что нужно, а младшие устройства могут уменьшить изображение.

Вопрос: Необходимо ли объявлять Apple Touch icon в HTML?

A: Не знаю. Надо же что-то ответить!
B: Да. Иначе как iOS найдет их?
C: Нет. Apple предлагает рекомендации, так что любое iOS устройство всё равно их надет.
D: Нет, но.

Ответ: D… но некоторые другие платформы тоже используют Apple Touch icon, лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну их.

Вопрос: Как объявить плитку для планшетов на Windows 8?

A: Планшет на Windows 8? Что это такое?
B: favicon.ico. Наследие Стива Балмера.
C: Мета-теги. Два msapplication-TileColor и msapplication-TileImage.
D: browserconfig.xml.

Ответ: C для Windows 8 и IE 10, D для Windows 8.1 и IE 11. Ответ A в чем-то тоже верен.

Объявление для Windows 8.0 выглядит как-то так:

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

Плитки сайтов в Windows 8.

Вопрос: Каков размер плитки square150x150logo?

A: 150х150. Вы не умеете читать?
B: Иной.

Ответ: B, 270х270. Майкрософт рекомендует больший размер, в целях поддержки экранов с высокой плотностью пикселов.

Поздравляем, вы закончили викторину! Как вы это сделали?

Источник