Favicon – это специальный значок, который соотносится с web-сайтом или отдельной его страницей (страницами) и отображается рядом с названием в закладках, на активной вкладке или в других элементах интерфейса браузера, а также используется для дополнительной уникализации сайта в различных web-сервисах (в том числе в результатах поиска).
Слово «favicon» образовано от фразы «favorite icon», в русском варианте – «значок для избранного». Дело в том, что изначально фавиконки использовались для отслеживания количества добавленных закладок (браузер обращался к файлу иконки только тогда, когда пользователь создавал у себя закладку сайта, соответственно, по количеству обращений к иконке можно было узнать количество добавлений в «Избранное»). Современный алгоритм с favicon существенно отличается от изначального, браузер хранит значок у себя в кэше, а обращения к нему производятся при каждой загрузке страниц.
И, если раньше достаточно было загрузить специальный файл в корень сайта, то сейчас фавиконку можно переопределить для каждой отдельной страницы или даже добавить в нее элементы интерактивности (например, количество непрочитанных сообщений, другие виды счётчиков, эффекты анимации и т.д.).
Для чего нужен Favicon
Подведём итог, для чего может пригодиться favicon:
- стилизации и уникализации результатов поиска (будет отображаться рядом с названиями ваших страниц в поисковой выдаче, и если Google убрал favicon из основной выдачи, то их вывод остался в других поисковых сервисах);
- создания единого стиля сайта (особенно, если фавиконка соотносится с вашим логотипом) при отображении страниц в браузере;
- уникализации закладок (обратите внимание, многие платформы позволяют выносить закладки на рабочий стол, в этом случае иконка будет отображаться и на ПК, и на мобильных устройствах по аналогии с ярлыками или значками приложений, если специальные иконки не переопределены отдельными тегами);
- размещения счётчиков или иных интерактивных элементов (только в браузерах).
Форматы и размеры фавиконок
Во времена выхода на рынок браузера Internet Explorer 5 (1999 год) было достаточно сгенерировать один единственный файл favicon.ico и загрузить его в корень вашего сайта.
Сегодня поддержка этого устаревшего формата имеется во всех современных браузерах, и если вы поступите «как и раньше», то есть создадите нужный файл и «закинете» его к себе на сервер, то браузер подхватит иконку и отобразит на вкладках или в закладках.
Но почему же формат устарел?
Дело в том, что от этого файла требовалось очень низкое разрешение (16x16 точек), которого в настоящий момент будет катастрофически «не хватать». Представьте себе, как будет выглядеть значок сайта, если вы сделаете закладку на устройстве Apple с Retina-дисплеем? Как мыло мыльное. Нужно как минимум изображение 120x120 пикселей, а лучше вообще 152x152.
Например, актуальные версии браузера Opera ожидают увидеть на сайте файл фавиконки с разрешением 260x260 точек.
Наиболее удобным можно назвать векторный формат SVG, который не привязывается к разрешению файла и может масштабироваться при увеличении/растягивании без потери качества, но он поддерживается не всеми платформами (даже Google Chrome до 80 версии с ним не работал).
Если у вас macOS, то для закрепления вкладки на панели нужно сгенерировать отдельный монохромный значок, так как цветные не поддерживаются или будут заменены автоматически на первый символ доменного имени.
Если попытаться добавить значок в закладки ПК и вынести его в интерфейс Metro (ОС Windows 8/8.1), то потребуется задать цвет фона (для заливки). Аналогичным образом работают закладки на рабочем столе Android (нужен прозрачный логотип, вписывающийся в круг, и соответствующий ему цвет заливки; рекомендуемый размер значка – 192x192 точек).
Поэтому, когда речь заходит о каких-либо универсальных форматах и разрешениях файлов, то следует понимать, что единого решения, подходящего для всех платформ, не существует. В каждом отдельном случае нужно идти на какие-то компромиссы и понимать, что отдельные платформы, особенно устаревшие, вы поддерживать не будете.
И, если конкретные требования к значкам web-приложений можно узнать в документации разработчиков для каждой выбранной платформы (iOS, macOS, Windows 8/8.1/10, Android и т.д.), то владельцам сайтов нужно сконцентрироваться как минимум на поддержке популярных браузеров и поисковых систем.
Официальные требования Яндекса к фавиконкам:
- размер – 16x16, 32x32 или 120x120 пикселей (рекомендуется наибольшее расширение);
- формат – ICO (как вариант обратной совместимости), PNG (поддерживается прозрачный канал), BMP, GIF (в результатах поиска показывается без анимации), JPEG или SVG (рекомендуется как наиболее приоритетный).
Чем большее разрешение для растровой графики вы выберете, тем чётче и красивее будет выглядеть фавиконка.
Если вам очень понравилось описание формата SVG, и вы хотите проверить, поддерживается ли формат нужными вам браузерами, используйте для тестов вот эту страницу. Если иконка на вкладке улыбается, SVG поддерживается, если не улыбается – SVG в данном браузере не работает.
Актуальную поддержку остальных форматов по наиболее популярным браузерам можно проверить здесь.
Как сделать фавикон своими руками
Для того, чтобы пользователи соотносили ваш значок с узнаваемым брендом, логично сгенерировать его на основе логотипа.
Получается, что для создания фавиконки вам нужно сначала создать логотип.
Сделать это можно в специальных онлайн-сервисах, обратившись к профессиональным дизайнерам (здесь потребуется сформулировать чёткое ТЗ и приготовиться к значительным расходам) или используя удобный редактор для растровой или векторной графики для самостоятельного креатива (нужен опыт и вкус). В качестве основы можно использовать векторные иконки, которые можно найти, например, здесь.
Но на первых парах, без опыта и профильных знаний, лучше довериться специальным онлайн-сервисам.
Онлайн-генераторы логотипов
На текущий момент в сети можно найти огромное множество сервисов, но многие из них работают на платной основе. Средняя стоимость пакета файлов, включая векторную графику и различную компоновку (для визиток, для бланков, для сувенирной продукции и т.п.), – от 1000 до 5000 руб.
Платные сервисы найти несложно. Ниже обозначим наиболее интересные варианты, в том числе с бесплатным скачиванием.
Wix Logo Maker
Wix Logo Maker будет полезен не только пользователям платформы, но и любым другим клиентам. Качественный онлайн-сервис, который позволяет создать свой логотип в несколько простых шагов и предоставляет полный набор файлов для использования как в онлайн-сервисах (в том числе в социальных сетях), так и для оффлайн-задач (визитки, сувенирная продукция, печатные бланки и т.п.). Бесплатного скачивания нет. Минимальный пакет файлов обойдётся 1500 руб, максимальный - 3749 руб. Wix Logo Maker можно использовать бесплатно, если оплатить тариф подписки для сайта VIP.
Canva
Canva позволяет генерировать сложные логотипы и короткие анимации. Есть доступ к большому количеству шрифтов и базе графических элементов. Бесплатное скачивание результата возможно в форматах MP4 (видео), GIF (анимированные изображения), PDF, JPG (размером не более 500*500 точек) или PNG (с белым фоном и не более 500*500 точек).
Logaster
Logaster качественный сервис для брендирования бизнеса. Здесь можно получить полный набор файлов для печати или для создания атрибутики. Но бесплатно можно сделать только небольшой логотип в формате PNG с фоном (с шириной не более 330 пикселей).
Чтобы получить растровую графику в большом разрешении или векторный формат SVG, придётся потратиться даже на бесплатных генераторах.
В качестве альтернативы онлайн генераторам логотипов можно рассмотреть классическое оффлайн программное обеспечение для мобильных платформ (поищите в магазине приложений для вашей платформы) или для PC/Mac.
Онлайн-генераторы favicon
Когда логотип будет готов, можно будет сгенерировать фавиконки самостоятельно с помощью графических редакторов (для этого могут подойти даже встроенные инструменты вашей операционной системы, если они есть). А можно воспользоваться специальными онлайн-сервисами.
Ниже – несколько примеров удобных генераторов favicon.
RealFaviconGenerator
RealFaviconGenerator позволяет создавать значки не только для всех web-браузеров, но и для других платформ. Всё, что нужно – загрузить свой логотип в высоком разрешении (минимум 70*70 пикселей, но лучше всего 260*260 точек) или в векторном формате (SVG). При желании можно отредактировать цвет фоновой заливки, добавить поддержку устаревших операционных систем, браузеров и т.д.
Кроме того, сервис позволяет задавать версию текущей иконки (на случай, если вы будете обновлять старую без потери контента), сжимать изображения (для более быстрой загрузки в браузере) и формировать коды и инструкции для подключения в разных средах (поддерживается HTML, Grunt, Node CLI, Rails и другие). Единственный недостаток этого сервиса – русский язык не поддерживается.
Favicon.cc
Favicon.cc интересный сервис, который позволяет создавать анимированные значки, формировать favicon на основе ваших изображений или рисовать/корректировать их вручную. Никакой регистрации или оплаты не требуется. Единственная проблема – сервис может формировать только изображения в формате ICO с разрешением 16*16 пикселей.
Favicon.by
Favicon.by аналогичный по функционалу favicon.cc (доступно рисование или импортирование своих изображений, разрешение ограничено 16*16 пикселей), но не умеет работать с анимацией. При скачивании можно поделиться результатом с другими пользователями сервиса.
Как добавить favicon на сайт
Типовая установка фавикон на сайт предполагает два основных действия:
- Загрузку необходимого файла или файлов на сервер (в папку с сайтом на хостинге).
Добавление специального тега в файлы шаблона или в структуру HTML.
В некоторых случаях, например, в премиум-темах для WordPress, могут быть встроенные инструменты для загрузки favicon (генерация разных разрешений и типов иконок не требуется, код уже встроен в шаблон).
Многие облачные платформы (онлайн-конструкторы сайтов) предъявляют собственные требования к формату и разрешению favicon, загрузка и настройка осуществляется в личном кабинете/специальных разделах редактора.
Если вы планируете ручное добавление кода в шаблон, то лучше всего воспользоваться генератором realfavicongenerator.net, он сформирует не только пакет необходимых файлов, но и HTML-код, который останется только вписать в нужное место.
Если вам нужна поддержка только браузеров, то достаточно загрузить изображение favicon и прописать следующий тег (внутри тега head):
<link rel="icon" href="https://vash-sait.com/favicon.ico" type="image/x-icon">
Пояснения по параметрам:
- если нужна поддержка старых версий Internet Explorer, вместо параметра «icon» нужно указать «shortcut icon»;
- если ваш домен использует кириллицу, его нужно предварительно конвертировать в Punycode;
- параметр «type» отвечает за передачу формата файла. Поэтому, если ваша иконка будет отличаться от формата ICO, нужно его поменять на соответствующий: image/png – для формата PNG, image/svg+xml – для формата SVG, image/jpeg, image/bmp или image/gif.
Как поменять фавиконку
Если формат совпадает, изменилось только изображение, нужно просто заменить файл значка (или значков, если используется несколько вариантов). Тег менять не нужно.
Если поменялся и формат файла тоже, нужно актуализировать тег, чтобы он указывал на правильный формат изображения.
Обратите внимание! Поисковая система будет продолжать показывать старую версию иконки до тех пор, пока главная страница не будет переиндексирована. Этот процесс может занять несколько дней (до 2-х недель).
Выводы
У каждого сайта должна быть своя фавиконка. Она выступает в роли своеобразного идентификатора, повышает узнаваемость и позволяет выглядеть страницам в браузере достойно. Чтобы между вашим брендом и значком была прямая связь, лучше всего использовать логотип. Если логотипа пока нет, его обязательно нужно создать, ведь это тоже важная часть узнаваемости вашего сайта.
Favicon используется не только в результатах поиска или в браузере, поэтому важно отнестись к этому значку со всей ответственностью.
