В статье будут подробно рассмотрены все способы установки фавикона на сайт, из которых каждый может выбрать подходящий для себя метод и с легкостью установить нужное изображение. Но вначале, пару слов о том, что же такое фавикон и какие функции он выполняет.
Что такое фавикон и зачем он нужен
Фавикон (Favicon) — небольшая тематическая картинка, которая отображается во вкладках браузера, на страницах выдачи поисковых систем и закладках интерфейса систем.
Как правило, картинка похожа на логотип сайта и включает некоторые элементы дизайна.
На результат выдачи наличие фавикона напрямую не влияет, но вот полезные функции для SEO всё же есть:
- Привлечение внимания — в поисковой выдаче сайты с фавиконом имеют некий стандарт, привычный глазу, а сайты без него выглядят неполными и кажутся меньше;
- Упрощение поиска — запомнив, как выглядит картинка сайта, можно с легкостью найти ее в закладках и истории, тем самым экономя время на чтении названий;
- Напоминание бренда — чем чаще посетителю попадается на глаза знакомая картинка, тем больше вероятность, что он зайдет на ресурс, увидев знакомое изображение.
Установка фавикона, используя возможности шаблона
Начнем с самого простого способа установки — через настройки темы из панели WordPress. Как туда зайти читайте в статье как зайти в админку WordPress и что делать, если забыли пароль
Итак, в боковом меню выбираем «Внешний вид» - «Настроить».
Заходим в раздел «Свойства сайта».
В новом окне нам рекомендуют выбрать квадратное изображение не менее 512 х 512 пикселей. Придерживаемся совета — подготавливаем картинку для загрузки и нажимаем «Выберите иконку сайта».
Здесь есть два варианта выбора изображение: загрузить с компьютера или выбрать из библиотеки уже загруженных файлов.
Если мы загружаем файл с компьютера — он все равно «упадет» в библиотеку и будет первым в списке загруженных изображений. Делаем его активным, кликнув правой кнопкой мыши и нажимаем «Выбрать» в правом нижнем углу.
В новом окне подгоняем изображение до нужных размеров, двигая границы и нажимаем «Обрезать изображение».
Смотрим, как будет выглядеть картинка, если все устраивает — публикуем ее.
Установка фавикона с помощью плагина
Использовать будем топовый плагин Favicon by RealFaviconGenerator, который имеет огромное количество скачиваний и положительных отзывов. И главное он подстраивает изображение фавикона под все виды устройств.
В панели управления WordPress выбираем «Плагины» — «Добавить новый». Затем, в поисковой строке вводим название плагина «Favicon by RealFaviconGenerator», нажимаем «Установить» и активируем его.
Далее, в меню «Внешний вид» выбираем «Favicon», загружаем нужное изображение медиабиблиотеки и нажимаем «Создание Favicon».
Система нас перекинет с административной панели WordPress на официальный сайт RealFaviconGenerator, где будет показано, как будет смотреться наш фавикон на разных устройствах и браузерах.
Здесь можно «поиграть» с фоном и размерами изображения. Если всё устраивает — пролистываем в самый низ и жмём «Generate your Favicons and HTML code».
Размещение кода в плагине Clearfy PRO
Еще один способ установки фавикона, но уже без установки плагина самого генератора, а использование функции кода Clearfy PRO.
Заходим на официальный сайт генератора и загружаем подготовленную картинку 512 х 512 в формате PNG.
Затем повторяем те же действия, что и в случае с плагином. В окне отображения иконки меняем размер, если нужно и добавляем фон. В конце жмем «Generate your Favicons and HTML code».
Система сформирует архивный файл с набором иконок «Favicon package» и создаст код.
Содержимое архивного файла нужно разместить в то же место, где находятся системные файлы index.php и wp-config.php, то есть в корень сайта. Это можно сделать возможностями хостинга через файловый менеджер, либо с помощью FTP-клиента FileZilla.
Затем, в боковом меню админки WordPress, кликаем на плагин Clearfy PRO, перемещаемся на строку «Код в <head>» и заполняем поле данными, созданными генератором. Не забываем сдвинуть вправо триггер и сохранить изменения, нажав на соответствующую кнопку в самом низу.
Добавление кода в файле header.php
Метод требует вмешательство в системный файл, поэтому перед правкой делаем бэкап сайта.
Для начала подготовим картинку размером 512 х 512, желательно PNG формата и назовем ее «favtest». Ее нам нужно будет скопировать в корень сайта. Для этого подключаемся по FTP-соединению к нашему сайту на хостинге, либо используем встроенный файловый менеджер, если таковой имеется.
Затем заходим в админку сайта, чтобы найти и открыть header.php для правки: в боковом меню выбираем «Внешний вид» — «Редактор тем» — соглашаемся с предупреждающим окном. Далее, в файлах темы ищем header.php и кликаем на него. В коде ищем закрывающийся тег </head> и перед ним вставляем следующую строку:
<link rel="shortcut icon" type="image/png" href="/favtest.png"/>
Где "image/png" — это формат вставляемой картинки, а "/favtest.png"/ - название картинки.
Если бы наша картинка была в формате JPG, к примеру, то строка "image/png" носила бы название "image/jpg", то есть:
<link rel="shortcut icon" type="image/jpg" href="/favtest.jpg"/>
Не забываем нажать «Обновить файл» и смотрим, как выглядит фавикон в браузере.
Ну вот и всё, теперь вы знаете, как быстро и легко установить фавикон на свой сайт. Если остались какие-либо вопросы — пишите в комментариях. Буду рад помочь.
