Спрингборд iPod с иконкой WebClip

Устройства работающие на iOS (iPod, iPhone, iPad) становятся все популярнее. Мы научились с вами верстать под iPhone, а сегодня научимся делать иконку для закладки (WebClip) с браузера Safari, входящего в комплект iOS.

Зачем? Ответ прост, ведь с каждым днем растет пользование интернета с портативных устройств. Люди просматривают все больше сайтов и добавляют их в закладки. А имя красивую иконку на спрингборде, мы не только будем радовать владельца но и чаще попадаться ему на глаза.

Создаем иконку в графическом редакторе

Создать WebClip очень просто. Откроем любой графический редактор и нарисуем там иконку размером 57 на 57 пикселей. Иконку можно рисовать и с прозрачным фоном. Например, можно изобразить просто ваш значок по середине и все.

Теперь сохраним ее в формате png и назовем apple-touch-icon.png

После этого надо загрузить ее в корень сайта.

Эту иконку я делал для сайта makecode, поэтому найти ее можно по URL http://makecode.ru/apple-touch-icon.png.

Теперь добавим meta-тэг в секцию head:

<link rel="apple-touch-icon" href="http://makecode.ru/apple-touch-icon.png"/>

Теперь готово. Давайте теперь посмотрим что будет происходить при добавлении веб-закладки на iOS:

Для начала откроем наш сайт.

Сайт MakeCode открытый в Safari на iOS (iPod)

Потом нажмем на среднюю кнопку в самом низу, появится меню. Выбираем "Добавить в Домой".

Меню: Выбираем "Добавить в Домой"

Теперь назовем закладку (по-умолчанию берется заголовок сайта).

Дадим имя нашей закладке

Все. Теперь можно нажать кнопку "Добавить" и мы увидим свою закладку на спрингборде (самый первый скриншот).

Вот и все! Не забудьте этот сайт добавить себе на спрингборд :)!

P.S.: Для iPhone 4/iPod 4 размер иконки должен быть 114 на 114 пикселей, для iPad - 72 на 72 пикселей.

(3 votes, average: 5,00 из 5)

 Loading ...