Как добавить фавикон в вордпресс. Установка плагина FavIcon Switcher. Что такое favicon

(Последнее обновление: 22.12.2018)

Привет всем! Favicon wordpress как установить ? Очень легко и просто. Как только вы блог/сайт на платформе WordPress , произвели базовую вордпресс пора подумать об установке фавикона для сайта. Процесс этот не сложный, не стоит откладывать на потом. "Потом" может не наступит ни когда. Favicon или значок сайта - это крошечное изображение, которое отображается в браузере рядом с названием вашего сайта. Это помогает вашим пользователям идентифицировать ваш сайт, а более частые посетители вашего веб-ресурса мгновенно распознают эту маленькую картинку. Это повышает узнаваемость вашего бренда и помогает вам завоевать доверие аудитории.

Установка favicon на сайт WordPress

Возможность загрузки собственной иконки favicon в самом ядре WordPress появилась совсем недавно. Начиная с версии 4.3, вы можете добавить значок сайта из админки WordPress.

Что такое favicon?

Favicon (сокр. от англ. FAVorites ICON - "значок для избранного") - значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.

Фавиконка для Яндекс

Фавиконка - это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.

Пример отображения фавиконки в результатах поиска:

Как отмечено выше, иконка идентифицирует ваш блог, то есть, его нельзя будет спутать с остальными сайтами открытыми в окне вашего браузера. Посмотрите на скриншот:

Посмотрите на мою иконку блога, я выбрал картинку вордпресс. Раз блог на этом движке и я пишу о WP, то пусть иконка будет соответствующая. А теперь перейдем к делу, к загрузке и установке картинки на WP.

Как установить favicon на WordPress

Для того, чтобы установить фавикон на вордпресс, зайдите в панель управления (консоль). В разделе Внешний вид нажмите Настроить:

Затем, на странице визуальной настройки (Customizer) сайта откройте пункт Свойства сайта:

Да чуть не забыл, картинка у вас должна быть уже подготовлена - любой формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP. Рекомендуемый размер изображения значка вашего сайта - не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, а WordPress позволит вам обрезать изображение при его добавлении. Прозрачное или с фоном, без разницы. Изображение должно быть четким и, как правило, соответствовать изображению и / или содержанию вашего сайта. Файл картинки лучше иметь с таким названием favicon

Если вам нужна картинка WordPress для значка сайта, то официальные находятся здесь - https://wordpress.org/about/logos/ .

В свойствах сайта - Иконка сайта - нажмите Выбрать изображение:

Выберите картинку на компьютере или из библиотеки медиафайлов вашего сайта. После того, как изображение загрузите, то появится предпросмотр фавиконки:

Если всё окей, то нажимайте синею кнопку Опубликовать. Откройте свой сайт и проверьте вашу проделанную работу. Я установил прозрачную картинку и у меня иконка сайта в браузере гугла выглядит так:

Учтите, что многие браузеры (а также поисковые системы) кэшируют favicon-изображения, поэтому изменения могут вступать в силу не сразу. В браузере от Google картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.

Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/ вордпресс.

Видео - Как установить Favicon WordPress

На этом, дорогие друзья, у меня все. До встречи. Пока, пока!

Приветствую уважаемый посетитель. В данной статье/уроке поговорим о иконке сайта, другими словами favicon.

Данная иконка выделяет ваш сайт wordpress от других сайтов во вкладке браузера, тем самым пользователь с легкостью сможет найти его. Вставить favicon в wordpress можно 3 различными способами, давайте разберем все.

Перед тем как перейти к установке, нам необходимо создать иконку. Для этого необходимо выбрать понравившуюся вам картинку, после чего перейти на страницу поисковой системы. В строке поиска вводим «генератор favicon онлайн» и переходим на любой сайт, к примеру pr-cy.ru

После чего нажимаем кнопку «обзор»(1), выбираем картинку, которую вы хотите использовать в качестве favicon на wordpress сайте, после чего нажимаем кнопку «создать Favicon»(2), затем «скачать»(3). Готовая иконка сайта успешно сохранена на ваш компьютер, после чего можно переходить к самой установке.

Как вставить favicon в wordpress через настройки темы wordpress:

Практически каждая снабжена своими настройками, которые предусматривают смену, либо установку favicon.ico. Необходимо перейти в настройки вашей темы, обычно расположение следующее «Внешний вид — Название вашей темы(настройки)».В настройках темы необходимо нажать кнопку «Загрузить», выбрать favicon.ico на вашем компьютере, после чего сохранить настройки темы. Таким простейшим образом вставляется favicon на wordpress через настройки темы. Если в вашей теме нет таких настроек, переходим к установке иконки favicon через плагин.

Установка,смена favicon.ico на wordpress через плагин «Insert Headers and Footers».

Использовать данный вариант установки рекомендую только в том случае, если 1 и 3 вариант вам не подошли. «Insert Headers and Footers». После чего переходим к настройкам плагина «Параметры» - «Insert Headers and Footers». В поле «script in header» вставляем следующий код:

< link rel = "icon" href = "http://адрес-вашего-сайта.ru/favicon.ico" type = "image/x-icon" />

< link rel = "shortcut icon" href = "http://адрес-вашего-сайта.ru/favicon.ico" type = "image/x-icon" />

После чего сохраняем(2).

После того, как пути к иконке прописаны необходимо перейти на хостинг и загрузить иконку favicon в корневой каталог сайта wordpress(имя вашей папки/public_html).

Если у вас не получилось установить плагин, либо после его настройки favicon не отображается, переходим к 3 варианту вставки favicon на wordpress.

Вставка favicon.ico вручную на wordpress(редактирование файла темы header.php)

Данный вариант установки следует проводить аккуратно, не повредив файл вашего шаблона. , после чего выбираем «Внешний вид — Редактор». В правой части находим файл header.php, переходим в него. До тега вставляем следующий код:

< link rel = "icon" href = "http://адрес-вашего-сайта.ru/favicon.ico" type = "image/x-icon" />

Favicon — это небольшое изображение во вкладке браузера, идентифицирующее ваш сайт. Так же оно служит добавлении вашего сайта на рабочий стол мобильного устройства для быстрого доступа. Отсутствие favicon у сайта — одна из 25 популярнейших проблем при создании сайта.

При использовании премиумных тем вероятнее всего эта инструкциям вам не понадобится, т.к. в большинстве тем, которые попадались мне на глаза, установка favicon была доступна из настроек самой темы. Посмотрите внимательно, скорее всего вы найдёте соответствующий раздел и избавите себя от чтения материала.

Почему вам стоит добавить favicon на ваш сайт?

Как уже было написано выше, данная иконка позволяет идентифицировать ваш сайт среди всех остальных открытых в окне вашего браузера. Хочу отметить, что не все браузеры показывают иконки сайтов, например, Safari не покажет, поэтому вы их попросту не увидите.

Посмотрите на изображение и сразу поймёте, как выглядят favicon сайтов в Google Chrome, например:

Или вот пример из другого браузера - Vivaldi:

Каждый из этих сайтов имеет свою уникальную иконку и можно безо всяких проблем (зная, где чья) открыть нужный сайт, не перебирая каждую вкладку и не подводя мышкой к заголовку. Всё как на ладони — нужно лишь запомнить иконки часто используемых вами сайтов. Если вы активный пользователь интернет, то у вас скорее всего в каждом браузере открыто по 30-40 вкладок. Без иконок было бы очень тяжко… :-)

Как создать favicon

В самом простом варианте — это иконка квадратного размера, в идеале 32х32 или 16х16 пикселей, которую без проблем можно сделать в Photoshop, либо любом другом графическом редакторе. Для простоты — создайте изображение размером 128х128 пикселей, а затем уменьшите масштаб до 32х32 или 16х16, качество не должно особо пострадать. Затем сохраните изображение в формат PNG.

Создаём фавикон с помощью онлайн-генератора LOGASTER

Создание фавикона онлайн не требует никаких дополнительных усилий или специальных навыков в дизайне. Среди русскоязычных хочу обратить ваше внимание на сервис Логастер .

В первую очередь, вам нужно будет создать логотип. Уже на этом этапе вы подбираете иконку, шрифт и цветовую гамму логотипа, которые также послужат основой для будущего фавикона. Процесс несложный и займёт всего несколько минут.

Когда логотип готов, выберите функцию «Создать фавиконку с этим логотипом»:

Подберите иконку, которая вам понравится. В редакторе также видно, как она будет смотреться в уменьшенном варианте. Сохранённый фавикон можно скачать в PNG и ICO форматах разных размеров.

Рисуем иконку вручную

Если вы не владеете графическим редактором и не хотите обращаться к дизайнерам на биржах труда, тогда есть второй вариант - нарисовать иконку с помощью онлайн-сервиса. Есть несколько вариантов: favicon.cc , Faviconer , DynamicDrive . Там же можно выбрать из готовых вариантов, загруженных другими пользователями.

Вот так выглядит процесс создания иконки вручную в сервисе Favicon.cc:

Установка favicon на WordPress

Есть несколько вариантов подключения иконки. Первый — самый простой и доступный практически всем с новой версией WordPress – воспользоваться инструментами нашего движка. Если настройки вашей темы имеют опцию для установки favicon — используйте её.

Третий способ - это внесение двух строк в файл вашей темы; четвёртый — использование плагинов для этой задачи. Я рекомендую попробовать сначала первый вариант, потому что держать дополнительные плагины — это не самое лучшее решение, тем более, для такой разовой операции, как favicon для сайта.

Многие некачественные бесплатные темы жёстко прописывают путь до иконки в код файла header.php. И если ни один из предложенных вариантов не срабатывает, то вам нужно открыть файл header.php в директории с вашей темой и удалить все упоминания в тексте со словом «favicon». Помогает — пробовал! :-)

Способ 1: Используем возможности WordPress

По хорошему же, если у вас версия WordPress 4.3 и новее, то вам достаточно будет загрузить графический файл размером 512х512 пикселей и через интерфейс «Внешний вид» - «Настроить» перейти в раздел «Свойства сайта». После этого загрузить ваш файл через загрузчик WordPress и он автоматически масштабируется под все необходимые размеры.

Способ 2: Использование настроек вашей темы

Во многих темах (премиумных или бесплатных) есть настройки, которые находятся в меню «Внешний вид» — «Настройки темы». В первую очередь я бы рекомендовал просмотреть все имеющиеся варианты настроек и отыскать то, что относится к favicon.

Вот так, например, выглядит эта опция в моей теме:

Раскрываем этот блок и видим следующее:

Теперь останется лишь загрузить изображение и сохранить настройки. Не перепечатывайте слепо адрес моей иконки с изображения выше - у вас будет свой адрес изображения и, скорее всего, он будет выглядеть так: http://адрес-вашего-сайта.ru/wp-content/uploads/2016/название-файла.png .

Это самый быстрый способ подключить favicon к вашему сайту!

Способ 3: Подключение в файл header.php

Загрузите созданную вами иконку на ваш хостинг, путём подключения на FTP, SSH, либо через файловый менеджер вашей хостинг-панели. Файл нужно разместить в корневой директории, чтобы он был доступен по адресу http://адрес-вашего-сайта.ru/favicon.ico , либо favicon.png, в зависимости от типа иконки.

Теперь зайдите на хостинге в директорию с вашей темой (/wp-content/themes/ваша_тема/) и откройте на редактирование файл header.php. После открывающего тега вставьте следующий код:

Либо же измените разрешение на.png, если у вас иконка этого типа.

Способ 4: Плагин «Insert Headers and Footers»

Заходим в раздел «Плагины» — «Добавить новый», в поиске вбиваем Insert Headers and Footers, устанавливаем найденный плагин и активируем его.

Если не можете найти, воспользуйтесь ссылкой на официальный репозиторий WordPress: Insert Headers and Footers . Сохраните его на компьютер и установите через ссылку «Загрузить», раздела «Плагины» — «Добавить новый».

После этого зайдите в пункт меню «Параметры» — «Insert Headers and Footers» и в области Header вставьте тот HTML код, который был приведён в пункте выше, для подключения favicon вручную.

Не забудьте нажать кнопку «Save settings» для сохранения настроек.

Способ 5: Плагин «All In One Favicon»

Если и с предыдущим вариантом у вас ничего не получилось, тогда остаётся самый последний вариант — подключить плагин с названием All In One Favicon , устанавливается он абсолютно аналогично всем остальным плагинам, поэтому по шагам писать не буду. Нюанс в том, что данный плагин не обновлялся больше трёх лет.

После установки и активации плагина, заходите в раздел меню «Параметры» - «All in one Favicon» и видим следующий экран с настройками:

Frontend Settings – это для отображения иконки при просмотре сайта со стороны посетителя; Backend Settings – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

Заключение

Если у вас не сработала установка иконки ни с одним из предложенных мною способов - напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. ;-)

Если вы хотите поблагодарить меня за материал - можете сделать это здесь:-)

Или угостить кофе;-)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter .

Как установить фавикон. Вы, наверное, обратили внимание на то, что на многих сайтах во вкладках установлена маленькая иконка? Она называется – фавикон (от англ. FAVorites ICON – «иконка для избранного»). Фавикон это индивидуальный значок веб-сайта. Он отображается браузером на вкладках и перед URL страницы. Очень симпатично, и если этот значок подобран в тему, то по этой иконке можно сразу определить, о чем сайт. Но главное, что поисковики любят, когда установлен такой значок. А раз так, то значит, его обязательно необходимо установить.

Сначала фавикон необходимо создать. Для этого заходим на сайт по изготовлению фавиконов. Сайт больше не работает. Но в интернете есть много других похожих сервисов.

• Выбираем Сделать favicon из изображения и нажимаем кнопку Выберите файл ;
• Выбираем графический файл на своем компьютере и жмем кнопку Открыть ;

• Если необходимо, редактируем картинку и жмем кнопку Далее ;

• Можно сделать фон фавикону;
• После всех необходимых манипуляций опять жмем кнопку СКАЧАТЬ FAVICON ;

• На следующей странице опять жмем кнопку СКАЧАТЬ ;

Теперь необходимо загрузить фавикон в корневую папку вашего сайта. Для этого заходите по паролю на свой хостинг, находите там в панели управления Файловый менеджер, и открываете папку с названием вашего сайта.

Вот наш загруженный файл.

Его можно закинуть в любую папку вашего сайта, но тогда необходимо будет правильно прописать путь к нему в коде, который мы пропишем для поисковиков.

Теперь идем в свою админку на WordPress, выбираем — Внешний вид – Редактор – файл Заголовок (header. php) , и вставляем код

перед тегом head> . Замените адрес http://chudokompik.ru на свой.