Фавикон лого бережёт. Зачем нужны иконки на вкладках

В этой статье расскажем что такое фавикон, и как он влияет на эффективность вашего сайта.

Фавикон, иконка, а иногда фавиконка — название для очень важного элемента сайта. Именно эти крутые иконочки играют большую роль в юзабилити, идентификации и брендинге сайта, но об этом чуть ниже.

Традиционно фавикон используется:

• на открытых вкладках перед названием сайта;
• в истории браузера;
• на панели закладок;
• в избранном, куда вы сохраняете все интересные страницы;
• в десктопной и мобильной выдаче Яндекса и Google.

Несмотря на небольшой размер, фавикон может значить для бизнеса достаточно много. Сайт без этого идентификатора в виде иконки будет отображаться с общим символом браузера — скучно и вряд ли запомнится.

Фавикон состоит из логотипа, первой буквы названия компании или другого изображения, ассоциирующегося с бизнесом. Фавикон может:

1. Улучшить пользовательский опыт. Иконка в браузере — своеобразная подсказка для пользователя, сохраняющего сайт в закладки, или для энтузиастов с 50 вкладками на панели. Благодаря фавикону, вы сможете упростить процесс возвращения на сайт, к примеру, увидев нужный значок, пользователь легко найдёт нужную страницу.
2. Прокачать узнаваемость бренда. Как упоминалось выше, фавикон — один из элементов фирменного стиля вашей компании, который способствует запоминаемости логотипа.
3. Подчеркнуть профессионализм. Фавикон — завершающий штрих. Без него, конечно, можно, но с ним картина будет точно завершена.
4. Улучшить SEO. Если раньше иконки использовались лишь для удобства, то сегодня в некоторых поисковых системах (например, в Яндекс и Google), фавикон появляется в результатах поисковой выдачи напротив каждого сайта.

Для начала давайте определимся с размером фавикона.

Самый оптимальный — 16x16 пикселей. Поэтому важно убедиться, что ваша иконка корректно отображается в таком маленьком разрешении. Рекомендуем также создать фавикон в более крупных размерах 32x32 и 48x48 пикселей, которые иногда используются для десктопных версий страниц.

Не забудьте про прозрачный фон, если размещаете логотип в квадрате — для этого сохраните файл в формате PNG. Этот формат самый предпочтительный для фавикона. Он поддерживается и корректно отображается практически всеми браузерами, что обеспечивает высокое качество иконки на любых девайсах.

Также рекомендуем делать иконки в формате SVG — они масштабируются без потери качества, что в будущем может стать отличным решением внезапных проблем с отображением картинки.

С размером определились, теперь выбираем подходящий способ создания иконки.

Начнём с самого очевидного варианта — можно обратиться к дизайнеру. Особенно актуально, если у вашего бренда ещё нет логотипа. Если дизайнер уже сделал для вас лого, то и фавикон – не проблема.

Вы также можете сделать иконки самостоятельно в фоторедакторе. Например, достаточно просто сделать фавикон в Photoshop:

• В меню выбора создайте новый файл размером 64х64 пикселя (на крупном холсте просто удобнее). Далее вставьте лого в документ, добавьте или уберите детали.

• После внесения изменений, во вкладке «Изображение» найдите блок «Размер изображения», чтобы изменить уменьшить картинку до 16х16 пикселей.

• Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось.

• И да, сохранитесь.

Также можно воспользоваться онлайн-сервисами: Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.

Можете также скачать фавикон на специальных сайтах, например, Fresh Favicons и Favicon.by. Готовые фавиконы — хорошая временная мера, но понятно, что об уникальности бренда можно забыть.

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

А если у вас ещё нет сайта, напомним про сервис REG.Site. В нём можно либо отредактировать уже готовый шаблон на WordPress, либо потратить чуть больше времени и собрать сайт из элементов.