Поиск по сайту Поиск

Фавикон — крошечный размер, огромное значение для бизнеса

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

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

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

Фавикон (FAVoritesICON) — это небольшой значок размером 16x16 пикселей, используемый в веб-браузерах для показа на вкладках. В дословном переводе с английского Favicon — значок для избранного, который впервые появился в браузере Internet Explorer.

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

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

Зачем сайту нужен фавикон

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

Чаще всего, фавикон состоит из логотипа, первой буквы компании или другого изображения, характеризующего бизнес. Используя фавикон, вы можете:

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

Как сделать фавикон

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

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

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

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

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

идея как сделать фавикон

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

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

  1. В меню выбора создайте новый файл размером 64х64 пикселя (на хосте покрупнее будет просто удобнее работать). Далее вставьте свой логотип в документ, добавьте или уберите детали. 
  2. После внесения изменений, в папке «Изображение» найдите блок «Размер изображения», чтобы изменить его на 16х16 пикселей. 
  3. Удостоверьтесь, что всё отображается правильно: фон удалён, картинка не растянута, ничего не размазалось. Если результат вам нравится, нажмите «Сохранить как файл». 

Если не хочется возиться с программами, можно воспользоваться онлайн-сервисами. Например, Favicon Generator, Dynamic Drive Favicon Tool или Gen Favicon.

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

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

⌘⌘⌘

Расскажите в комментариях, знали ли вы, что такое фавикон? Как часто обращали внимание на них внимание? Можете показать иконку вашего сайта в комментариях — нам очень интересно.

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

Сильная презентация для инвесторов: от содержания до выступления

Презентация поможет структурировать данные и представить идею потенциальным инвесторам. Как сделать качественный документ – разбираемся вместе с основателем REC’s GROUP...
Read More

Дёшево и эффективно: как малому бизнесу продвигать свой сайт

Как выделиться среди конкурентов и получить внимание потенциальных клиентов. Бюджетные методы продвижения сайта – в этом обзоре.  
Read More

Как перевести бизнес в онлайн: 7 шагов

Пошаговая инструкция по переводу существующего бизнеса в онлайн: от создания сайта до начала продаж и запуска рекламы.
Read More

Кризис как точка роста для бизнеса

Когда бизнес развивается слабо, на помощь приходит… кризис. Рассказываем, как не испугаться перемен и открыть офис в другой стране, чем отличается построение бизнеса в Москве и Алматы.
Read More

Миллион на подтяжках для собак

Как придумать и монетизировать идею для бизнеса Нет смысла терять время и усложнять, когда бизнес-идеи витают в воздухе. Как понять...
Read More

Нейросети в помощь бизнесу: на что способен искусственный интеллект

Развитие нейросетей стало для россиян главным научным событием 2023 года. Бизнес активно внедряет искусственный интеллект, чтобы создавать контент, лучше понимать...
Read More

13 лайфхаков, которые погубят ваш бизнес

Разбираем «серые» способы работы и ошибки, которые точно развалят собственный бизнес.
Read More

Как привлечь инвестиции в мини-девелоперский проект с нуля

Предприниматели из Тюмени смогли стать девелоперами по загородной недвижимости без начального капитала и кредитов. Основатель компании «Финская улочка» Юлиу Пантя рассказывает,...
Read More

Не потерять ни клиента: топ-5 CRM-систем для предпринимателей

По мере роста бизнеса обрабатывать запросы клиентов вручную становится все сложнее. Информация о заказах часто теряется, а клиенты по несколько...
Read More

На чём нельзя экономить на старте бизнеса

Купили дешёвые материалы, а потом потеряли половину дохода из-за брака. Сэкономили на зарплате работников, а в итоге сорвали сроки и...
Read More