Установка favicon на Wordpress. Загрузка и установка favicon на WordPress

15.06.2019

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

Зачем вообще нужен favicon? Ведя поиск в интернете, часто пользователи открывают множество вкладок в браузере. С большим количеством вкладок названия страниц сайтов будут спрятаны. Если вы установите favicon, то пользователь сможет отыскать ваш сайт без необходимости проверять каждую открытую вкладку. Это улучшает удобство работы с сайтами и поможет узнаваемым среди пользователей.

Как создать favicon

Лучше всего в качестве фавикона использовать логотип вашего сайта или бренда. Обратите внимание, что фавикон отображается маленьким значком, поэтому не стоит использовать в нем очень мелкие графические элементы, иначе он будет непонятен пользователям.

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

Установка favicon на WordPress может осуществляться несколькими методами. Рассмотрим каждый из них.

Метод 1. С помощью панели управления WordPress

Если у вас версия Wordpress 4.3 и выше, вы можете добавить favicon непосредственно в администраторской панели управления: выполните вход в панель управления WordPress и перейдите в меню Внешний вид >> Настроить .

Вы попадете в меню Настройки текущей темы вашего сайта. Теперь перейдите в меню Свойства сайта .

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

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

После этого не забудьте нажать на кнопку Сохранить и опубликовать .

Теперь вы можете открыть ваш сайт и увидеть добавленный favicon.

Метод 2. С помощью плагина All In One Favicon

Для начала нужно установить сам плагин. Перейдите в меню Плагины >> Добавить Новый и установите All In One Favicon.

После установки плагина, перейдите в меню Настройки >> All in one Favicon .

Загрузите изображение в строках ICO Frontend и ICO Backend, а затем сохраните настройки.

Теперь обновите страницу вашего сайта и вы увидите добавленный favicon.

Метод 3. С помощью изменения header.php файла

Выполните вход в контрольную панель вашего хостинга. Рассмотрим этот пример на .

Перейдите в меню cPanel >> Диспетчер файлов .

Найдите корневую директорию сайта и загрузите favicon с вашего локального компьютера. Убедитесь, что загружаемый файл называется favicon.ico.

После этого favicon должен отобразиться автоматически.

Однако в некоторых случаях вам необходимо будет внести ручные изменения. Всё зависит от особенностей вашей .

Важно: перед тем, как вносить какие-либо изменения, убедитесь, что у вас есть резервная копия темы.

Перейдите в меню Внешний вид >> Редактор .

Выберите для редактирования Заголовок Темы (файл header.php) .

Отредактируйте или добавьте следующие строки в код, как это показано на скриншоте:


Не забудьте поменять “yourdomain.com” на ваш домен.

Favicon для сайта WordPress можно установить разными способами. Я уже рассказывал, как при помощи плагинов и установить специальные коды в шаблон сайта. В этой статье я опишу еще один способ установки favicon для сайта WordPress. Установим специальный код в файл functions.php шаблона.

Вступление

Favicon для сайта WordPress (favorites icon) или иконка сайта, придает сайту индивидуальность и, через узнаваемость закладок, может влиять на его посещаемость. Однако, неудачно установленный favicon может увеличивать время загрузки сайта. В этой статье рассмотрим установку иконки сайта через файл functions.php.

favicon для сайта WordPress: этапы установки

Одним из вариантов установки иконки является размещение иконки в корневом каталоге, с добавлением кода в файл functions.php . Для этого способа установки favicon на сайт нужно сделать три шага.

  • Сделать картинку favicon.ico на любом генераторе favicon;
  • Загрузить картинку favicon.ico в корневой каталог сайта;
  • Поместить код в файле functions.php.

Остановимся на каждом шаге подробнее.

Сделать картинку favicon.ico на любом генераторе favicon

В статье я подробно рассказывал, как сделать картинку favicon.ico. В этом нет ничего сложного. Делается она на любом генераторе иконок, в режиме on-line. Не требуется устанавливать на компьютер дополнительных программ. Делается картинка в формате .ico из картинки любого размера и любого формата.

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

Еще один расширенный инструмент для создания иконок это favicon.ru .На нем можно не только рисовать, но и заказать изготовление уникального favicon.

Мало? Держите список сервисов для создания иконок:

Iconfinder.com
freepik.com/free-icons
fian.my.id
ru.iconka.com
genericons.com
materialdesignicons.com
flaticons.net
iconbird.com
iconizer.net
webhostinghub.com
iconspedia.com
iconsearch.ru
icons8.com
glyphicons.com
findicons.com
icomoon.io
iconarchive.com
themify.me
fontawesome.io
thenounproject.com
flaticon.com
fontello.com

Загрузить картинку favicon.ico в корневой каталог сайта

Сделанный Favicon для сайта WordPress, при помощи FTP соединения, закачиваем в корневой каталог вашего сайта, скорее всего в папку или .

Проверьте, чтобы в этой папке не было старых иконок. Если они есть, удалите их. Жалко удалять, переименуйте. Также проверьте папку с рабочим шаблоном. Из нее также удалите файл ico если есть.

Разместить код в файле functions.php

Остается поместить код в шаблоне сайта. Для этого авторизуемся в административной панели. В консоли открываем: Внешний вид →Редактор.

В редакторе справа из списка файлов шаблона доступных для редактирования, ищем файл . Открываем его для редактирования. Не забывайте, перед редактированием сделать резервную копию сайта. Также, без опыта, редактируйте файлы на из консоли, а в любом текстовом редакторе, например, Notepad++.

В любое место раздела THEME SETUP вставляем следующий код

// add a favicon to your function my_favicon() { echo ""; } add_action("wp_head", "my_favicon");

Не забываем сохраняться.

После перегрузки страницы сайта иконка появляется рядом с вашим сайтом. Если вы удалили все «чужие» иконки из каталога сайта, включая каталоги тем, а ваша иконка все равно не появляется, очистите кэш вашего браузера.

На этом все! Тему Favicon для сайта WordPress закрываю. На сайте получились три статьи, где я рассказывал о трех вариантах установки уникальной иконки на свой сайт WP. Читать другие статьи.

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

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

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

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

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

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

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

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

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

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

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

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

Не забудьте после всех этих действий обновить свою страницу в браузере.

Вот мы и установили фавикон на свои страницы.

Посмотрите видео о том, как установить фавикон на сайт:

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

Фавикон – небольшая тематическая картинка – придаст вашему сайту индивидуальность и выделит его в браузере среди других веб-страниц. Установить фавикон для сайта на WordPress можно несколькими способами.

Фавикон (от английского словосочетания favorite icon) – это маленькая квадратная картинка, которая визуально представляет ваш сайт и отображается в ярлыках страниц в браузере, в закладках на страницу, и в адресной строке рядом с именем сайта. Правильно подобранный фавикон соответствует логотипу сайта или тематике информации, которая на нем содержится. При взгляде на фавикон пользователь должен безошибочно определять ваш сайт среди остальных, даже не видя его названия. Наш фавикон в закладке браузера выглядит так:

В качестве формата файла для фавикона в современных браузерах используются ico, png или gif. Некоторые браузеры поддерживают загрузку иконки в формате jpg, а Opera и Firefox могут отображать анимированный gif. Картинка фавикона бывает разных габаритов, обычно применяются размеры 16x16, 32x32, 48x48, 64x64, 128x128 или 512x512 пикселей. Для сайтов, предназначенных для просмотра на мобильных устройствах, размер иконки может отличаться.

Как сделать фавикон для сайта онлайн?

Если на вашем сайте отсутствует фавиконка, картинку для фавикона можно подобрать в интернете или нарисовать самостоятельно в специальном онлайн-сервисе для генерации иконок.

Например, favicon.ru предлагает выбрать цвет, создать картинку на квадратном поле и сохранить ее на свой компьютер.

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

Виртуальный хостинг сайтов для популярных CMS:

Поставить favicon средствами ВордПресс

Обычно фавикон можно установить, регулируя настройки сайта в админ-панели WordPress.

  1. В меню «Внешний вид» войдите в пункт «Настроить» и выберите «Свойства сайта».
  2. В предложенном списке действий можно настроить отображение иконки сайта. Нажмите кнопку «Выбрать изображение» и загрузите файл с нужной картинкой.
  3. Чтобы применить настройку к сайту, нажмите кнопку «Сохранить и опубликовать». Убедитесь, что на ярлыке страницы в браузере появился фавикон.

Вставить фавикон используя возможности WordPress шаблона

В некоторых темах WordPress заложена дополнительная возможность по установке иконки сайта.

  1. Войдите в меню «Внешний вид» и выберите пункт «Настроить».
  2. Дальнейший путь к настройкам зависит от используемого шаблона. Как правило, фавикон устанавливается в общих настройках темы. Найдите соответствующую команду и загрузите файл с картинкой.
  3. Не забудьте подтвердить изменения нажатием кнопки «Сохранить и опубликовать».

Добавить в файл header.php

Если не удалось установить фавикон встроенными средствами WordPress, использование иконки для сайта можно напрямую прописать в файле заголовка header.php. Для внесения изменений в этот файл используйте редактор кода, например, встроенный редактор WordPress.

  1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
  2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
  3. В списке шаблонов откройте файл заголовка header.php (3).
  4. После открывающего тега вставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
  5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.

Установка favicon используя плагин Favicon by RealFaviconGenerator

Для подключения фавикона в WordPress разработаны специальные плагины, позволяющие автоматически загрузить иконку на сайт.

В меню «Плагины» выберите пункт «Добавить новый». Найдите, установите и активируйте плагин Favicon by RealFaviconGenerator. Затем зайдите в меню «Внешний вид» (1), после установки плагина в нем появится пункт Favicon (2) для загрузки иконки. Нажмите кнопку «Выберите из библиотеки мультимедиа» (3) и укажите расположение файла с иконкой на вашем компьютере. Нажмите кнопку «Генерировать favicon» (4).

Из админки WordPress вас перебросит на официальный сайт плагина, где вы сможете настроить способ отображения иконки (5) для нового или работающего сайта, указать алгоритм сжатия и масштабирования картинки.

Внесите изменения при необходимости и нажмите кнопку генерации фавикона (6). После этого вы снова вернетесь в админ-панель, а плагин автоматически установит выбранный фавикон.

Почему лучше установить без использования плагина?

Для сохранения фавикона в качестве иконки сайта плагин должен оставаться активным. При его деактивации фавикон отображаться не будет.

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

И где можно скачать готовые иконки для сайта ico. Надеюсь, вы уже подобрали себе подходящую картинку? Если нет, то в следующей статье я расскажу, с помощью онлайн генераторов. Не пропустите. Сегодня же поговорим о том, как установить favicon на сайт или заменить его, если он вам не нравится. Эта процедура одинакова для любых веб-ресурсов, но я покажу весь процесс установки на примере CMS WordPress.

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

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

При установке иконок для сайта возможны три варианта развития событий:

  1. из админки блога Вордпресс, используя настройки шаблона;
  2. обычная установка без плагина;
  3. с помощью плагина.

Вставляем фавикон на блог из админки

Это самый простой способ. Во многих премиум-шаблонах WordPress есть возможность устанавливать логотипы и иконки. Для этого идем в настройки темы, выбираем нужный файл на компьютере и жмем “Загрузить “. Сохраняем изменения и любуемся результатом. В моей теме можно загружать картинки в формате png или gif размером 16х16.

Установка favicon на сайт без плагина

Допустим, что у нас уже есть готовый фавикон. Это может быть картинка с любым названием в форматах GIF, JPEG, PNG или BMP. Однако напомню, что лучше всего, если это будет файл изображения в формате.ICO с размером 16×16 пикселей favicon.ico . Переименуйте, если у вас не так.

Добавить Favicon на сайт очень легко. Надо просто скопировать его в корневую директорию сайта по FTP. На Вордпресс это папка public_html (там, куда устанавливали robots.txt). Как заливать файлы на хостинг с помощью FTP-клиента FileZilla, читаем .

В принципе, можно больше ничего не делать. Современные браузеры сами найдут пиктограмму, если она расположена в корневой папке блога. Но мы ведь хотим, чтобы наша иконка отображалась и в поисковой выдаче. Поэтому, будет лучше, если указать специальному роботу Яндекса путь к файлу favicon.ico. Для этого в html-коде страниц блога между тегами надо прописать такой код:

В данном примере файл находится в корне сайта, а его адрес прописан в виде относительной ссылки. Если вы загрузили картинку в другую папку, то укажите полный путь к ней в атрибуте href . Если картинка не в формате.ico, то укажите это в атрибуте type , заменив x-icon на нужный формат.

Многие советуют вставлять обе строки, но я считаю это лишним и советую прописывать только верхнюю строчку. Поясню, для Internet Explorer пишем значение “shortcut icon “, остальные браузеры понимают “icon “, которое уже входит в это значение.

Как прописать код favicon для WordPress :

  • Идем в админку “Внешний вид ” – “Редактор “.
  • Открываем файл header.php.
  • Вставляем код до закрывающего тега .
  • Жмем “Обновить файл “.

Как поменять иконку сайта

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

Если картинка расположена в другом месте, то делаем следующее:

  • Открываем в браузере код страницы сайта (Ctrl+U).
  • Ищем строку, где прописан адрес фавикона.
  • Заменяем файл по указанному адресу.

Почему не отображается favicon

Если favicon не отображается в браузере после установки или замены, надо:

  • перезапустить браузер;
  • обновить кеш;
  • проверить правильность пути к пиктограмме сайта.

В поисковой выдаче Яндекса favicon появится только после того, как сайт посетит специальный робот. После этого фавиконка преобразуется в формат PNG и добавляется на сервер Яндекса по адресу http://favicon.yandex.. Чтобы увидеть иконку своего сайта, замените имя моего домена своим. Бывает, что Яндекс долго не отображает пиктограмму в выдаче. Надо подождать и, если через месяц иконка не появится, можно задать вопрос в тех.поддержку.

Easy Favicons – Wordpress плагин для установки фавикона

Считаю, что использовать плагин для установки favicon на WordPress, это лишнее. Тем не менее, такая возможность для особо ленивых есть. Существует много подобных плагинов, но я покажу один, которым сам когда-то пользовался. Он называется Easy Favicons . Скачать его можно по .

Устанавливаем и активируем плагин (). Открываем в админке страницу с настройками.

Как видно выше, есть возможность установить фавикон тремя способами:

  1. использовать свой Gravatar;
  2. указать путь к картинке;
  3. выбрать иконку для сайта из установленного набора.

Вот и все дела. Теперь, надеюсь, понятно, как установить фавикон на сайт. Какой бы способ вы не выбрали, помните, что любой популярный сайт должен иметь свою узнаваемую иконку. Кроме того, ее можно периодически обновлять. Например, во время каких-то интересных событий или праздников. Представьте, если под Новый год человеку в поиске попадется ваш блог с картинкой Деда Мороза. Это может лишний раз привлечь внимание пользователя и заставить его выбрать именно ваш ресурс.

Ну вот, хотел покороче, получилось, как всегда. А как вы установили favicon на свой сайт?