Angerfist | Среда, 25 Мая 2016, 12:55 | Сообщение 1 |
| Если Ваш сайт достаточно популярен, то многие пользователи заходят на него с телефонов и планшетов.
При этом многие добавляют его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:
Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.
Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти "картинки" под разные устройства.
Второе, необходимо сделать иконки разных размеров для разных устройств:
для старых iPhone размер иконки должен быть 57х57, для новых, начиная с 4-го действуют следующие размеры:
60х60 - IPhone 76x76 -iPad 120x120 - iphone-retina 152x152 - ipad-retina
Третье, вставить в код указав пути к картинкам:
Код <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся - нужно к именам файлам добавить -precomposed.png
Android:
Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова "apple"
ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на "рабочий стол".
В заключении - если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием "apple-touch-icon.png". Это самый простейший способ.
Для быстрого автоматического создания иконок для сайта можно использовать сервис ICONOGEN, укажите файл с иконкой и сервис быстро сделает иконки разных размеров:
Файлы можно скачать архивом, сервис так же генерирует html код для вставки в шаблон сайта
Ну а теперь более подробнее:
Начнём с иконок для ОС Android, нужно указать в заголовке инструкции:
Код <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
Таким образом мы объявляем четыре иконки разных размеров для разных случаев и разных разрешений экрана. В добавление к этому, если хотите, чтобы ваш сайт можно было вынести на главный экран и у него также была красивая иконка, то придётся ещё определить файл-манифест:
Код <link rel="manifest" href="/manifest.json">
Примерное содержимое этого файла:
Код { "name": "Название сайта или короткое описание под иконкой", "icons": [ { "src": "\/android-chrome-36x36.png", "sizes": "36x36", "type": "image\/png", "density": "0.75" }, { "src": "\/android-chrome-48x48.png", "sizes": "48x48", "type": "image\/png", "density": "1.0" }, { "src": "\/android-chrome-72x72.png", "sizes": "72x72", "type": "image\/png", "density": "1.5" }, { "src": "\/android-chrome-96x96.png", "sizes": "96x96", "type": "image\/png", "density": "2.0" }, { "src": "\/android-chrome-144x144.png", "sizes": "144x144", "type": "image\/png", "density": "3.0" }, { "src": "\/android-chrome-192x192.png", "sizes": "192x192", "type": "image\/png", "density": "4.0" } ] }
Перейдём ко второй операционной системе — iOS — с её браузером Safari. Нужно ведь и для неё добавить необходимые инструкции.
Код <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">
Все детали можно посмотреть, например, в документации к Google Chrome
Иконки для Windows Phone:
Код <meta name="msapplication-TileColor" content="#474747"> <meta name="msapplication-TileImage" content="/mstile-144x144.png?v=NmYO8WoKWA">
Для более тонкой настройки нужно добавить файл browserconfig.xml.
Код <?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#474747</TileColor> </tile> </msapplication> </browserconfig>
И указать ссылку на этот файл:
Код <meta name="msapplication-config" content="/browserconfig.xml" />
Посмотреть подробнее на MSDN
Ну и напоследок: в версии Android Lollipop появилась возможность перекрашивать интерфейс браузера в цвета сайта, для этого нужно добавить в заголовок страницы ещё один метатег.
Код <meta name="theme-color" content="#474747">
Когда будете делать сайт, не пренебрегайте этой возможностью, так как это сделает сайт чуточку лучше. И ещё одна ссылка realfavicongenerator - ресурс позволяет значительно упростить работу со всеми этими иконками.
No regrets
| [ RU ] |
| |
Kosten | Среда, 25 Мая 2016, 12:59 | Сообщение 2 |
| Круто сделано, а вот интересно на какие темы основном заходят с мобильных или смартфона, наверно это социальные сети, как вк.
| [ RU ] |
| |
Сафрон | Среда, 25 Мая 2016, 22:24 | Сообщение 3 |
| Так то здорово сделано, что будет кнопка сайта, просто кликнул и зашел, а не набирать или подключать браузер, все автоматически сработает.
| [ RU ] |
| |