Совет ниндзя: как создать собственный значок домашнего экрана iPhone / iPad для вашего веб-сайта

Хотите создать один из тех пользовательских значков веб-сайтов, которые будут отображаться на вашем iPhone, iPod touch или iPad, когда вы нажимаете «Добавить на главный экран»? Классный значок заставит посетителей добавить веб-клип вашего сайта на свои главные экраны. Они покажут его своим друзьям, их друзья также добавят веб-клипы вашего сайта, и ваш сайт повысит рейтинг страницы Google. (Эй, каждый кусочек помогает!). Благодаря SockRolid с форумов мы покажем, как это сделать после перерыва!

На самом деле это довольно просто, хотя благодаря тому, что Apple добавила iPad, а теперь и разрешения Retina Display в линейку в этом году, вы должны учитывать больший размер:

  • Сначала создайте относительно небольшой квадратный файл PNG. 120×120 – это то, что вам нужно, если вы хотите, чтобы изображение хорошо смотрелось на iPad и было четким на iPhone 4.
  • Не беспокойтесь о скруглении углов, Apple сделает это автоматически и даже добавит «блестящую» обработку.

Так выглядит значок TiPb WebClip:

  • После того, как вы создали идеальный значок, назовите его «apple-touch-icon.png».
  • Теперь загрузите его в корневой каталог вашего сайта (обычно через FTP). Например, http://www.yoursite.com/apple-touch-icon.png

Вот и все, готово. Что может быть проще?

Теперь, когда посетители просматривают ваш сайт на iPhone, iPod touch или iPad, они могут просто нажать кнопку «действие» (в iOS 4.2, кнопку «+» или более ранние версии iOS) и нажать «Добавить на главный экран» . Это создаст WebClip вместе с их приложениями. Они получают мгновенный доступ к вашему сайту в одно касание, и ваш сайт получает больше трафика. Никогда не недооценивайте силу простоты. Особенно, когда он еще прохладный и блестящий.

Бонусный совет: если вы не создадите собственный значок для своего сайта, Apple создаст его для вас на основе крошечного снимка экрана любой случайной страницы с любым случайным уровнем масштабирования, на котором случайно оказался ваш посетитель, когда он нажал на главный экран “. Изображение может быть не всем, но, как мы все знаем, это чрезвычайно важно. Не оставляйте это на волю случая. Управляйте имиджем вашего сайта.

ОБНОВИТЬ: Марк Эдвардс был достаточно хорош, чтобы указать нам на статью Джесси Додда из Монитор кампании о том, как вывести веб-иконки на новый уровень.

Я собрал три простых фрагмента кода, которые нацелены на каждое отдельное устройство iOS в соответствии с плотностью пикселей. 163dpi для iPhone 3G / 3GS и iPod Touch, 132dpi для iPad и колоссальные 326dpi для iPhone4.

Если вы заметили, что в приведенном выше коде я использовал apple-touch-icon-precomposed. Добавление -precomposed останавливает iOS от автоматического рендеринга блеска на моем значке и закругления его углов. Если вы хотите, чтобы iOS автоматически применяла блеск и закругленные углы (чтобы вы могли предоставить плоское квадратное изображение), просто используйте rel = «apple-touch-icon».

Так ты заставил это работать? Если у вас есть вопросы, дайте нам знать в комментариях. Если на вашем сайте появился новый отличный значок, напишите нам и ссылку, чтобы мы могли его проверить!

Советы дня будут варьироваться от 101 уровня новичка до ниндзя продвинутого уровня. Если вы уже знаете этот совет, держите ссылку под рукой, чтобы быстро помочь другу. Если у вас есть собственный совет, который вы хотели бы предложить, добавьте его в комментарии или отправьте по адресу dailytips@tipb.com. (Если это особенно круто и раньше нам было неизвестно, мы даже дадим вам награду…)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *