Что такое фавикон, как его сделать и добавить на сайт
Если присмотреться к меню вкладок браузера, то можно заметить крошечные изображения-логотипы. Благодаря им понятно, какой именно ресурс находится на определенной вкладке. Это удобный инструмент для быстрой ориентации среди массы веб-площадок. А если создать фавикон для сайта, владельцем которого являетесь вы, то это повысит узнаваемость интернет-проекта. Он попадет в разряд быстро находимых, более кликабельных.
Если вы еще не осознали привлекательность этого элемента — эта статья для вас. Мы подробно расскажем, как сделать фавикон для сайта, о его плюсах использования, установке.
Что такое фавикон
Значок получил свое название от слияния двух английских слов — favorite icon (дословно «предпочитаемая икона/символ»). На русский лад картинку могут называть фавиконкой.
Найти ее можно в адресной строчке обозревателя перед наименованием веб-ресурса или в закладках, вкладке браузера — везде, где есть необходимость идентифицировать интернет-проект.
Иконки являются визуальными идентификаторами, позволяющими пользователям сразу распознавать, запоминать проект. Их можно использовать в качестве ярлыка для главного экрана, рабочего стола компьютера, мобильного гаджета. Это позволяет обеспечить быстрый доступ к нужному ресурсу.
Роль логотипа не только в эстетическом оформлении. Если вы устанавливаете фавикон, то решаете ряд маркетинговых задач:
- Повышается узнаваемость бренда.
- Проект приобретает более профессиональный, презентабельный вид.
- В связи с удобной навигацией улучшается пользовательский опыт.
- Если устанавливать фавикон на экран смартфона, то не придется тратить время на поиск веб-площадки в закладках.
Каким должен быть фавикон
Создание логотипов для веб-проекта требует придерживаться некоторых аспектов: правильный подбор размеров, выбор подходящего формата, возможность элементов отображаться на различных платформах.
Доступные форматы
Форматы могут применяться самые разнообразные: SVG, PNG, JPEG, ICO. Последний считается самым популярным, поддерживаемым большей частью браузеров. Формат обеспечивает хорошую совместимость с различными платформами, качественность отображения. Остальные два формата используются при необходимости использования сложных графических деталей.
Размеры фавиконов для сайта
Минимальный размер фавикона для сайта — 16х16, 32х32 пикселей. Выбор конкретных параметров зависит от требований веб-площадки, общего дизайна. Маленький размер используется для простых значков, большой дает возможность добавлять, детализировать изображение, сделать его более сложным.
В зависимости от ОС, версий обозревателей показатели могут быть 24х24, 64х64 px. Для Гугл рекомендуется устанавливать цифры, кратные 48, например, 144х144 px.
Кроссплатформенная поддержка фавиконов
Различные браузеры предъявляют свои требования к параметрам, форматам. Это говорит о том, что невозможно устанавливать кроссплатформенные иконки. Чтобы они правильно отображались на разных устройствах, необходимо использовать набор значков. Для формирования такого набора, полного подключения потребуется время, определенные усилия или применение специальных приложений.
Для получения адаптивной версии стандартный favicon.ico заменяется на формат SVG. Такой продукт поддерживается свежими версиями Гугл Хром, Опера, Firefox.
Как создать фавикон самостоятельно
Фавиконы для сайта можно сделать самостоятельно. Для этого используют фоторедактор, например Photoshop. Весь процесс делится на три основных этапа:
- В меню выбирается действие по созданию нового файла, задаются параметры картинки 64х64 для удобства работы. В документ вставляется логотип, добавляются, убираются различные детали.
- После корректировки логотипа следует перейти в папку «Изображения», далее в пункт «Размер» для выставления параметров 16х16 пикселей.
- Необходимо убедиться, что иконка корректно отображается: логотип не растянут, все линии, детали четко прорисовываются, отсутствует фон. Если всё в норме, то можно нажимать кнопку «Сохранить как файл».
Генераторы для создания фавиконов
Задачу можно решать с помощью сервисов генерации. Большая часть таких инструментов имеют одинаковые алгоритмы работы: на платформу добавляется картинка, выставляются нужные параметры. Сервис (например, PR-CY, Favicon.io) поставляет уже готовый продукт. Некоторые генераторы (Canva) способны помочь сделать фавикон сайта самостоятельно, выбрав формы, цвет, дизайн.
Как установить фавикон на сайт
Рассмотрим два популярных способа, позволяющих устанавливать фавикон на сайт: через WordPress и вручную.
Через WordPress
Необходимо зайти в настройки для выполнения определенных действий:
- активировать в менюшке пункт «Настроить» в секторе «Внешний вид»;
- нажать «Свойства», далее нужно кликнуть на «Выбрать значок сайта», добавить фавиконку;
- ВордПресс продемонстрирует иконку. Если ее вид соответствует ожиданиям, то можно ее сохранять.
Как вариант, можно добавить часть кода с адресом иконки между <head>…<head> в шапке файла ресурса.
Через корневой каталог, если нет CMS
Устанавливать фавикон на сайт подобным методом подойдет тем, кто не работает на платформе, имеющей необходимые инструменты. Существует два способа:
- Загрузка созданного значка в корневой каталог ресурса. Делается это через интерфейс или FTP-менеджер. Работоспособность способа зависит от правильно подобранных параметров, корректного названия самого файла.
- Редактирование кода. Если оказалось недостаточным простое добавление фавикона в корневую папку для отображения значка на вкладке обозревателя, то можно отредактировать файл, содержащий разметку веб-странички. Для этого добавляют определенный код в начало данного файла. Между <head>…<head> заменяют «*/favicon.ico» на URL используемой картинки и тип данных, далее наименование файла со значком, применяемый формат.
При обоих способах иконка на вкладке обозревателя появится не сразу.
Заключение
Для создания работоспособного продукта, рекомендуется ориентироваться на следующие факторы:
- Крошечная иконка должна быть читабельной, вписываться в общую стилистику бренда.
- Данные логотипы используются на разных платформах. Чтобы не держать в памяти все их свойства можно воспользоваться специальными сервисами, которые поставят готовый комплект иконок, фрагмент кода. Последний необходимо скопировать в корневую папку, добавить в код основной странички.
