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

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

Я также нашел информацию apple-touch-icon в Руководство по веб-контенту Safari, а также метатег apple-mobile-web-app-capable для полноэкранного режима.

Kevin Hakanson 25.03.2010 03:59

возможный дубликат Какого размера должно быть apple-touch-icon.png для iPad и iPhone 4?

Blazemonger 22.10.2013 18:52
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
30
2
8 063
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Из Руководства по веб-содержимому Safari для подключения к разработчикам Apple для iPhone, страница Указание значка веб-страницы для веб-клипа ...

The user can add a 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 iPhone.

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:

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

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

See "Create an Icon for Your Web Application or Webpage" in iPhone Human Interface Guidelines in iPhone Human Interface Guidelines for webpage icon metrics.

Note: The web clip feature is available in iPhone 1.1.3 and later.

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

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

Ответ принят как подходящий

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

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:
    <link rel = "apple-touch-icon" href = "/custom_icon.png"/>
    In the above example, replace custom_icon.png with your icon filename.


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.

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

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

Другие вопросы по теме