Перейти к содержимому

MOAB

* * * * - 1 Голосов

apple-touch-icon.png - Что это и как указать.

link rel apple

  • Войдите, чтобы ответить
Сообщений в теме: 4

#1 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 2 912 сообщений
1 509
  • ИзСанкт-Петербурга

Отправлено 21 Март 2018 - 13:51

Сегодня при анализе сайта увидел в рекомендации создать и указать иконку apple-touch-icon.png. Как я понял, это иконка нужна для apple. Её нужно сделать и положить в корень сайта.
1) Какого размера нужно делать? Или какой список размеров?
2) Нужно ли что-нибудь прописывать в html и как именно?

В сети нашел следующий код
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

#2 Матумба

Матумба

    во имя матана

  • Участник
  • PipPipPipPipPip
  • 4 886 сообщений
6 071
  • ИзКрии

Отправлено 21 Март 2018 - 21:24

Размеры указаны в атрибуте sizes же.
Там ещё актуально для всяких виндовсов с андроидами:
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-navbutton-color" content="#ffffff">
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">
Ах какое блаженство
Знать что я совершенство,
Знать что я – идеал.

#3 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 383 сообщений
1 990
  • ИзРоссии :(

Отправлено 22 Март 2018 - 01:32

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Вот такого одной строчки теперь достаточно, остальное устарело для яблогрызов. Андоид тоже ее хавает.

Просмотр сообщенияДартаньян сказал:

<meta name="theme-color" content="#ffffff">
<meta name="msapplication-navbutton-color" content="#ffffff">
<meta name="apple-mobile-web-app-status-bar-style" content="#ffffff">

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



Еще можно с этим подурачиться. Некоторое так же в лог срут 404
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#969696">
<meta name="msapplication-TileColor" content="#2d89ef">
В файле site.webmanifest для адроидов. Содержимое:

{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffff01",
"background_color": "#ffff01",
"display": "standalone"
}





А еще сранные IE от 11 и edge запрашивают вот такой файл "browserconfig.xml" и в лог 404 если нету
в нем чета типа такого:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#2d89ef</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт

#4 protector

protector

    Почетный

  • Основатель
  • PipPipPipPipPip
  • 2 912 сообщений
1 509
  • ИзСанкт-Петербурга

TC Отправлено 22 Март 2018 - 14:42

Просмотр сообщенияValek (22 Март 2018 - 01:32) писал:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Вот такого одной строчки теперь достаточно, остальное устарело для яблогрызов. Андоид тоже ее хавает.
А где можно прочесть, что теперь достаточно одной строчки. В инете пишут, что нужно много строк.

Пока я собрал такой полный список:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icon/apple-touch-icon-180x180.png">

<link rel="icon" sizes="16x16" type="image/png" href="/icon/favicon-16x16.png">
<link rel="icon" sizes="32x32" type="image/png" href="/icon/favicon-32x32.png">
<link rel="icon" sizes="96x96" type="image/png" href="/icon/favicon-96x96.png">
<link rel="icon" sizes="128x128" type="image/png" href="/icon/favicon-128х128.png">
<link rel="icon" sizes="192x192" type="image/png" href="/icon/favicon-192x192.png">

//для отображения картинки в соцсетях.
<link rel="image_src" href='/icon/socseti.png'>


#5 Valek

Valek

    ВСтатусе

  • Активный участник
  • PipPipPipPip
  • 1 383 сообщений
1 990
  • ИзРоссии :(

Отправлено 22 Март 2018 - 15:03

Просмотр сообщенияprotector сказал:

А где можно прочесть, что теперь достаточно одной строчки
на официальном dev огрызка
https://developer.ap...plications.html
Отличный хостинг низкие цены, высокое качество и SSL Ссылка на сайт



Похожие темы



Количество пользователей, читающих эту тему: 1

0 пользователей, 0 гостей, 0 анонимных


    Google


© 2018 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва

Мы в соцсетях: twitter | вконтакте | facebook | livejournal