Маленьким символом вашего сайта)
Несмотря на свои размеры 16х16 пикселей, иконка в значительной степени влияет на имидж вашего веб-сайта. Множество сайтов уже воспользовались такой возможностью. Маленькие favicon отображаются не только в строке браузере, но и в перечне папок избранное и в результатах выдачи поисковой системы, зрительно выделяя эти сайты.
Посмотрите, эти значки там находятся слева от названия) на фоне обыденных иконок, устанавливаемых браузером по умолчанию. Такая «персонализация» на порядок увеличивает вашу конкурентоспособность в стремлении захватить внимание будущего клиента.
Выдача поисковой системы Яндекс сайты с иконками и без
Согласитесь, с иконкой сайт более заметный. По некоторым данным приток посетителей после создания иконки увеличивается на 15-20%
А так выглядит сайт с favicon в строке браузеров.
Сайт в строке браузера без favicon
Сайт в строке браузеров с favicon
Согласитесь, что с иконкой лучше. Ваш сайт выделяется среди других, а значит больше клиентов и больше прибыли. Favicon маленький но очень важный элемент инициализации.
В iOS (Safari) и дефолтном браузере Android имеется полезная функциия сохранения закладок на сайты и веб-приложения на рабочем столе, аналогично иконкам для обычных приложений. Для таких типов закладок можно разместить иконку, положив в корень сайта PNG файл размером 57х57 px с названием apple-touch-icon.png. Также можно указать иконку для отдельной страницы или раздела сайта, используя тег link со значением apple-touch-icon в аттрибуте rel и ссылкой на соответствующий файл.
С появлением iPhone 4/4s и iPad, требование к этой иконке изменились – теперь она должна быть размером 114×114 для iPhone или 72×72 для iPad. Размер этой иконки может быть и больше, мобильный сафари самостоятельно сожмет ее до нужного размера, скруглит углы, добавит небольшую тень и блик к иконке. Выглядит это как-то так:
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/h/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/m/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" href="images/l/apple-touch-icon-precomposed.png">
Полупрозрачные иконки, тоже поддерживаются, но прозрачные области будут залиты черным цветом:
При желании от блика можно отказаться, прописав вместо apple-touch-icon значение apple-touch-icon-precomposed.
Многие рекомендуют всегда использовать precomposed-иконки, чтобы всегда держать под своим контролем их дизайн.
Тем не менее, даже если вы решили использовать только apple-touch-icon-precomposed.png, есть смысл также оставить запись и с apple-touch-icon.png для максимальной совместимости — к примеру iOS 1 и BlackBerry OS6 не поддерживают precomposed.
Если подразумевается, что ваш сайт будет рассчитан только на работу с мобильными девайсами от Apple, то можно вообще отказаться от ссылок на иконки в HTML коде. Достаточно создать версии изображения в нужных размерах, задать им правильные названия и положить в корень проекта. Небольшая документация по этому поводу
Android в свое время тоже научился распознавать эти иконки и использовать аналогично iOS устройствам — заявлена поддержка версий 2.1+. (Примечание: Android 2.1 поддерживает только precomposed иконки) — прув
<link rel="shortcut icon" href="images/l/apple-touch-icon.png">
Позволяет задать иконку для некоторых других устройств, например некоторые модели смартфонов Nokia.
<link rel="apple-touch-startup-image" href="images/l/splash.png">
Эта строка позволяет задать картинку загрузки (splash image) при открытии закладки с рабочего стола.
Выглядит это примерно следующим образом:
Естественно, сплэш-изображение может быть любым, но желательно, чтобы его дизайн гармонировал с общим дизайном сайта и содержал его логотип.
Если такая картинка не будет задана, то при открытии закладки будет показан скриншот последнего состояния приложения.
Картинку следует делать следующих размеров (иначе устройство его не примет):
- 320×480 (iPhone < 4, iPod Touch)
- 640×960 (iPhone 4+, новый iPod Touch)
- 768×1004 (iPad portrait)
- 1024×748 (iPad landscape)
<meta name="apple-mobile-web-app-capable" content="yes" />
По-умолчанию, закладка с рабочего стола запускает веб-сайт в стандартном режиме сафари – с адресной строкой.
Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме, без видимой адресной строки. К сожалению, этот режим имеет некоторые ограничения — при клике на любую ссылку, переход на следующую страницу осуществляется уже в стандартном режиме мобильного сафари.
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Меняем дизайн статус-бара — тонкой полосы в самом верху экрана, где отображается время и иконка заряда батареи.
Для того, чтобы его изменить, используется мета-тег apple-mobile-web-app-status-bar-style.
Здесь может быть один из трех вариантов – default, black или black-translucent.
Default — оставит его в стандартном синем дизайне, black — заставит изменить фон на черный. black-translucent — также сделает статус-бар черным, но добавит к нему полупрозрачность — это немного расширит видимую область контента, что возможно потребует дополнительных правок в css. (документация)
Мы сделаем для вас оригинальную иконку, вложив в неё идею, которая будет приятна взгляду, которая будет привлекать и продавать.
Заказать favicon вы можете в нашей студии написав нам на почту. Ниже представлены примеры иконок нарисованы нашей студией.
В настоящее время наличие web-представительства в сети само по себе не дает никаких конкурентных преимуществ. Как добиться, чтобы сайт приносил коммерческую выгоду своим владельцам?
Одним из основных направлений деятельности компании является предоставление услуг комплексного интернет-маркетинга, ряда мероприятий, направленных на привлечение целевой аудитории на ваш сайт, увеличение продаж, узнаваемость бренда компании, продвижении на рынок определенных товаров и услуг.
Раскрутка и продвижение сайтов в поисковых системах (оптимизация сайта для поисковых машин Яндекс, Рамблер, Mail.ru, Апорт, Google, Yahoo, MSN), размещение контекстной рекламы, аудит и мониторинг сайтов, различные маркетинговые исследования — все это включает в себя Интернет-маркетинг.
Несколько десятков успешных проектов, высокая квалификация специалистов, огромный опыт по продвижению сайтов, только честные методы продвижения, использование современных технологий, наличие собственных разработок, индивидуальный подход к клиенту — вот перечень наших конкурентных преимуществ.
Вы хотите получить отдачу от своего присутствия в сети? Начните сотрудничество с нами прямо сейчас.