Закрепить иконку на странице wordpress. Установка favicon на Wordpress

Favicon (сокр. от англ. FAVorites ICON - «значок для избранного», от названия папки с закладками в MSIE ) это значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вконтакте

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? Большинство начинающих вебмастеров используют именно этот движок, поэтому мы решили подробно ответить на данный вопрос.

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

Меняем фавикон на Вордпрессе

Что вообще такое Favicon, спросят некоторые новички. Это небольшой логотип, который отображается во вкладках браузера и поисковой выдаче:

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

Через поисковые системы можно найти иконки размера 32x32 или 16x16 , скачать их и установить себе Favicon на WordPress. Если хотите что-то оригинальное, тогда favicon.cc и нарисуйте иконку:

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

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

Чтобы поставить готовую иконку на свой сайт, вы можете воспользоваться одним из следующих способов:

  1. Плагин All In One Favicon .

Нет проще способа для загрузки иконки на сайт, чем использование данного плагина. Устанавливается он стандартно, а после перехода к настройкам Frontend Settings они отвечают за отображение фавикона для посетителей. Можно использовать разные форматы изображения:

  1. Настройки шаблона.

Практически во всех темах есть некоторые настройки, в том числе и функционал для добавления Favicon. Заходите в пункт «Внешний вид» и переходите на вкладку «Настройка темы». Там должен быть какой-нибудь параметр, в котором указано слово Favicon:

  1. Ручное добавление.

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

Затем открывайте папку с вашей темой /wp-content/themes/ тема/ и редактируйте файл header.php. После тега нужно вставить пару строчек:

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

Пускай установка Favicon в WordPress и не является сложной процедурой, проделать её нужно обязательно. На оптимизацию влияет каждая мелочь, а помимо добавления иконки, используйте социальные кнопки от UpToLike . Потратьте несколько минут, чтобы посетители вашего сайта могли делиться записями, лайкать их и так далее.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фавикон (favicon) – это маленький значок, который отображается рядом с url сайта в адресной строке браузера, в закладках, в некоторых поисковиках, а также в прочих элементах веб-интерфейса. Как и логотип, он является элементом индивидуального стиля вашего ресурса, повышающий его узнаваемость.

Где взять фавикон?

Вы можете сделать такой значок самостоятельно. В любом редакторе изображений создать картинку с элементами своего стиля, затем превратить ее в фавиконку при помощи простого онлайн-генератора. Старайтесь, чтобы эти элементы были достаточно крупными, и их можно было разглядеть на маленьком значке 16х16 px. Если на фавиконке будет много текста или мелких деталей, то их невозможно будет рассмотреть.

Картинку создавайте квадратной размером 512х512 px. Можно и на прозрачном (png), и на белом (jpg) фоне. Далее воспользуйтесь генератором, например этим: pr-cy.ru/favicon.

Загрузите свою картинку через кнопку «Выбрать изображение с компьютера», нажмите «Создать favicon». Вы увидите, как будет смотреться ваш значок в браузере и сможете его скачать.

Генератор уменьшает иконку до нужных размеров и придает файлу специальный формат ico.

Есть также онлайн-сервисы, позволяющие создать свою иконку. Например, favicon.ru. Он предоставляет простенький редактор для рисования фавикона при помощи заливки цветом квадратиков на полотне.

Кроме того, можно скачать уже готовый значок под тематику вашего сайта на специальных ресурсах. Один из таких – англоязычный findicons.com. Поиск иконок осуществляется по ключевым словам или облаку тегов. Для пользования сайтом вам понадобится базовое знание английского или переводчик.

Иконки можно фильтровать по цвету, лицензии на использование, прочим критериям. Есть возможность скачать иконку сразу в формате ico, а также в png, выбрав размер (самый большой 256Х256 px). Это удобно, если вы захотите ее подредактировать. Есть и другие форматы, например jpeg, но почему-то иконка скачивается в нем некорректно – с полосами, разводами.

Русский аналог – iconsearch.ru. Здесь все похоже, также ищем иконки по облаку тегов или ключевым словам, фильтруем по размерам. Скачиваем в формате png или ico.

И еще один русскоязычный сайт с иконками pngicon.ru. Упомянула его по той причине, что здесь вы найдете иконки большего размера 512х512 px в формате png. Они подходят для установки на сайт в качестве фавикона средствами Вордпресс (об этом ниже).

Установка фавикона на сайт

Итак, вы скачали фавикон в формате ico или сделали его из обычной картинки при помощи онлайн-генератора. Чтобы установить его на свой сайт, вам нужно загрузить этот значок в корневую папку сайта при помощи файлового менеджера (если он предусмотрен на вашем хостинге) или ftp-клиента (FileZilla, например).

Пример загрузки иконки через файловый менеджер :

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

Способ 2. Установка фавикона в настройках Вордпресс.

Выберите «Свойства сайта»:

Откроется возможность выбрать и загрузить изображение в качестве фавикона. Для загрузки этим способом картинка должна иметь размеры 512х512px. Если вы загрузите маленькую иконку, то она растянется и потеряет качество.

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

Если у вас еще нет фавиконки для сайта, теперь вы знаете, где ее взять и как установить. Все очень просто.

Наглядное видео к статье смотрите ниже:

Как всегда, рада вашим вопросам и комментариям.

Желаю успехов!

С уважением, Виктория Карпова



Есть вопросы?

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: