Иконка сайта

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

Вы наверняка замечали, юзая веб-браузеры на платформах iOS 1.1.3 + или Android 2.1 +, при добавлении закладки на "рабочий стол" мобильного телефона у некоторых сайтов стоит своя иконка.
Например: http://inoy.org/apple-touch-icon.png Иной.орг

А теперь представьте себе: чтобы сделать на своем сайте такую иконку, вам не придётся редактировать каждую страницу и править HTML-код. Всё гораздо проще...


1. В корневом каталоге сайта должен находиться файл с иконкой под названием
"apple-touch-icon-precomposed.png" - необходимо полностью контролировать отображение иконки
или
"apple-touch-icon.png" - в iOS к иконке будут применены свои эффекты наподобие "стеклянности", можно отключить обработку добавив постфикс "-precomposed"

2 . Этот файл должен иметь формат png, размеры 57 на 57 пикселей.

3. Веб-сервер должен быть настроен на обработку файлов с расширением .png
Если нет, то добавьте в MIME-type: image/png .png в файл .htaccess строку: AddType image/png .png

Разрешение экранов в "яблочных" девайсах постоянно растет, поэтому следует оптимизировать нашу иконку под все поколения iPhone, iPad, iPod.
Далее приведены размеры в px и описание девайсов, на которых используется:
114 x 114 — iPhone, iPod touch высокого разрешения
144 x 144 — iPad высокого разрешения
57 x 57 — iPhone, iPod touch
72 x 72 — iPad

Также можно включить в страницу вот такой тэг:

<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"/>

<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"/>

<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"/>

<link rel="apple-touch-icon" href="apple-touch-icon-57x57-precomposed.png"/>

Необходимо отметить наличие атрибута sizes, который указывает размер иконки. По умолчанию принимает значение 57×57.

При этом браузер сначало запросит адрес, указанный в этом тэге, а лишь потом файл из корня с префиксом apple-touch-icon- в следующем порядке, для 57x57:

Корневой каталог - это, папка / сайта, где файл главной страницы /index.php

На iOS можно указать стартовое изображение, которое отображается во время запуска вашего веб-приложения. Это особенно полезно, когда ваше веб-приложение в автономном режиме. По умолчанию, скриншот последнего запуска веб-приложения. Для установки другого изображения заставки, добавьте ссылку веб-страницы, например:

<link rel="apple-touch-startup-image" href="/startup.png"/>

В приведенном выше примере, замените startup.png с загрузочного файла экрана. На iPhone и IPod Touch, изображение должно быть 320 х 460 пикселей и в портретной ориентации.