Как определить значок ярлыка экрана веб-сайта?

Ответ 1

Android и iOS, похоже, используют те же ссылки для значков на главном экране.

Для значков ссылок HTML:

<!-- These two are what you want to use by default -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- This one works for anything below iOS 4.2 -->
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="apple-touch-icon-precomposed.png">

Различие между двумя типами состоит в том, что верхние два не имеют пробела. Нижняя часть включает как промежуток между ними. Пространство не распознается iOS 4.2+. Лучше всего использовать все три. Если вы ограничены в пространстве, используйте только два верхних.

Для размеров:

144 × 144 пикселя для дисплея Retina iPad.

114 × 114 пикселей для дисплея Retina iPhone.

57 × 57 пикселей для почти чего-нибудь еще

Остерегайтесь, что iOS 4.2+ просто игнорирует атрибут размера, поэтому вы можете просто связать их с ним. Я бы предложил разместить размер в имени файла значка только для организационных целей.

Еще одна вещь, которая стоит отметить, заключается в том, что вам даже не нужно включать ссылки для значков "apple-touch". Если в html нет значков, iOS будет искать в корневой папке файлы с именами, указанными ниже. Android необходимо, чтобы они были определены, поэтому вставляйте их в код в любом случае.

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

Ответ 2

Android использует изображение на главном экране и значок ярлыка (например, значок). Если вы укажете только значок главного экрана, веб-страница не отобразит значок рядом с URL-адресом в веб-браузере.

Значок "ярлык" должен быть указан отдельно, хотя он может быть одним и тем же файлом.

<link rel="shortcut icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" href="http://yourdomain.com/path/icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="http://yourdomain.com/path/icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="http://yourdomain.com/path/icon114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="http://yourdomain.com/path/icon144.png" />

Относительные URL-адреса будут работать для многих устройств, но большинство источников говорят, что вам нужно использовать абсолютные URL-адреса.

Листинг размеров отдельно позволяет устройству загружать только самое маленькое изображение, которое ему соответствует. Для "shortcut icon" вы не можете перечислить разные размеры, но вы можете использовать ICO файл, который может содержать несколько размеров, закодированных в файле. Многие программы изображений, такие как GIMP, могут сохранять ICO файлы с несколькими размерами.

Обратите внимание, что если вы хотите, чтобы значок ярлыка отображался в IE, он должен быть настоящим файлом ico.

По-видимому, Android версии 2.1 и более ранние распознают только "предварительно сопоставленную" ссылку на изображение, но если вы включите предустановленный значок, каждое устройство, способное "знакомиться" с иконками, пропустит их процесс и просто будет использовать предварительно сопоставленные. Андроиды, которые я тестировал, могут сделать свое собственное притворство, поэтому я не использую предварительно настроенные ссылки на значки. Это будет зависеть от ваших потребностей в совместимости.

<link rel="apple-touch-icon-precomposed" href="http://yourdomain.com/custom_icon.png"/>

Дополнительные сведения об использовании значков на главном экране...

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Ответ 3

Это выглядит как хорошее объяснение.

Казалось бы, если вы разместите:

<link rel="apple-touch-icon" href="/path/to/some.png"/>
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

В HTML-закладке HTML будет отображаться на рабочем столе автоматически.

Ответ 4

Эта страница Android и iPhone предлагает абсолютные URL для Android.

Так что просто измените теги KenY-N на

<link rel="apple-touch-icon" href="#" onclick="location.href='http://yourdomain.com/path/to/some.png'; return false;"/>
<link rel="apple-touch-icon-precomposed" href="#" onclick="location.href='http://yourdomain.com/custom_icon.png'; return false;"/>