Как мне дать своим сайтам иконку для iPhone?

Как установить значок, который будет отображаться правильно на iPhone созданных мной веб-сайтах?

Ответов (5)

Решение

См. Раздел « Указание значка веб-страницы для веб-клипа » на странице Настройка веб-приложений» Руководства по веб-содержимому Safari в Справочной библиотеке Safari .

Указание значка веб-страницы для веб-клипа

Вы можете захотеть, чтобы пользователи могли добавлять ваше веб-приложение или ссылку на веб-страницу на главный экран. Эти ссылки, обозначенные значком, называются веб-подборками. Выполните следующие простые шаги, чтобы указать значок для представления вашего веб-приложения или веб-страницы на iOS.

  • Чтобы указать значок для всего веб-сайта (каждой страницы на веб-сайте), поместите файл значка в формате PNG в корневую папку документа с именем apple-touch-icon.png.

  • Чтобы указать значок для отдельной веб-страницы или заменить значок веб-сайта на значок для конкретной веб-страницы, добавьте элемент ссылки на веб-страницу, как в следующем
    <link rel="apple-touch-icon" href="/custom_icon.png"/>
    примере : В приведенном выше примере замените custom_icon.pngимя файла значка.


Примечание. Safari в iOS 7 не добавляет эффекты к значкам. Более старые версии Safari не будут добавлять эффекты для файлов значков с -precomposed.pngсуффиксом. См. Подробности в разделе «Первые шаги: определение вашего приложения в iTunes Connect».

На странице Apple Developer Connection Safari Web Content Guide для iPhone Указание значка веб-страницы для веб-клипа ...

Пользователь может добавить веб-приложение или ссылку на веб-страницу на главный экран. Эти ссылки, обозначенные значком, называются веб-подборками. Выполните следующие простые шаги, чтобы указать значок для представления вашего веб-приложения или веб-страницы на iPhone.

Чтобы указать значок для всего веб-сайта (каждой страницы на веб-сайте), поместите файл значка в формате PNG в корневую папку документа с именем apple-touch-icon.png.

Чтобы указать значок для отдельной веб-страницы или заменить значок веб-сайта на значок для конкретной веб-страницы, добавьте элемент ссылки на веб-страницу, как показано ниже:

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

В приведенном выше примере замените custom_icon.png своим именем файла значка.

См. Раздел «Создание значка для веб-приложения или веб-страницы» в Рекомендациях по пользовательскому интерфейсу iPhone в Рекомендациях по пользовательскому интерфейсу iPhone для получения информации о показателях значков веб-страниц.

Примечание. Функция веб-клипа доступна в iPhone 1.1.3 и более поздних версиях.

Добавьте это в свой заголовок: <link rel="icon" href="/your-icon-url"/>

Я использую RealFaviconGenerator для создания значков и кода для многих браузеров и платформ.

И для полноты, ссылка на публикацию Скотта Хансельмана, которая также содержит несколько дополнительных советов:

Добавьте значки iPhone на главный экран и настройте ViewPort