Приветствую уважаемый посетитель. В данной статье/уроке поговорим о иконке сайта, другими словами 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 — это маленькое изображение, которое находится возле названия страницы сайта в браузере. Такой значок помогает посетителям идентифицировать ваш сайт среди других, и сегодня мы расскажем, как быстро установить его на свой 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 - это лицо вашего сайта которое отображается в браузере перед названием вашего ресурса. Функциональной нагрузки фавикон не несет, но он повышает имидж и визуальную привязанность к вашему сайту. Сегодня мы попробуем разобраться, как установить favicon WordPress сайта, быстро и без всяких проблем.
Рассудите сами как бы происходил поиск нужной вкладки, если бы было открыто хотя бы 10 одновременно в браузере и все они выглядели идентично? Именно для такого зрительного различия и был придуман и внедрен favicon.
Обновление от 19.08.2015. В новой версии WordPress 4.3 существует способ добавления любой картинки и создание иконки сайт а .
Создание иконки для WordPress сайта
Урок из цикла посвященного базовым , поможет вам сделать все правильно и не переплачивать лишние деньги.
Фавикон - графическое изображения размером 16×16 или 32×32 пикселя, внедренное в ваш сайт в формате ico или png картинки возле названия вкладки.
Для того, что бы установить favicon WordPress сайта существует несколько способов:
- Нарисовать изображение в графическом редакторе самостоятельно.
- Найти подходящее изображение и изменить его размер до нужного.
- Создать favicon в онлайн режиме.
- Заказать у дизайнеров уникальную «этикетку».
- Плагин для иконки.
Давайте разберем все по порядку.
Способы создания favicon для WordPress сайта
Что бы нарисовать самостоятельно иконку не нужно быть великим художником, если вы знаток Photoshop тогда у вас не возникнет проблем, но даже если вы кроме стандартного Peint от Windows больше никакими знаниями рисования не владеете, то и это не беда. Попробовав один раз сделать иконку такого малого размера, вы убедитесь в том, что не все так плохо как казалось. Но опять же все зависит от вашей фантазии.
Я думаю что бы нарисовать что-нибудь подобное, вам не нужны навыки дизайнера, это изображение было создано в peint размером 400×400, теперь изменим до нужного нам размера 16×16 и сохраним в формате ico. Что же у нас получится в итоге? 
Как видим это не так и страшно выглядит, но потратив немного времени в более качественном графическом редакторе можно получить достаточно хороший уникальный favicon.
Если у вас есть на примете подходящее изображение для favicon тогда вам стоит только залить его в любой редактор и изменить его размер, сохранить в нужном формате, все ваши труды закончились, после того как мы пропишем путь к favicon на сайте WordPress она будет рабочей и доступной.
Одним из таких сайтов для создания иконки сайта является pr-cy.ru куда можно закачать вашу картинку и уже забрать в нужном размере и формате.
Создать favicon онлайн очень просто, для этого существует множество сервисов и приложений. Единственный недостаток это примитивизм данного способа, но если вы не преследуете цели высокого качества изображения тогда это лучший способ для вас.
Лучший сайт на котором можно создать иконку для сайта в онлайн режиме это favicon.cc. Это англоязычный бесплатный сервис, позволяющий рисовать в простейшем поле, с небольшим набором инструментов.
Но если захотеть и немного постараться, то можно получить достаточно хорошую работу в итоге.
Заказать иконку у дизайнеров будет стоить вам денег, перед тем как это делать подумайте трижды и попробуйте самому все сделать, лучше пустите эти деньги на продвижение сайта.
Плагин для установки favicon даже рассматривать не буду, зачем нам засорять и замедлять наш сайт если вся и так проще некуда для внедрения.
Что бы установить favicon в наш сайт на WordPress нужно скачать файл header.php с нашего сервера и прописать в него следующие строки между тегами
Файл с изображением должен быть в корневой папке сайта, если же его размещаем в другой каталог тогда нужно прописывать к нему путь.
Начиная с версии 4.3 можно устанавливать иконку сайта непосредственно с визуального редактора страниц. Так же благодаря данному обновлению размер и картинки больше не важно, программа сама отредактирует и сделает все как нужно.
Как установить Favicon WordPress можно посмотреть в следующем видео уроке:
Сделали? Все на этом данный урок закончен и цель достигнута, вы разобрались как устанавливать Favicon WordPress.
Вы можете продолжать изучать наши и стать специалистом в разработке сайтов на данной платформе.
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/
Иконка для сайта сама по себе с первого взгляда кажется незаметной мелочью, которую можно проигнорировать. Но это не так! Многие современные и очень успешные ресурсы узнаются людьми за счет картинки favicon, которая отображается в поисковой выдаче Яндекса.
Что же такое favicon?
Favicon – это картинка размером 16х16 пикселей, которая имеет расширения «.ico».
Именно этот небольшой графический элемент создает вам дополнительный пиар в интернете. Для того чтобы создать это изображения вам потребуется всего 10 – 15 минут, но эффект вы получите значительный.
Узнаваемость – это основной принцип действия иконки сайта.
Методы создания favicon для движка WordPress
Сейчас мы с вами рассмотрим основные сервисы, которые можно использовать для того чтобы сделать иконку для сайта. Во-первых, можно классифицировать их на две группы: онлайн сервисы и десктопные программы.
Онлайн сервисы
Существует огромное количество таких онлайн сервисов, но все они имеют разный функционал. Наиболее популярным сервисом в рунете является – favicon.ru.
Давайте рассмотрим, какой функционал он предоставляет. В первую очередь – это генерация иконки из готового изображения, например, из логотипа вашего сайта. При этом присутсвует функция корректировки готово файла, что не может не радовать.
Также, вы можете самостоятельно нарисовать favicon для своего сайта.
Как видно из картинки, вы можете выбрать цвет, делать заливку, стирать ненужные пиксели, двигать ваш рисунок и при этом всем, сразу же наблюдать ваш favicon в действии в поле «Предпросмотр».
Очень удобный сервис.
Еще можно вделить:
www.favicon.cc – этот сервис является копией предыдущего, или предыдущей этого, я уже не вникал в подробности. Они даже внешне похожи.
www.degraeve.com – вот вам еще один, довольно многофункциональный онлайн сервис для генерации иконок для сайтов, но только зарубежный. Разобраться в нем думаю, будет не сложно, там все понятно чисто на интуитивном уровне.
Десктопные сервисы
Из десктопных сервисов, которые перегоняют картинки в формат «.ico» и делают размер иконки 16х16 пикселей можно выделить: IcoFX, Photoshop.
Но, честно говоря, работать с онлайн сервисами намного проще.
Я не хочу заморачиватся с созданием favicon для своего блога на WordPress, что мне тогда делать?
Специально для вас, никто не отменял галереи favicon’ов. Вы запросто можете скачать картинки на любой вкус абсолютно бесплатно. Где же это можно сделать?
Favicon.cc - эта галерея насчитывает просто огромное количество фавиконов на любой вкус и разные тематики. В наличии имеются и анимированные иконки.
audit4web - галерея сбольшим количеством иконок для сайта, включает в себя более 15000 изображений.
С тем, где взять фавикон мы разобрались. Теперь давайте рассмотрим, как установить favicon на WordPress .
Для начала вам нужно заказать готовое изображение в папку вашего шаблона, он находится по адресу — /wp-content/themes/имя вашей темы .
После чего нужно вставить одну строчку кода между тегами
./favicon.ico"/>
Для этого переходим в раздел «Внешний вид» — «Редактор» , ищем, справа шаблон (header.php), у всех он может называться по-разному, и нажимаем на него.
