Установить фавикон на сайте — один из самых простых способов сделать ваш ресурс более узнаваемым и увеличить конверсию в переход на сайт из поисковой выдачи. Рассказываем, что такое фавикон, где он используется, зачем нужен и как его создать и добавить на сайт.
Что такое фавикон
Фавикон (англ. favicon) — это маленькая иконка сайта. Она отображается в браузере в нескольких местах:
- слева от адреса сайта в поисковой выдаче,
- слева от названия страницы во вкладке браузера и на панели закладок,
- на стартовой странице в браузере.
Фавикон привлекает к вашему сайту внимание в поисковой выдаче. Также благодаря ему сайт проще отыскать в группе закладок и открытых вкладок браузера. Наконец, фавикон позволяет ресурсу выглядеть более статусно и профессионально. Так что этот инструмент поможет вам увеличить количество переходов на сайт и повысит его узнаваемость.
При этом сделать фавикон и установить на сайте не так сложно: для этого не требуются специальные навыки, просто следуйте нашей инструкции.
Что учитывать при создании фавикона
Во время создания фавикона учитывайте требования к его дизайну, размеру и формату.
Дизайн
В центре иконки должен быть один четко различимый объект — не нужно добавлять на иконку несколько изображений или перегружать ее деталями. Можно использовать логотип компании, если он маленький, либо первую букву названия компании. Желательно, чтобы цвет фавикона совпадал с цветовой гаммой вашего сайта.
Размер
«Яндекс» советует устанавливать фавиконы размером 120 × 120 px, а Google — не менее 48 × 48 px. Но столь большие иконки могут не загрузиться на старых устройствах. Если вы хотите, чтобы картинка отображалось на всех девайсах, можно выбрать размер 32 × 32 px или даже 16 × 16 px. Правда, в таком случае изображение будет немного размытым. Небольшой размер стоит использовать для простых иконок, на которых нет множества деталей.
Формат
Существует три варианта формата: ICO, PNG и SVG. В таблице мы разобрали, какой формат и в каких случаях можно использовать.
Как создать фавикон
Готовый фавикон-файл можно скачать, введя соответствующий запрос в поисковике. Но есть риск, что другой веб-мастер возьмет такую же картинку и фавиконы разных сайтов будут одинаковыми. Кроме того, чужой фавикон не сможет передать индивидуальность вашего сайта.
Так что лучше сделать фавикон с нуля. При этом необязательно специально прибегать к услугам дизайнера: есть множество генераторов фавиконов. Например, на сайте favicon.io можно сгенерировать картинку на основе текста и эмодзи или сконвертировать изображение в формате PNG в формат ICO.
Генерируем фавикон на основе текста. Предположим, что вам нужно создать фавикон для интернет-магазина спортивного оборудования. Сайт вашего магазина сделан в черно-синей гамме.
Заходим на favicon.io и выбираем плашку Text.
В верхнем поле экрана пишем букву S (от англ. sport). Делаем иконку черно-синей, придаем ей круглую форму, выбираем шрифт и размер шрифта. Нажимаем кнопку Download и скачиваем папку с готовыми фавикон-файлами разных размеров и форматов. Обязательно сохраните ее: именно эти файлы мы будем устанавливать на сайте.
В верхнем левом углу показано, как будут выглядеть иконки
Генерируем фавикон на основе эмодзи. Предположим, что вам нужно сделать фавикон для цветочного магазина.
Заходим на favicon.io и выбираем плашку Emoji.
Отыскиваем эмодзи цветка во вкладке Animals & Nature.
Сайт покажет варианты фавикона разных размеров. Папку с файлами скачиваем так же, как и в примере выше.
Так будут выглядеть на сайте иконки, сделанные на основе эмодзи тюльпана
Конвертируем файл PNG в файл ICO. Иногда установить фавикон можно только в формате ICO. Для этого выбираем плашку Image, загружаем на сайт картинку в PNG и нажимаем кнопку Download.
Как установить фавикон на сайте
Рассказываем, как добавить фавикон на сайт, сделанный в конструкторе RU-CENTER, WordPress, Joomla и Tilda.
RU-CENTER
Зайдите в административную панель конструктора сайтов и выполните следующие действия:
1. Нажмите на значок настроек.
2. Выберите вкладку «Значок сайта».
3. Нажмите «Выбрать фото».
4. Откройте папку, которую вы скачали на favicon.io, выберите файл в формате ICO и загрузите его.
Готово — вы добавили фавикон на сайт.
WordPress
Зайдите в систему настроек сайта и выполните действия по алгоритму:
1. Нажмите на вкладку «Внешний вид» в столбце слева.
2. Выберите «Настроить».
3. Нажмите «Свойства сайта», затем выберите значок сайта. Обратите внимание, что WordPress советует использовать иконки размером 512 × 512 px. Добавьте иконку соответствующего размера, которую вы скачали с favicon.io.
4. WordPress покажет, как будет выглядеть фавикон. Если вид иконки вас устраивает, нажмите «Сохранить».
Если этот способ не сработал, можно добавить фавикон на сайт WordPress вручную. Для этого зайдите на сервер хостинга, где размещается ваш сайт. Учтите, что интерфейсы хостингов различаются, но алгоритм ваших действий будет одним и тем же:
1. Откройте раздел «Файловый менеджер», зайдите в папку WordPress, а затем в папку public_html.
2. Нажмите на вкладку «Файл» и выберите «Загрузить на сервер». Загрузите файл favicon.png.
Теперь нужно прописать путь к файлу в HTML-коде. Для этого откройте административную панель WordPress.
1. Зайдите в меню вкладки «Внешний вид».
2. Выберите «Редактор» — откроется HTML-код страницы.
3. В правом столбце «Шаблоны» отыщите файл заголовка header.php.
4. В коде после тега <head> вставьте строку <link rel=”icon” type=”image/png” href=”favicon.png” />.
5. Нажмите кнопку «Обновить файл».
Joomla
Откройте панель управления веб-хостингом. Отыщите там вкладку с вашим сайтом и выполните следующие действия:
1. Откройте папку template, выберите папку cassiopeia, а затем откройте папку images.
2. Нажмите кнопку «Загрузить» и выберите файлы в формате ICO, PNG или SVG, которые вы скачали с favicon.io.
3. После этого фавикон должен измениться.
Tilda
Учтите, что добавить фавикон можно только при подключении платного тарифа Tilda Personal или Tilda Business.
1. Нажмите кнопку «Настройки сайта», затем пролистайте страницу до конца и выберите вкладку «Еще».
2. Нажмите «Загрузить файл» под надписью Favicon. Можно выбрать формат ICO, PNG или SVG, рекомендованный размер файла — не больше 32 × 32 px.
Как проверить отображение фавикона
Если вы хотите убедиться, что иконка видна пользователям при поиске в «Яндексе» и Google и отображается во всех браузерах, можно сделать это следующим образом.
«Яндекс». Введите в строке браузера favicon.yandex.net/favicon/URL, где URL — это адрес вашего сайта. Фавикон должен отобразиться на странице. Например, если мы введем favicon.yandex.net/favicon/nic.ru, получим такое изображение:
Google. Введите в строке браузера www.google.com/s2/favicons?domain=URL, где URL — адрес вашего сайта. Так будет выглядеть фавикон, если ввести www.google.com/s2/favicons?domain=nic.ru:
Во время проверки в Google запись URL меняется, но фавикон остается на экране — значит, в поисковой выдаче он отображается корректно
Браузеры. На сайте Colinkeany можно проверить, как отображается фавикон в разных браузерах. Для этого введите в строке поиска URL сайта.
Система показывает, что во всех браузерах фавикон сайта nic.ru отображается правильно
Учтите, что фавикон может появиться при проверке не сразу. Иногда на это нужно несколько недель.
Правила создания фавикона: чек-лист
Итак, фавикон — это маленькая иконка, которая символизирует ваш сайт. Она отображается во вкладке браузера, в поисковой выдаче и так далее. Фавикон необязательно создавать с нуля — можно скачать готовый файл или сгенерировать изображение в сервисе вроде Favicon.io.
Требования к размеру, формату и дизайну фавикона такие:
1. Размер: от 16 × 16 px до 512 × 512 px.
2. Формат: ICO, PNG или SVG. Последний наиболее предпочтителен, но иногда можно установить только ICO.
3. Форма: квадратная или круглая. На иконке должен быть один объект, так как изображение само по себе слишком маленькое, детали отобразить не получится.