Favicon wordpress как установить плагин. Установка favicon на Wordpress
Фавикон – это маленький элемент дизайна, который помогает отличать сайты друг от друга, и позволяет их легко запоминать, то есть это брендовость. В этой статье я вам покажу, как правильно установить фавикон в WordPress, а также покажу, где найти его и как сделать самому.
Фавикон – это маленькое изображение, которое появляется во вкладке браузера и в поисковой выдаче перед заголовком сайта.
То есть, это элемент вашего сайта, который играет в пользу его узнаваемости. Когда в браузере открыто множество вкладок, фавикон помогает отличить один сайт от другого. А когда ваш сайт видя в поисковой выдаче, его сразу узнают.
Как вставить фавикон в WordPress
Для того чтобы вставить фавикон в WordPress, найдите или сделайте его, и загрузите на свой сайт в корневую папку. После этого поместите в файл активированного шаблона после тега
один из следующих кодов:#для иконки в форме.ico: #для иконки в форме.png: #для иконки в форме.gif:
где httр://examnple.com/favicon.ico – это путь к файла иконки с расширением.
После этого можно проверить, как отображается это изображение.
Если иконки в WordPress не видно после установки кода, то очистите кеш вашего браузера и повторите попытку.
В некоторых темах WordPress уже прописан нужный код для фавикон. Поэтому, прежде чем ставить код, попробуйте загрузить файл с именем favicon.ico в корень сайта. Если иконка появится, считайте – дело сделано. А также, непосредственно в настройках многих тем можно установить иконку для сайта.
Требования для фавикон
Прежде, чем устанавливать фавикон в WordPress, вам следует узнать о том, какие требования к этой картинке предъявляются. Их соблюдение позволит корректно отображать иконку сайта во всех браузерах и на всех устройствах.
- Размер фавикон должен быть 16х16 или 32х32 пикселей. Делать больше не рекомендуется и смысла мало, в браузере картинка всё равно будет маленькой. Слишком большая картинка может отображаться не везде.
- Формат изображения должен быть.ico, .png или.gif. Рекомендуется.ico.
- Частенько можно видеть сайты с анимированными иконками. Выглядит красиво, но смысла мало. Тем более что сегодня такие иконки отображаются корректно только в FireFox.
- Не нужно делать какую-то сложную картинку в фавикон. Помните, что она будет очень мелкой. В таком размере хорошо будет смотреться какой-то логотип или буква.
Как сделать фавикон
Для того чтобы сделать фавикон в 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. Хотя иконка чуть ли не последняя вещь необходимая для сайта, она всё же придает чувство завершенности в дизайне. Так что, если у вашего сайта всё ещё установлена стандартная иконка, эта статья для вас.
Информация для вас не будет новой, но давайте взглянем правде в глаза – если вы хотите, чтобы к сайту относились серьёзно, вам следует поставить favicon.ico Подумайте сами, ведь когда у вас открыто много вкладок, вы сами ориентируетесь по иконкам сайта.
Давайте сразу приступим к делу.
Что такое Favicon?
Favicon происходит от «favorites icon», то есть “значок избранного”, и представляет собой значок сайта или страницы. Отображается браузером в адресной строке перед URL-адресом страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Чтобы увидеть пример, просто взгляните на закладку страницы:
Еще, фавиконка отображается в результатах поисковой выдачи:
Для чего он нужен?
С помощью значка пользователь может легко определить, на каком сайте он находится. Эти иконки используются практически во всех современных браузерах и часто в других сервисах, например, в RSS-читалках и приложениях для управления закладками.
Для чего моему сайту нужен Favicon?
В общем-то, это личный вопрос, но учитывая то, насколько легко они устанавливаются, мы настоятельно рекомендуем вам использовать эти иконки. Кроме того, как уже было выше сказано, с favicon’ом ваш сайт смотрится полностью завершенным.
Как сделать Favicon?
Выберите изображение, которое точно и лаконично может описать ваш сайт. Потом, с помощью графического редактора (Photoshop, GIMP) уменьшите размер изображения до 16×16 пикселей. Сохраните ваш шедевр в формате.png.
Прежде чем добавить значок на ваш сайт, вы должны сконвертировать его в файл с расширением “.ico”. Для этого посетите сайт .
Инструкция по конвертации:
- Просто загрузите ваш.png файл на faviconr.com.
- Всю работу за вас сделает сервис Faviconr.
- Вам остается просто скачать, ну и запомнить, куда вы его сохранили.
Как добавить Favicon на WordPress?
Раз у вас уже есть.ico-файл, пришло время установить его на свой сайт. Вам нужно загрузить его в корневой каталог на сервере..ico, то должны увидеть ваш Favicon, только этот пример в случае с нашим доменом, у вас будет другой домен, но путь к файлу должен быть аналогичный.
<-link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />-
Если ваш сайт на WordPress, вы найдёте эти теги в файле «-header.php»-. Вот и всё, теперь у вашего сайта есть Favicon!
Два видео-урока по теме иконок сайта:
(Последнее обновление: 22.12.2018)
Привет всем! Favicon wordpress как установить ? Очень легко и просто. Как только вы блог/сайт на платформе WordPress , произвели базовую вордпресс пора подумать об установке фавикона для сайта. Процесс этот не сложный, не стоит откладывать на потом. "Потом" может не наступит ни когда. Favicon или значок сайта - это крошечное изображение, которое отображается в браузере рядом с названием вашего сайта. Это помогает вашим пользователям идентифицировать ваш сайт, а более частые посетители вашего веб-ресурса мгновенно распознают эту маленькую картинку. Это повышает узнаваемость вашего бренда и помогает вам завоевать доверие аудитории.
Установка favicon на сайт WordPress
Возможность загрузки собственной иконки favicon в самом ядре WordPress появилась совсем недавно. Начиная с версии 4.3, вы можете добавить значок сайта из админки WordPress.
Что такое favicon?
Favicon (сокр. от англ. FAVorites ICON - "значок для избранного") - значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.
Фавиконка для Яндекс
Фавиконка - это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.
Пример отображения фавиконки в результатах поиска:
Картинка, которая отображается в сниппете в результатах поиска Яндекса
Как отмечено выше, иконка идентифицирует ваш блог, то есть, его нельзя будет спутать с остальными сайтами открытыми в окне вашего браузера. Посмотрите на скриншот:
Фавиконы открытых сайтовПосмотрите на мою иконку блога, я выбрал картинку вордпресс. Раз блог на этом движке и я пишу о WP, то пусть иконка будет соответствующая. А теперь перейдем к делу, к загрузке и установке картинки на WP.
Как установить favicon на WordPress
Для того, чтобы установить фавикон на вордпресс, зайдите в панель управления (консоль). В разделе Внешний вид нажмите Настроить:
Консоль WordPress - настроить свой сайт
Затем, на странице визуальной настройки (Customizer) сайта откройте пункт Свойства сайта:
Настройка сайта - Свойства сайта WordPress
Да чуть не забыл, картинка у вас должна быть уже подготовлена - любой формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP. Рекомендуемый размер изображения значка вашего сайта - не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, а WordPress позволит вам обрезать изображение при его добавлении. Прозрачное или с фоном, без разницы. Изображение должно быть четким и, как правило, соответствовать изображению и / или содержанию вашего сайта. Файл картинки лучше иметь с таким названием favicon
Если вам нужна картинка WordPress для значка сайта, то официальные находятся здесь - https://wordpress.org/about/logos/ .
В свойствах сайта - Иконка сайта - нажмите Выбрать изображение:
Иконка сайта - Выбрать изображениеВыберите картинку на компьютере или из библиотеки медиафайлов вашего сайта. После того, как изображение загрузите, то появится предпросмотр фавиконки:
Иконка вашего сайта вордпрессЕсли всё окей, то нажимайте синею кнопку Опубликовать. Откройте свой сайт и проверьте вашу проделанную работу. Я установил прозрачную картинку и у меня иконка сайта в браузере гугла выглядит так:
Фавиконка установленная на сайт WPУчтите, что многие браузеры (а также поисковые системы) кэшируют favicon-изображения, поэтому изменения могут вступать в силу не сразу. В браузере от Google картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.
Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/ вордпресс.
Видео - Как установить 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/