Favicon - это не только лишь favicon.ico
Если кого смутило сокращение ico на конце - это сокращение от слова icon. Кого не смутило - читаем далее:)
С незапамятных времён и по наше время в корне каждого сайта есть файл с именем favicon.ico. Смысл его существования - отображаться во вкладке браузера, закладках, превьюшках и, возможно, в каких-то других местах.
Сейчас одного такого файла недостаточно, причем у разных устройств различные требования. Я рассмотрю только устройства на ОС iOS.
Например, в браузере Safari favicon отображается только в закладках, во вкладках он не виден. Так же работает и Mac OS.
Если кто ещё не знал - в айфоне можно добавить любую закладку прямо на экран и она будет выглядеть как нативное приложение.
Помню как-то у приложения "Одноклассники" были проблемы и их техподдержка прям так и советовала - сделайте закладку на экране. Типа вам будет удобно. Для домохозяек совет в общем-то, для которых нет разницы между приложением и веб-сайтом.
Чтобы такая закладка выглядела красиво и имела значок приложения - нужно создать несколько PNG файлов с логотипом.
Размеры их таковы:
- 57х57
- 60х60
- 72х72
- 76х76
- 114х114
- 120х120
- 144х144
- 152х152
- 180х180
Зачем так много и все ли они обязательны?
Можете сделать только 180х180, он сожмётся. Но лучше конечно сделать все, чтобы устройство не сжало изображение как-то "некрасиво".
Если нужного разрешения нет - будет выбрано ближайшее.
Где какие размеры используются
| Устройство | Экран | Версия iOS | Размер иконки |
|---|---|---|---|
| iPhone | Classic | 6 и ниже | 57x57 |
| iPhone | Classic | 7 | 60x60 |
| iPhone | Retina | 6 и ниже | 114x114 |
| iPhone | Retina | 7 | 120x120 |
| iPhone | 6 Plus | 8 и выше | 180x180 |
| iPad | Classic | 6 и ниже | 72x72 |
| iPad | Classic | 7 | 76x76 |
| iPad | Retina | 6 и ниже | 144x144 |
| iPad | Retina | 7 | 152x152 |
Чтобы все эти файлы "подхватились" - нужно описать их в тэгах link так:
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
Делается в шапке сайта, в тэге head
После этого закладка будет корректно отображаться на экране устройства.
Давайте попробуем провернуть это на примере сайтов https://golos.io, https://oneplace.media, https://goldvoice.club, https://steemit.com и https://habrahabr.ru
Для этого открываем сайт в safari, жмём кнопку "поделиться" и выбираем "На экран Домой"
Выглядят эти иконки так:
Как видите - иконки для apple в порядке только у хабра.
@oneplace и @on1x желательно пофиксить этот маленький недочёт.
Да, текст под иконкой тоже желательно заранее прописать в тэге
<meta content='Golos blockchain client' name='apple-mobile-web-app-title'>