Если вы внимательно приглядитесь ко вкладкам в своём браузере, то обнаружите, что почти каждый открытый сайт легко найти по индивидуальной иконке, которая находится перед его названием. Именно это изображение носит название favicon.
Иных практических смыслов у такой иконки нет. Она служит лишь отличительным знаком для вашего веб-проекта, позволяя выделить его в ряду других. Наличие favicon повышает привлекательность сайта для пользователей, то есть служит имиджевым целям.
Как установить такое изображение самостоятельно? Эта задача по силам даже начинающим пользователям. В этой статье мы по шагам расскажем, как привязать favicon к вашему сайту.
Стандарты favicon
Поскольку иконка сайта предназначена для отображения в браузере, это накладывает определённые ограничения на её формат. Классическими размерами для favicon являются 16 x 16 или 32 x 32 точек, однако сегодня может возникнуть потребность использовать 64 x 64, 128 x 128 и даже более крупные иконки. В качестве формата файла для хранения favicon чаще всего используют .ico и .png.
Полезно: настройка FTP-доступа на сайте WordPress
Способы создания favicon
При создании иконки для сайта можно пойти несколькими путями:
- воспользоваться практически любой программой или онлайн-сервисом для редактирования графики, чтобы нарисовать её самостоятельно;
- поискать в интернете или среди своих фотографий наиболее подходящую картинку, на основе которой сделать favicon;
- попросить знакомого или незнакомого дизайнера-фрилансера разработать иконку для вашего сайта, чтобы заплатить за работу профессиональному исполнителю.
Рассмотрим каждый из этих вариантов подробнее.
Рисуем favicon самостоятельно
Не нужно быть продвинутым графическим дизайнером, чтобы нарисовать иконку собственными руками. Вам даже не потребуется для этого никаких профессиональных пакетов для редактирования. Можно воспользоваться самым простым редактором, например, Paint, который является стандартным средством для редактирования изображений в Windows.
Создайте квадратный холст любого размера. Затем, используя доступные инструменты выбранного редактора, создайте изображение. Измените его размер таким образом, чтобы любая из граней составляла 16, 32 или больше пикселей. Сохраните результат в формате ico.
Полезно: WooCommerce – оптимизация размеров одежды в интернет-магазине
Онлайн-сервисы для создания favicon
Наиболее популярными онлайн-сервисами для создания favicon являются следующие:
- pr-cy.ru/favicon;
- favicon.cc;
- icoconvert.com.
Теперь об особенностях каждого из них.
pr-cy.ru/favicon — русскоязычный сервис, который позволяет быстро подогнать исходное изображение под нужный формат. Просто загрузите выбранную картинку на сайт. Сервис автоматически уменьшит его размеры до нужных. Результат можно увидеть на превью. Для лучшей совместимости с мобильными устройствами сервис рекомендует создавать иконки в формате 48 x 48 пикселей.
favicon.cc — для использования данного сервиса вам потребуется минимальное знание английского языка. Помимо подгонки уже готового изображения, здесь есть штатный онлайн-редактор, позволяющий попиксельно сформировать нужную картинку. Цвета точек можно выбирать из штатной палитры, а также задавать их прозрачность. Помимо этого, сервис позволяет простые создавать анимированные изображения. В качестве источника вдохновения здесь предусмотрен раздел с работами других пользователей.
icoconvert.com — простой пошаговый редактор на английском языке. Для получения иконки просто следуйте выделенным шагам. Загрузите на сервис готовый файл размером до 50 Мб, обрежьте изображение, а затем выберите формат и расширение файла для экспорта. Сервис позволяет создавать favicon с разрешением вплоть до 256 x 256 точек.
Полезно: настройка безопасности движка WordPress
Иконка для сайта из картинки
Чтобы получить favicon из уже готового изображения, не нужно предпринимать почти никаких действий. Достаточно уменьшить размеры исходного изображения под стандартный формат. Недостатки у такого способа тоже есть. Если исходный файл является сложным по композиции, то при изменении размеров все эти детали будут утрачены, а поэтому есть риск вместо аккуратного квадрата получить невнятный набор цветных пикселей.
Заказ favicon у дизайнера
Если вы не дружите с графическими редакторами и онлайн-сервисами, но при этом хотите получить качественное изображение, рекомендуем заказать его у дизайнера. В большинстве случаев, его работа будет не бесплатна, однако вы сэкономите время. При этом в результате вы получите заведомо приличный результат.
Универсальный способ установки favicon на WordPress
Вне зависимости от того, какая у вас версия WordPress, иконку сайта можно установить следующим образом:
- получите доступ к файловой структуре своего сайта;
- загрузите готовый favicon в корневой раздел вашего проекта;
- далее вам нужен файл с именем header.php;
- откройте его для редактирования;
- наконец, пропишите между тегами <head> и </head> следующий код.
<link rel=”icon” href=”http://имя_вашего_сайта.ru/favicon.ico” type=”image/x-icon” />
<link rel=”shortcut icon” href=”http://имя_вашего_сайта/favicon.ico” type=”image/x-icon” />
Предполагается, что файл с иконкой имеет расширение .ico и располагается в корневой директории вашего сайта. Если вы размещаете favicon в другом месте, то правильно пропишите путь до него.
Устанавливаем favicon в WordPress в версиях старше 4.3
Начиная с версии WordPress 4.3, установить favicon на сайт можно прямо через административный интерфейс. Для этого нужно выполните следующую последовательность действий:
- зайти в раздел «Внешний вид»;
- выбрать подраздел «Настроить»;
- в свойствах сайта нужно выбрать существующий графический файл или загрузить изображение с локального диска;
- сохраните и опубликуйте сайт.
Этот способ является наиболее простым, поскольку не требует редактирования изображения, подгоняя его под нужный формат. Также не нужно прописывать код руками. Таким образом, отпадает необходимость пользоваться графическими редакторами, онлайн-сервисами или заказывать favicon у дизайнера.
Как проверить корректность отображения favicon?
Из-за большого количества браузеров и наличия мобильных платформ могут возникать ситуации, когда у отдельных пользователей ваша иконка может отображаться некорректно. Что делать в такой ситуации? Для тестирования изображения удобно пользоваться сервисом realfavicongenerator.net.
Загрузите готовую картинку с иконкой или укажите путь к сайту, чтобы протестировать её внешний вид в различных ситуациях применения. Буквально через 5 секунд вы получите развёрнутый отчёт, который продемонстрирует все проблемные точки.
Сжатие иконок
Если вы создаёте множество вариантов иконок в формате .png, то перед их загрузкой на свой сайт рекомендуем сжать изображение. Это позволит уменьшить размер файлов, а следовательно, хоть немного, но сократит время загрузки страницы у пользователей. Для этих целей удобно пользоваться сервисом iloveimg.com/compress-image.
Загрузите иконки с локального диска или из облака, а затем просто сохраните результат сжатия. Сервис работает с форматами .jpg, .png и .gif.
Заключение
Установка favicon в проекты, работающие на WordPress, не представляет сложности даже для начинающего пользователя. Единственное, что нужно учесть, это корректность отображения выбранной иконки в мобильных и десктопных версиях популярных браузеров. Все действия по созданию, редактированию, тестированию и сжатию изображений можно выполнить самостоятельно с помощью бесплатных онлайн-сервисов.
