Зачем нужен Фавикон?

Иногда даже самые маленькие детали на нашем сайте могут играть очень большую роль в дизайне и юзабилити. И как раз о такой маленькой детальке мы сегодня с вами и поговорим...

Что такое фавикон?

Favicon (от английского favorite icon - избранный значок) - это маленькая картинка, которая ассоциируется с определенным вебсайтом или страницей.

Она располагается в верхней вкладке браузера напротив названия сайта, который вы открыли. А также эта картинка отображается в закладках, если вы добавили сайт в избранное.

Зачем его нужно использовать?

Этот маленький значок, который, казалось бы, используется на сайтах в основном "для красоты" или чтобы просто не было пустого места в квадратике напротив названия сайта в браузере...

На самом деле он является одним из ключевых факторов формирования бренда вашего сайта. Фавикон должен отражать суть сайта и в то же время он должен быть запоминающимся и индивидуальным.

Фавикон должен экономить время вашего посетителя. Вы спросите: каким же образом он может экономить время?

Дело в том, что многие пользователи, пользуясь интернетом, часто открывают много вкладок одновременно. И когда на вкладках нет значка, а просто пустой квадратик, то очень велика вероятность того, что он никак не отличит ваш сайт и просто-напросто закроет его.

Поэтому всегда делайте так, чтобы вашему посетителю было удобно, чтобы ваш посетитель, даже если у него открыто много разных вкладок в браузере или же если у него много сайтов находится в закладках, чтобы он всегда легко мог найти ваш сайт среди "толпы" других сайтов.

Еще такой момент - когда человек ищет информацию в поисковике - он с большей вероятностью кликнет на ваш сайт, если там будет стоять фавикон, чем на сайт вашего конкурента без фавикона.

Визуальное восприятие играет огромную роль для человека. Когда мы заходим на какую-то вебстраницу, наш взгляд падает прежде всего на картинку, а потом уже на текст, который ее окружает.

То же самое, когда я, например, просматриваю закладки, чтобы найти нужный мне ресурс, мой взгляд прежде всего скользит по фавиконкам, и часто только этого бывает достаточно, чтобы найти то, что я искала. Реже - после того, как я найду нужную мне картинку, я присматриваюсь, что же там написано с ней рядом.

Таким образом, время моего поиска заметно сокращается.

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

Если на вашем сайте нет фавикона, браузер просто будет показывать пустой квадратик. Если у вас в закладках есть достаточно много таких "безфавиконовых" сайтов, то поиск нужного вам ресурса может стать достаточно утомительной задачей - вам придется просмотреть их все, чтобы найти нужный сайт.

Где мне его взять?

Фавикон обычно - это картинка рзмером 16х16 пикселей с расширением .ico или q.png

Вы можете сами нарисовать его и потом просто перевести в нужный формат с помощью специальных сервисов или использовать фотошоп.

Либо вы можете найти подходящую картинку на одном из сайтов с бесплатными иконками.

Здесь нужно учитывать пару моментов: чтобы ваш фавикон не был слишком пестрым и чтобы картинка смотрелась целостно (не состояла из каких-то отдельных частей, лучше, чтобы это был один объект) чтобы даже в таком маленьком размере было понятно, что там нарисовано.

Как поставить фавикон на сайт?

Если же у вас, к примеру, статический сайт, построенный на html, вам нужно залить картинку в папку с другими изображениями сайта, а затем добавить в ваши html документы такую строчку, расположив ее в теге head:

<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

Или

<link rel="shortcut icon" type="image/x-icon" href="images/faviconq.png">

Это уже в зависимости от того, какой формат вы используете.

Если у вас сайт на MaxSite CMS - тут еще проще. Вам просто нужно добавить нужную картинку в папку images/favicons используемого вами шаблона. Только это должен быть формат png.

Выводы:

Выгоднее все-таки использовать фавикон, как в эстетических целях (маленькая аккуратная картинка радует глаз), так и в практических целях (и посетителям и вам самим будет намного удобнее с ним).

Если у вас есть какие-то мысли, пожелания или советы по этому поводу, пожалуйста, поделитесь ими в комментариях.

Автор статьи: Елена Лощилова.