Взгляните на верхнюю часть своего браузера. Сколько вкладок у вас открыто? Пять, десять, двадцать? В этом хаосе заголовки страниц сжимаются и исчезают, и единственным ориентиром остается маленькая картинка рядом с названием сайта. Это и есть фавикон. Многие новички забывают о нем или откладывают «на потом», но именно эта крошечная деталь отличает профессиональный ресурс от любительской поделки. Без него ваш сайт — это безликий серый документ в море конкурентов. Разберемся, как создать правильную иконку и внедрить ее в код.
Термин Favicon (сокращение от англ. Favorite Icon — «значок для избранного») — это небольшое изображение, эмблема веб-страницы. Изначально эти значки придумали для закладок в браузере (отсюда и название), но сегодня их роль гораздо шире. Вы видите их:
Зачем он нужен?
Узнаваемость бренда. Это ваш флаг. Пользователь запоминает логотип и быстрее находит ваш сайт глазами.
Навигация. Когда открыто много вкладок, фавикон — единственный способ понять, где какая страница. Если иконки нет, браузер ставит стандартный серый символ (планету или пустой лист), и ваш сайт теряется.
Доверие. Ресурс без фавикона выглядит недоделанным или заброшенным.
Создать хорошую иконку сложнее, чем кажется. У вас очень мало места — буквально несколько пикселей, чтобы передать суть.
Минимализм. Забудьте о мелких деталях, надписях и сложных узорах. В размере 16x16 пикселей они превратятся в грязное пятно. Используйте простые геометрические формы или первую букву названия бренда.
Контрастность. Иконка должна быть хорошо видна как на светлом, так и на темном фоне (многие используют темную тему браузера).
Соответствие стилю. Фавикон должен перекликаться с основным логотипом и цветовой гаммой сайта.
Квадратная форма. Пропорции изображения всегда должны быть 1:1.
Технологии меняются, и если раньше был один стандарт, то сейчас их зоопарк расширился.
Форматы файлов:
Размеры (в пикселях):
Вам не обязательно быть профессиональным дизайнером. Есть три пути.
Это самый простой вариант, как создать фавикон для сайта. Вы загружаете свой большой логотип, а сервис автоматически обрезает его, делает квадратным и выдает архив со всеми нужными форматами (ICO, PNG для Apple, Android и т. д.) и даже готовым кодом для вставки.
Популярные генераторы:
Если вы владеете Photoshop, Figma или Illustrator, лучше сделать все вручную.
Создайте холст размером 512x512 пикселей. Поместите туда свой логотип или его упрощенную часть. Уберите фон (сделайте его прозрачным), если хотите, чтобы иконка вписывалась в интерфейс браузера. Но будьте осторожны: черная иконка на прозрачном фоне исчезнет в темной теме браузера. Иногда лучше оставить цветную подложку. Экспортируйте файл в формат PNG или SVG.
Когда картинки готовы, их нужно «подружить» с сайтом. Для этого файлы загружают в корневую папку сайта на хостинге, а в код страниц добавляют специальные указания.
Вам нужно открыть HTML-код главной страницы (обычно ) и внутри тега <head> вставить следующие строки:
Если работа с кодом, тегами и загрузкой файлов на сервер вызывает у вас головную боль, есть более элегантное решение. Современные конструкторы сайтов позволяют сделать это парой кликов в настройках, без всякого программирования.
Например, если вы используете конструктор сайтов от Рег.ру, процесс будет элементарным.
Этот инструмент создан специально для тех, кто хочет получить профессиональный результат без технических заморочек. Создайте сайт без навыков программирования и дизайна: вам не нужно нанимать верстальщика. Просто выберите один из готовых шаблонов — будь то персональное портфолио, лендинг или полноценный онлайн-магазин — и наполните его своим контентом.
В конструкторе Рег.ру установка фавикона выглядит так:
Это экономит время и гарантирует, что ничего не сломается.
Вы все загрузили, обновили страницу, а иконка не появилась? Не паникуйте.
Слишком много деталей. Попытка впихнуть целый логотип с текстом в квадратик 16x16. В итоге пользователь видит невнятную кашу.
Неправильный формат. Загрузка обычного JPG. Он не поддерживает прозрачность, поэтому вокруг круглой иконки будет виден белый квадрат.
Игнорирование темной темы. Если у вас черный логотип на прозрачном фоне, пользователи с темной темой браузера его просто не увидят. Добавляйте белую обводку или фон.
Один размер для всего. Если загрузить только маленькую иконку 16x16, то при сохранении сайта на рабочий стол айфона она растянется и станет пиксельной и размытой.
Фавикон — это тот самый «маленький винтик», без которого огромный механизм сайта выглядит несовершенным. Это вопрос цифровой вежливости по отношению к пользователю: вы помогаете ему ориентироваться в браузере и находить вас быстрее.
Не пожалейте полчаса времени: нарисуйте простой, контрастный символ, сохраните его в формате PNG или SVG и установите на сайт. Если вы пишете код сами — не забудьте про теги в head. А если используете конструкторы вроде Рег.ру — просто загрузите картинку в настройках. Ваш сайт сразу станет выглядеть дороже и профессиональнее.
Андрей Лебедев
Еще десять лет назад создание собственного сайта казалось чем-то сродни управлению космическим кораблем. Этим занимались…
Представьте, что вы открыли лучшую кофейню в городе. У вас зерна из Эфиопии, бариста —…
Если вы продаете товары или услуги и принимаете деньги от клиентов, рано или поздно вы…
Представьте, что вам срочно нужен товар, а оплата возможна только через неделю после поступления выручки.…
Косвенный налог — это налог внутри цены. Его платит покупатель, а администрирует бизнес. Для предпринимателя…
При оформлении кредита заемщик сталкивается с выбором схемы погашения — аннуитетный или дифференцированный платеж. От…