Отображение иконки сайта на IPhone

32012-02-154225Денис Абдуллин

На «яблочных» устройствах своя специфика, это Вы и сами понимаете. Тут же есть и такая особенность: можно поставить специальную иконку для своего сайта. У владельца девайса в закладках будет отображаться именно иконка, указанная с помощью специального кода. Код представлен в виде META-тега, вставляется так же, как и подобные теги. Насколько я знаю, планшет Android не будет поддерживать эту иконку, т.е. представленным кодом иконка сайта не будет распознана.

Как должна выглядеть иконка?

Иконка должна иметь размер 57x57 пикселей, в противном случае IPhone сам масштабирует значок сайта. Самое главное – формат значка должен быть именно PNG. Все углы делайте по 90 градусов, прямые углы, т.е. самостоятельно что-либо округлять не нужно, девайс сделает это самостоятельно. И еще не используйте прозрачность. Блик будет наложен автоматически, но Вы можете убрать эффект, использовав вариант кода без блика.

Код (Между <head> и </head>)

Код без блика (Между <head> и </head>)

Валидаторы (инструменты проверки кода) ругают этот код, считая его лишним, и даже не существующим. Поэтому можно просто загрузить в корень сайта файл иконки «apple-touch-icon.png». Обратите внимание, название должно быть точно такое. Apple IPhone или IPad автоматически найдут иконку. Адрес должен быть такого вида: «http://ваш_сайт/apple-touch-icon.png».

Ниже Вы можете видеть пример иконки.

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!