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

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

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

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

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

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

Тренинг по вёрстке сайта на HTML5 и CSS3

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

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

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

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

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

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


фавиконы в поиске


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

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

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


фавикон в закладках


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

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

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

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

Фавикон обычно - это картинка рзмером 16х16 пикселей с расширением .ico или .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/favicon.png">

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

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

Выводы:

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

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


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


Комментариев: 3 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 3
  •  Andy Grand | 20 апреля 2013 в 15:42:58

    да вот как раз сейчас разработал идею и заказываю логотип со всеми его вариантами для фирменного стиля (фавикон, штамп для бланков, значок и прочее).

    Однозначно, фавикон обращает на себя внимание - замечаю по себе smile

  •  Денис Скрипник | 28 мая 2013 в 18:02:40

    Да, согласен, что фавиконки нужны. Даже, несмотря на то, что я практически слепой, я понимаю почти с самого начала значимость иконки. Вопрос же в другом: Какой значок использовать на персональном блоге? фотка ведь, наверное, не подойдёт: будет слишком маленькой. или я ошибаюсь?

  •  Елена | 28 мая 2013 в 18:20:13

    Денис, еще раз здравствуйте!

    Фотография точно не подойдет.

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

    Можно и самому нарисовать в фотошопе, а можно использовать уже готовое изображение, например, с сайта iconfinder.com или еще с какого-то ресурса с бесплатными изображениями.