Повышаем доверие с помощью иконки сайта, фавикона

Favicon для сайтаИконка сайта (или просто фавикон) представляет собой небольшой значок, который находится в закладках слева от названия сайта.

Чаще всего, фавикон – это сжатый до 16 на 16 пикселей логотип сайта. Если пользователь или клиент добавляет сайт в закладки, именно фавикон будет напоминать ему/ей о сайте, так как именно он будет находиться рядом с названием самого сайта. Фавиконы эффективны потому, что представляют собой «картинку», которая не только позволяет клиенту/пользователю помнить о Вас, но и подчеркивает оригинальность сайта. Сайты с фавиконами выглядят более профессионально; доверие к ним выше. Данная статья расскажет о том, как создать фавикон и разместить его на сайте.

Советы по созданию фавикона

Создайте «картинку» для фавикона. Если у сайта есть логотип, то Вы просто можете использовать любой редактор изображений (Adobe Photoshop, Fireworks, Pixlr) для его уменьшения до размера 16х16 пикселей. Если логотип окружен белым полем, вырежьте его. Обратите внимание, что, если логотип достаточно сложный, то имеет смысл упростить его или же вообще создать фавикон с нуля. Однако, если Вы создаете новый фавикон, убедитесь, что он передает цветовую гамму оригинального логотипа и сайта в целом.

Конвертируйте изображений. Допустим, что картинка фавикона готова. Теперь Вам необходимо конвертировать ее в файл расширения .ico. Вы можете найти конверторы в сети (например, на prodraw.net). Загрузите картинку, выберите размер и нужный файл готов.

Загрузите фавикон. После того, как фавикон готов, Вам необходимо загрузить его в корневой каталог сайта. Рисунок должен появиться, когда Вы переходите по адресу www.названиесайта/favicon.ico. Не добавляйте фавикон в обыкновенный каталог для изображений.

Добавьте кодировку. Большинство браузеров могут понять, что в Вашем корневом каталоге присутствует фавикон, однако, без элементарной кодировки все равно не обойтись. Добавьте код

<link href=””favicon.ico”” rel=””shortcut” type=””image/vnd.microsoft.icon”” data-mce-href=””favicon.ico”” />

в <head> HTML. Конечно же, в <head> уже будет присутствовать много других элементов (например, тег заголовка, мета описание, ссылки на CSSфайлы и т.п.), поэтому запомните, что указанный выше код может быть добавлен в любое место между <head> и </head>.

Фавиконы для Apple устройств

Вы можете создать фавиконы для устройств Apple, работающих на iOS. Для этого Вам просто надо создать 4 фавикона разных размеров в формате png. Размер картинки по умолчанию 57х57 пикселей. К тому же, Apple рекомендует использовать квадратные, а не скругленные, иконки.

После создания самих картинок, Вам надо вставить в <head> тег HTML следующие коды:

<link href=”apple-touch-icon-iphone.png” rel=”apple-touch-icon” data-mce-href=”apple-touch-icon-iphone.png” />
<link href=”apple-touch-icon-ipad.png” rel=”apple-touch-icon” sizes=”72×72″ data-mce-href=”apple-touch-icon-ipad.png” />
<link href=”apple-touch-icon-iphone4.png” rel=”apple-touch-icon” sizes=”114×114″ data-mce-href=”apple-touch-icon-iphone4.png” />
<link href=”apple-touch-icon-ipad3.png” rel=”apple-touch-icon” sizes=”144×144″ data-mce-href=”apple-touch-icon-ipad3.png” />

Напоследок отметим, что кроме статических существуют еще и анимированные фавиконы.

Cкачайте приложение на Андроид и будьте в курсе новостей
Интернет-маркетинга всегда!

WebSEOHelp

smp-forum.ru


.
Наверх
закрыть