Favicon wordpress как установить плагин. Как добавить и установить Favicon WordPress, простейший способ

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. Читать другие статьи.

Все ещё переходя с сайта на сайт можно заметить, что многие из них не используют иконку именуемую – favicon. Хотя иконка чуть ли не последняя вещь необходимая для сайта, она всё же придает чувство завершенности в дизайне. Так что, если у вашего сайта всё ещё установлена стандартная иконка, эта статья для вас.

Информация для вас не будет новой, но давайте взглянем правде в глаза – если вы хотите, чтобы к сайту относились серьёзно, вам следует поставить favicon.ico Подумайте сами, ведь когда у вас открыто много вкладок, вы сами ориентируетесь по иконкам сайта.

Давайте сразу приступим к делу.

Что такое Favicon?

Favicon происходит от «favorites icon», то есть “значок избранного”, и представляет собой значок сайта или страницы. Отображается браузером в адресной строке перед URL-адресом страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Чтобы увидеть пример, просто взгляните на закладку страницы:

Еще, фавиконка отображается в результатах поисковой выдачи:

Для чего он нужен?

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

Для чего моему сайту нужен Favicon?

В общем-то, это личный вопрос, но учитывая то, насколько легко они устанавливаются, мы настоятельно рекомендуем вам использовать эти иконки. Кроме того, как уже было выше сказано, с favicon’ом ваш сайт смотрится полностью завершенным.

Как сделать Favicon?

Выберите изображение, которое точно и лаконично может описать ваш сайт. Потом, с помощью графического редактора (Photoshop, GIMP) уменьшите размер изображения до 16×16 пикселей. Сохраните ваш шедевр в формате.png.

Прежде чем добавить значок на ваш сайт, вы должны сконвертировать его в файл с расширением “.ico”. Для этого посетите сайт .

Инструкция по конвертации:

1. Просто загрузите ваш.png файл на faviconr.com.
2. Всю работу за вас сделает сервис Faviconr.
3. Вам остается просто скачать, ну и запомнить, куда вы его сохранили.

Как добавить Favicon на WordPress?

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

<-link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />-

Если ваш сайт на WordPress, вы найдёте эти теги в файле «-header.php»-. Вот и всё, теперь у вашего сайта есть Favicon!

Два видео-урока по теме иконок сайта:

Favicon на вашем сайте, такая же неотъемлемая часть, как и всё оформление в целом. Но новички часто об этом забывают, а порой просто не знают, что это вообще такое. Так вот, favicon , а если быть точным, то favicon.ico — это маленькая квадратная картинка на вкладке в браузере. Вот она:

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

​

Возьмите на заметку: Стандартным размером favicon.ico является 16*16 пикселей.

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

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

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

Для загрузки нажимаем на import image .

​
Галочку ставим на второй выбор и загружаем картинку. Жмём upload .

​
Картинка загружена, листаем вниз и скачиваем favicon .


Скачанный файл любым удобным для вас способом закиньте в корень сайта. После этого переходите на ваш блог Консоль -> Внешний вид -> Редактор .

Ищем Заголовок (header.php) и после тега вставляем этот код, заменяя на ваш сайт. Сохраняем.

​
Готово! Переходим на любую страницу и любуемся полученным результатом!

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 повышает привлекательность вашего сайта WordPress в браузере. WordPress плагины для Favicon включают инструменты для изменения Favicon без изменения кода темы и позволяют загружать свой собственный фавикон или генерировать динамический фавикон для любых платформ.

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

На сайте я уже писал статью, темы. В этой статье предложу несколько плагинов для создания иконок вашего сайта WordPress.

Плагин FavIcon Switcher

Страница плагина: https://ru.wordpress.org/plugins/favicon-switcher/ . Данный плагин не тестировался с последними 3 значительными выпусками WordPress.

При помощи плагина FavIcon Switcher вы сможете установить несколько иконок для различных функциональных страниц.

• Можно поставить favicon по умолчанию на весь сайт,
• Можно установить отдельную иконку для admin панели,
• Для страниц с любыми выбранными словами, находящимися в URL страниц.

Количество иконок не ограничено. Работает плагин на основе правил созданных URL match (может найти URL-адрес в тексте, с протоколом или без него). Локализован для русского языка частично. Картинки для иконок загружаются в папку: /wp-content/uploads/favicon/

Установка плагина FavIcon Switcher

Создает и размещает любые картинки форматов ico, png, gif в качестве иконок вашего сайта. Определены два места размещения иконок: на фронтальной (общедоступной) части сайта и в admin панели сайта.

Загружать картинки для иконок можно как по URL картинки, так и непосредственно с вашего (локального) компьютера. Размер картинки не имеет значение. Плагин русифицирован не полностью. Картинки для иконок загружаются в папку: /wp-content/uploads/Год /Месяц

Год и Месяц в патче это папки загрузки всех фото сайта, если вы поставили галочку в настройках Параметры >>>Медиафайлы.

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

Настройка плагина All In One Favicon

Для настройки плагина необходимо войти: Консоль→Параметры→ All In One Favicon . В открывшемся окне загружаем нужные картинки для favicon сайта, и, конечно же, сохранить все сделанные изменения.

Еще плагины WordPress для установки favicon.

Favicon by RealFaviconGenerator

Страница плагина: https://ru.wordpress.org/plugins/favicon-by-realfavicongenerator/

Этот уникальный плагин создает динамический фавикон для любого браузера и любой платформы, включая Windows 8 и платформы для мобильных устройств.

Создавайте и настраивайте иконку сайта для настольных браузеров, iPhone / iPad, устройств Android, планшетах Windows 8 и других. За считанные секунды создайте иконку, которая отлично смотрится на всех основных платформах.

Custom Favicon

Страница плагина: https://ru.wordpress.org/plugins/custom-favicon/ . Плагин обновлялся в начале 2015 года и плагин не тестировался с последними 3 значительными выпусками WordPress.

Простой плагин для генерации и добавления пользовательского фавикона для сайта WordPress.

Вывод

Как всегда WordPress предлагает два принципиальных варианта выполнения задачи. В данном случае была задача сделать favicon для сайта. Можно установить favicon вставив код в шаблон сайта (об этом читать в отдельной статье — ссылка вверху) или использовать плагины WordPress для установки favicon.

Свежие плагины

Еще плагины WordPress для установки favicon, протестированный на версии WP 4.9.5.

Genie WP Favicon

• https://ru.wordpress.org/plugins/genie-wp-favicon/

Very Simple Favicon Manager

• https://ru.wordpress.org/plugins/very-simple-favicon-manager/

azurecurve Multisite Favicon

• https://ru.wordpress.org/plugins/azurecurve-multisite-favicon/

PWD WP Favicon

• https://ru.wordpress.org/plugins/pwd-wp-favicon/