Как добавить иконки на сайт iPhone, iPad и iPod Touch

Favicon.ico - Значок веб-сайта в браузере

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

Stealth Settings Favicon
Stealth Settings Фавикон в Сафари
Favicon в Opera
Favicon в Opera

До недавнего времени этот файл должен был иметь форму "favicon.ico", Для идентификации в веб-браузере. Chrome, Интернет Explorer, Opera, Safari, Firefox и др.
В течение нескольких лет, с продвижения новых веб-языков, HTML5 si CSS3, Favicons может быть .png файл или . Jpg, Условием является то, что заголовок сайта, перед, Будь эта строка:

Значок веб-сайта для iOS - iPhone, iPad и iPod Touch

In iOS мы можем добавить ярлыков веб-страниц pe Главный экранКТК iPhone, IPad si Ipod Touch.

Как добавить ярлык на сайт на iPhone, главный экран iPad и iPod

Мы делаем это, открывая веб-страницу на iPhone (Safari, Chrome, интернет-браузер и т. Д.), Щелкните квадрат со стрелкой (знак «поделиться» в iOS), затем выберите параметрAdd на главный экран».

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

Как добавить веб-иконки для iPhone, iPad и Android.

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

Разрешения и стандартные размеры значков для iPhone, iPad, iPod и Android

  • Классические модели iPhone / iPod = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • iPad Retina = 152 × 152
  • iPhone 6 / 6S плюс = 180 × 180

Apple регулярно обновляется Рекомендуемый размер значкаURL-адреса приложений si веб-страницы pe На этой странице.

Для устройств Android, значки два аспекта:

  • Android classic = 128 × 128
  • Android с высоким разрешением (hi-res) = 192 × 192
иконки

После того, как мы создали изображения, они загружаются на веб-сервер и в исходный HTML-код веб-сайта перед закрытием. , добавляются следующие строки:

<link href=”/apple-touch-icon.png ”rel =”apple-touch-icon »/> <link href=”/apple-touch-icon-76 × 76.png ”rel =”apple-touch-icon ”sizes =” 76 × 76 ″ /> <link href=”/apple-touch-icon-120 × 120.png ”rel =”apple-touch-icon ”sizes =” 120 × 120 ″ /> <link href=”/apple-touch-icon-152 × 152.png ”rel =”apple-touch-icon ”sizes =” 152 × 152 ″ /> <link href=”/apple-touch-icon-180 × 180.png ”rel =”apple-touch-icon ”sizes =” 180 × 180 ″ />

Для устройств Apple, Имя изображения .PNG и "rel =" должны содержать префикс "apple- ". Для Android имена файлов будут "значок hires.png"А"значок normal.png«С rel =» icon ».

Не обязательно создавать изображения для каждого разрешения. Вы можете сделать изображение с самым высоким разрешением, и устройства с более низким разрешением идентифицируют его и устанавливают в виде значка.

iPhone-Веб-сайт-Иконка

Значок ярлыка на веб-сайт будет похож на любой приложения для прошивкой.

Stealth

Увлечен технологиями, мне нравится тестировать и писать руководства по операционным системам. macOS, Linux, Windowsо WordPress, WooCommerce и настроить веб-серверы LEMP (Linux, NGINX, MySQL и PHP). я пишу на StealthSettings.com с 2006 года, а несколько лет спустя я начал писать на iHowTo.Tips обучающие программы и новости об устройствах в экосистеме. Apple: iPhone, айпад, Apple Часы, HomePod, iMac, MacBook, AirPods и аксессуары.

Оставьте комментарий

Ваш электронный адрес не будет опубликован.

Статьи по теме

/ / / / / / / / /
Теги: / / / / / / / / / / / / / / / /
Вернуться к началу кнопки