Загрузка и установка favicon на WordPress. Установка 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.ico – это небольшая картинка (иконка) в специальном формате, которая отображается рядом с адресом вашего сайта в адресной строке браузера и рядом с названием вашего сайта в «Избранном» или в «Закладках» вместо стандартной, общей для всех иконки. Эта маленькая картинка привлекает к себе внимание и кратко отражает суть вашего сайта. Формат ICO подразумевает наличие в файле нескольких картинок разных размеров и разного качества. Основной формат картинки для favicon.ico – 16х16 пикселей, 256 цветов или TrueColor. Именно эта картинка будет показываться в адресной строке браузера, на таб-баре и в «Избранном» (Закладках).

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

Создаем иконку

1. Подберите изображение, которое должно представлять ваш сайт. Сейчас не важен размер и формат картинки (если конечно она не больше 2 Мб, в этом случае ее надо бы немного уменьшить).

2. Теперь можно воспользоваться генератором иконок, например, www.favicon.co.uk или http://favicon.ru/ 3. Загрузите изображение на сайт и выберите будущий размер иконки.

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

5. Теперь переходим к установке иконки на сайт.

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

1. Быть может в папке с вашим шаблоном уже есть старая иконка, ее необходимо удалить.

2. Загрузите новый файл favicon.ico в папку вашей темы.

3. Скопируйте favicon.ico также в корень сайта (например, http://example.com/favicon.ico). Это позволит отображать иконку в RSS.

4. Чтобы иконка отображалась в некоторых старых версиях браузеров, вам необходимо отредактировать файл шаблона header.php.

5. Откройте header.php и найдите код, который начинается с . Замените его кодом, приведенным ниже. Если вы не можете найти ничего похожего, просто вставьте следующий код где-то между тегами

/favicon.ico» />

6. Сохраните изменения.

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

Кстати, сервис www.favicon.co.uk довольно неплох, единственный его недостаток в том, что иконки генерируются только со второго раза (из личных наблюдений).

Можно также воспользоваться таким вариантом. Положите иконку в основную (корневую) - предпочтительнее - или в любую другую папку вашего сайта; добавьте следующие строки в каждую страницу вашего сайта внутрь секции (не обязательно):

Что ж, думаю, инструкция очень детально и доступно все разъясняет, и будет полезна для новичков.

Оцени пост!

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

Фавикон (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), то в редакторе она отображается на черном фоне. Ничего страшного, поскольку в браузере иконка выглядит нормально.

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

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

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

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

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

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” на ваш домен.