Загрузка и установка favicon на WordPress
(Последнее обновление: 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. Хотя иконка чуть ли не последняя вещь необходимая для сайта, она всё же придает чувство завершенности в дизайне. Так что, если у вашего сайта всё ещё установлена стандартная иконка, эта статья для вас.
Информация для вас не будет новой, но давайте взглянем правде в глаза – если вы хотите, чтобы к сайту относились серьёзно, вам следует поставить 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!
Два видео-урока по теме иконок сайта:
Иконка сайта или 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-сайт.
Зачем вообще нужен 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 можно установить разными способами. Я уже рассказывал, как при помощи плагинов и установить специальные коды в шаблон сайта. В этой статье я опишу еще один способ установки 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. Читать другие статьи.
