Как сделать фавиконку из логотипа?

Как сделать фавикон из логотипа? Да очень просто! Главное… а что здесь главное? Давайте разберемся.

Что такое favicon?

Favicon (фавикон) – маленькая иконка, которая отображается в браузере на вкладке с названием открытой страницы сайта. Кроме того, она показывается в списке закладок или на панели закладок. Размеры иконки на экране достаточно малы – всего 16 x 16 пикселей.
Зачем он нужен?
Маленькая картинка на вкладке часто запоминается лучше, чем текст на ней. Поэтому когда в браузере открыто много вкладок favicon помогает пользователю быстро найти нужную.
Но главное преимущество сайта с иконкой-фавиконом состоит в другом – она повышает посещаемость сайта! Дело в том, что поисковик Yandex отображает эти иконки в результатах поиска.
Фавиконки в текстовой “простыне” найденных интернет-ресурсов неизбежно привлекают внимание пользователя. Специалистами по продвижению сайтов опытным путем доказано, что по ссылкам с фавиконом в Яндексе кликают чаще, чем по ссылкам без них.
Поэтому у хорошего сайта favicon должен быть обязательно.
Фавикон = логотип?
Чаще всего в качестве фавикона используют уменьшенную графическую часть логотипа:

Но этот способ годится далеко не всегда.
Во-первых, 16 х 16 –это очень маленький размер, и если знак достаточно сложный, то механическое его уменьшение даст неудовлетворительный результат: разобрать что-либо на иконке будет невозможно.
Во-вторых, если логотип чисто шрифтовой или знак в нем интегрирован в надпись, его не вписать в квадрат иконки.
Вот как популярные сайты решают эти проблемы:

Wikipedia вместо своего чересчур сложного знака использует первую букву названия. Так же поступает и Facebook со своим шрифтовым логотипом.
У Youtube в качестве фавикона – узнаваемая кнопка “play”, созданная по мотивам логотипа. Flickr использует два кружка в цветах своего логотипа – этот элемент можно увидеть на сайте в анимированном виде пока загружается загружается большая фотография.
Как поступают вебдизайнеры?
Если позволяет логотип, обычно используют его уменьшенную версию, перед этим радикально ее упростив, чтобы мелкие детали не испортили впечатление от иконки:

Если логотип достаточно сложный – используют его узнаваемый фрагмент:

Или строят фавикон на основе первой буквы названия:


А иногда даже не используют логотип вообще:

Как установить фавикон на сайт?
Самый простой способ — отдать его разработчикам сайта. Они знают, что делать.
Некоторые системы управления сайтом позволяют загрузить фавикон в своем интерфейсе.
А в общем случае нужно разместить его в корне сайта и добавить следующие строки после тега <head> в исходном тексте страницы или шаблона:

<link rel=»icon» href=»http://адрес-вашего-сайта.ru/favicon.ico» type=»image/x-icon» />
<link rel=»shortcut icon» href=»http://адрес-вашего-сайта.ru/favicon.ico» type=»image/x-icon» />
И в заключение:
Если у вашей компании есть сайт, то стоит понимать, что favicon – не менее важный элемент вашего бренда, чем, скажем, визитка. Визитку вашей компании могут увидеть сотни людей, а ее фавикон – десятки тысяч. К его созданию стоит подойти со всей ответственностью.

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

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