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

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

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

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

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

Фавикон (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, либо потратить чуть больше времени и собрать сайт из элементов.

Google Search Console для оптимизаторов — функции и возможности

Google Search Console (GSC) — это удобный бесплатный инструмент, предоставляющий информацию об эффективности сайта в поисковой выдаче. С его помощью...
Read More

Космический домен .SPACE: для тех, кто смотрит в будущее

Правильно подобранный домен не только производит хорошее впечатление на пользователя, но и повышает узнаваемость бренда. Один из способов создать красивый...
Read More

Коммерческое предложение: как правильно подготовить документ, чтобы точно заинтересовать клиента

Коммерческое предложение — это важный инструмент маркетинга, который позволяет убедительно и емко рассказать о пользе продукта или услуги. Давайте вместе...
Read More

Знание — сила. Что такое веб-аналитика и где ее отслеживать

Сделать сайт — отличная идея, если вы хотите раскрутить бизнес или построить личный бренд. Но как понять, что созданный проект...
Read More

Окупаемость инвестиций, или ROI

Если вас когда-нибудь интересовало, как рассчитать доход от рекламы, то вы наверняка сталкивались с таким термином, как ROI. В этой...
Read More

̶Д̶ж̶а̶н̶г̶о̶ домен освобожденный: что такое и как его найти

Процесс запуска и раскрутки сайта требует больших затрат. Чтобы добиться хороших результатов в сжатые сроки, можно использовать дроп-домен. Рассказываем, как...
Read More

ОГРНИП — что такое, как расшифровывается и зачем нужен

ОГРНИП — это номер, который получает каждый предприниматель при регистрации своего бизнеса. Давайте разберемся, для чего он нужен, чем отличается...
Read More

BILLmanager: возможности биллинг-панели для хостинга

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

Как создать сайт для фотографа

Многим фотографам в какой-то момент становится тесно в соцсетях, сильно ухудшающих качество фото. Хороший выход из ситуации — самостоятельно сделать...
Read More

Что такое код ОКВЭД и как его выбрать

Чтобы получить официальный статус бизнесмена, предпринимателю нужно зарегистрировать ИП или ООО и сообщить государству, чем он будет заниматься. Все эти...
Read More