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

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

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

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

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

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

Какие показатели нужно отслеживать новому бизнесу? 10 главных метрик

Полный список финансовых показателей, которые нужно учитывать при запуске и развитии бизнеса. С формулами, комментариями и понятными примерами расчета. (далее…)
Read More

Драма Microsoft и Apple: от вражды до сотрудничества

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

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

В бизнесе нет страховки от ошибок — любой промах отражается на репутации. И иногда исправить ситуацию может только ребрендинг и...
Read More

Запускаем email-рассылку: как не попасть в спам при отправке писем

В статье рассказываем, почему рассылки попадают в спам, и делимся советами, как сделать так, чтобы письма всегда доставлялись до адресатов....
Read More

Ключ к успешному продвижению: что такое SMM-стратегия и как ее составить

Разберем, что такое SMM-стратегия, зачем она нужна и как эффективно использовать социальные сети для решения бизнес-задач. (далее…)
Read More

Новогодний маркетинг: лучшие приемы праздничной рекламы

Для бизнеса Новый год и Рождество — время всплеска продаж и увеличения прибыли. А способствуют этому всем знакомые персонажи: от...
Read More

Россияне предпочитают .ru вместо .com, а Дональд Трамп проиграл доменный спор за mar-a-lago.com

Рассказываем самые интересные новости доменного мира. (далее…)
Read More

Прокрастинация: что такое, виды и как бороться

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

Что нужно покупателям в 2024: 5 трендов электронной коммерции

Ежегодно рынок e-commerce в России растет на треть, а в 2024 году, по прогнозам экспертов, его оборот составит более 7,2...
Read More

Гайд: стильный интернет-магазин на WordPress с помощью двух инструментов

Онлайн-торговля растет на 40-50% в год, поэтому открыть свой интернет-магазин никогда не поздно. Для старта не понадобятся знания HTML и...
Read More