Как сделать значок сайта wordpress
Как установить favicon на WordPress
Favicon — это небольшое изображение во вкладке браузера, идентифицирующее ваш сайт. Так же оно служит добавлении вашего сайта на рабочий стол мобильного устройства для быстрого доступа. Отсутствие favicon у сайта — одна из 25 популярнейших проблем при создании сайта.
При использовании премиумных тем вероятнее всего эта инструкциям вам не понадобится, т.к. в большинстве тем, которые попадались мне на глаза, установка favicon была доступна из настроек самой темы. Посмотрите внимательно, скорее всего вы найдёте соответствующий раздел и избавите себя от чтения материала.
Почему вам стоит добавить favicon на ваш сайт?
Как уже было написано выше, данная иконка позволяет идентифицировать ваш сайт среди всех остальных открытых в окне вашего браузера. Хочу отметить, что не все браузеры показывают иконки сайтов, например, Safari не покажет, поэтому вы их попросту не увидите.
Посмотрите на изображение и сразу поймёте, как выглядят favicon сайтов в Google Chrome, например:
Или вот пример из другого браузера — Vivaldi:
Каждый из этих сайтов имеет свою уникальную иконку и можно безо всяких проблем (зная, где чья) открыть нужный сайт, не перебирая каждую вкладку и не подводя мышкой к заголовку. Всё как на ладони — нужно лишь запомнить иконки часто используемых вами сайтов. Если вы активный пользователь интернет, то у вас скорее всего в каждом браузере открыто по 30-40 вкладок. Без иконок было бы очень тяжко… 🙂
Как создать favicon
В самом простом варианте — это иконка квадратного размера, в идеале 32х32 или 16х16 пикселей, которую без проблем можно сделать в Photoshop, либо любом другом графическом редакторе. Для простоты — создайте изображение размером 128х128 пикселей, а затем уменьшите масштаб до 32х32 или 16х16, качество не должно особо пострадать. Затем сохраните изображение в формат PNG.
Создаём фавикон с помощью онлайн-генератора LOGASTER
Создание фавикона онлайн не требует никаких дополнительных усилий или специальных навыков в дизайне. Среди русскоязычных хочу обратить ваше внимание на сервис Логастер.
В первую очередь, вам нужно будет создать логотип. Уже на этом этапе вы подбираете иконку, шрифт и цветовую гамму логотипа, которые также послужат основой для будущего фавикона. Процесс несложный и займёт всего несколько минут.
Когда логотип готов, выберите функцию «Создать фавиконку с этим логотипом»: 
Подберите иконку, которая вам понравится. В редакторе также видно, как она будет смотреться в уменьшенном варианте. Сохранённый фавикон можно скачать в PNG и ICO форматах разных размеров. 
Рисуем иконку вручную
Если вы не владеете графическим редактором и не хотите обращаться к дизайнерам на биржах труда, тогда есть второй вариант — нарисовать иконку с помощью онлайн-сервиса. Есть несколько вариантов: favicon.cc, Faviconer, DynamicDrive. Там же можно выбрать из готовых вариантов, загруженных другими пользователями.
Вот так выглядит процесс создания иконки вручную в сервисе Favicon.cc:
После этого надо будет сохранить иконку на ваш компьютер.
Установка favicon на WordPress
Есть несколько вариантов подключения иконки. Первый — самый простой и доступный практически всем с новой версией WordPress – воспользоваться инструментами нашего движка. Если настройки вашей темы имеют опцию для установки favicon — используйте её.
Третий способ — это внесение двух строк в файл вашей темы; четвёртый — использование плагинов для этой задачи. Я рекомендую попробовать сначала первый вариант, потому что держать дополнительные плагины — это не самое лучшее решение, тем более, для такой разовой операции, как favicon для сайта.
Многие некачественные бесплатные темы жёстко прописывают путь до иконки в код файла header.php. И если ни один из предложенных вариантов не срабатывает, то вам нужно открыть файл header.php в директории с вашей темой и удалить все упоминания в тексте со словом «favicon». Помогает — пробовал! 🙂
Способ 1: Используем возможности WordPress
По хорошему же, если у вас версия WordPress 4.3 и новее, то вам достаточно будет загрузить графический файл размером 512х512 пикселей и через интерфейс «Внешний вид» — «Настроить» перейти в раздел «Свойства сайта». После этого загрузить ваш файл через загрузчик WordPress и он автоматически масштабируется под все необходимые размеры.
Способ 2: Использование настроек вашей темы
Во многих темах (премиумных или бесплатных) есть настройки, которые находятся в меню «Внешний вид» — «Настройки темы». В первую очередь я бы рекомендовал просмотреть все имеющиеся варианты настроек и отыскать то, что относится к favicon.
Вот так, например, выглядит эта опция в моей теме:
Раскрываем этот блок и видим следующее:
Теперь останется лишь загрузить изображение и сохранить настройки. Не перепечатывайте слепо адрес моей иконки с изображения выше — у вас будет свой адрес изображения и, скорее всего, он будет выглядеть так: http://адрес-вашего-сайта.ru/wp-content/uploads/2016/название-файла.png.
Это самый быстрый способ подключить favicon к вашему сайту!
Способ 3: Подключение в файл header.php
Загрузите созданную вами иконку на ваш хостинг, путём подключения на FTP, SSH, либо через файловый менеджер вашей хостинг-панели. Файл нужно разместить в корневой директории, чтобы он был доступен по адресу http://адрес-вашего-сайта.ru/favicon.ico, либо favicon.png, в зависимости от типа иконки.
Теперь зайдите на хостинге в директорию с вашей темой (/wp-content/themes/ваша_тема/) и откройте на редактирование файл header.php. После открывающего тега вставьте следующий код:
Теперь осталось сохранить этот файл и обновить главную страницу в браузере. Во вкладке должна появиться новая иконка, которую вы успешно подключили к сайту.
Способ 4: Плагин «Insert Headers and Footers»
Заходим в раздел «Плагины» — «Добавить новый», в поиске вбиваем Insert Headers and Footers, устанавливаем найденный плагин и активируем его.
Если не можете найти, воспользуйтесь ссылкой на официальный репозиторий WordPress: Insert Headers and Footers. Сохраните его на компьютер и установите через ссылку «Загрузить», раздела «Плагины» — «Добавить новый».
После этого зайдите в пункт меню «Параметры» — «Insert Headers and Footers» и в области Header вставьте тот HTML код, который был приведён в пункте выше, для подключения favicon вручную.
Не забудьте нажать кнопку «Save settings» для сохранения настроек.
Способ 5: Плагин «All In One Favicon»
Если и с предыдущим вариантом у вас ничего не получилось, тогда остаётся самый последний вариант — подключить плагин с названием All In One Favicon, устанавливается он абсолютно аналогично всем остальным плагинам, поэтому по шагам писать не буду. Нюанс в том, что данный плагин не обновлялся больше трёх лет.
После установки и активации плагина, заходите в раздел меню «Параметры» — «All in one Favicon» и видим следующий экран с настройками:
Frontend Settings – это для отображения иконки при просмотре сайта со стороны посетителя; Backend Settings – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».
Заключение
Если у вас не сработала установка иконки ни с одним из предложенных мною способов — напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. 😉
Если вы хотите поблагодарить меня за материал — можете сделать это здесь 🙂
Как установить favicon на WordPress: 87 комментариев
Обновил себе флавикон, благодарю за ссылки на полезные сайты!
Мне лучше всего помог tools.dynamicdrive.com/favicon
Интересный ресурс, я даже не видел такой 🙂
Успехов в развитии проекта, Андрей!
Как добавить 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.
Перейдите в меню cPanel >> Диспетчер файлов.
Найдите корневую директорию сайта и загрузите favicon с вашего локального компьютера. Убедитесь, что загружаемый файл называется favicon.ico.
После этого favicon должен отобразиться автоматически.
Однако в некоторых случаях вам необходимо будет внести ручные изменения. Всё зависит от особенностей вашей WordPress-темы.
Важно: перед тем, как вносить какие-либо изменения, убедитесь, что у вас есть резервная копия темы.
Перейдите в меню Внешний вид >> Редактор.
Выберите для редактирования Заголовок Темы (файл header.php).
Отредактируйте или добавьте следующие строки в код, как это показано на скриншоте:
Не забудьте поменять “yourdomain.com” на ваш домен.
Теперь нажмите на Сохранить файл и перезагрузите страницу.
Делайте блог на хостинге с предустановленным WordPress!
Наша теплая поддержка на связи 24/7
Как установить favicon (фавикон) в WordPress? Пошаговая инструкция.
Favicon – это маленькое изображение, которое вы видите во вкладке браузера, рядом с названием сайта. Также оно отображается в панели браузера при добавлении сайта в избранное и истории просмотров. В Яндесе фавикон размещается прямо в результатах выдачи. Этот на первый взгляд небольшой элемент визуального оформления сайта на самом деле служит одним из основных блоков брендинга вашего проекта, и позволяет выделить ваш проект среди остальных. Создавая сайты на WordPress обязательно нужно добавлять уникальный фавикон.
Что такое favicon?
Favicon (фавикон) – это мини иконка сайта, которая размещается на каждой открытой вкладке браузера возле названия сайта. Именно такие графические иконки позволяют пользователю быстро понять, какой сайт находиться в той или иной вкладке браузера. Стандартный размер фавикона: 16 x 16 пикселей.
Где применяется фавикон?
Давайте разберем список позиций, где отображаться иконка сайта.
1. Панель вкладок браузера.
2. История просмотров в браузере.
5. В выдаче Яндекс (как мобильной так и декстопной).
6. Мобильная выдача Google.
Из приведенных примеров видно, что фавикон визуально идентифицирует ваш сайт в выдаче поисковиков и в браузере пользователя. Это на самом деле важный визуальный акцент, который не стоит игнорировать при разработке сайтов на WordPress.
Формат favicon
В качестве графических изображений для фавикона вы можете использовать следующие форматы: PNG, ICO, JPEG, SVG, GIF. Если раньше все использовли формат ICO, поскольку его поддерживали все браузеры, то сейчас чаще всего используют PNG. Такие форматы как SVG, GIF, JPEG имеют некоторые проблемы в поддержке их разными браузерами, поэтому на данный момент рекомендую использовать именно PNG или же ICO. Кстати, у SVG, за счет масштабирования без потери качества в этом направлении большие перспективы, нужно дождаться только поддержки этого формата всеми популярными браузерами.
Проверить поддержку форматов изображений для иконок сайта можно с помощью сервиса Can I Use.
Если вы думаете, в каком формате подготавливать иконку для WordPress, то выбирайте между PNG и ICO.
Как создать фавикон?
Сейчас мы с вами рассмотрим основные сервисы, которые можно использовать для того чтобы сделать иконку для сайта. Во-первых, можно классифицировать их на две группы: онлайн сервисы и десктопные программы.
Онлайн сервисы
www.favicon.cc. Давайте рассмотрим, какой функционал он предоставляет. В первую очередь – это генерация иконки из готового изображения, например, из логотипа вашего сайта. Также, вы можете самостоятельно нарисовать favicon для своего сайта.
www.degraeve.com/favicon/ – вот вам еще один, довольно многофункциональный онлайн сервис для генерации иконок для сайтов, но только зарубежный. Разобраться в нем думаю, будет не сложно, там все понятно чисто на интуитивном уровне.
Десктопные сервисы
Из десктопных сервисов, которые перегоняют картинки в формат «.ico» и делают размер иконки 16х16 пикселей можно выделить: IcoFX, Photoshop. В том же Photoshop можно нарисовать и иконку в png формате. Вы можете нарисовать png изображение размером 512 х 512 пикселей, а при добавлении в WordPress движок сам подгонит размер.
Но, честно говоря, работать с онлайн сервисами намного проще.
Я не хочу тратить время на создание favicon для своего сайта на WordPress, что мне тогда делать?
Специально для вас, никто не отменял галереи favicon’ов. Вы запросто можете скачать картинки на любой вкус абсолютно бесплатно. Где же это можно сделать?
Favicon.cc — эта галерея насчитывает просто огромное количество фавиконов на любой вкус и разные тематики. В наличии имеются, в том числе и анимированные иконки.
Как добавить фавикон на WordPress?
Вы можете использовать несколько вариантов установки favicon на WordPress.
Давайте рассмотрим каждый из этих пунктов детальнее.
Через Customizer (настройщик) сайта
Для этого переходим в административную панель управления WordPress и далее по меню «Вешний вид» — «Настроить».
Вы увидите панель настроек для текущей темы вашего сайта. В ней вам нужно выбрать пункт – «Свойства сайта».
Там вы увидите блок с названием «Иконка сайта», и селектор для выбора изображения.
Вам будет доступен предварительный просмотр того, как иконка будет выглядеть на вкладке с вашим сайтом.
После выбора иконки нажимаем «Сохранить и опубликовать».
Добавление кода в header.php вашей темы
Для начала вам нужно загрузить готовое изображение в корневую папку вашего сайта.
Обязательно не забудьте поменять yourdomain.com на url своего сайта.
Для этого переходим в раздел «Внешний вид» — «Редактор тем», ищем, справа шаблон (header.php) и нажимаем на него. Предварительно убедитесь, что вы сделали бекап сайта!
Далее перед тегом вставляем код. Нажимаем кнопку «Обновить файл».
Если вы все проделали правильно, то при обновлении вашего браузера вы будете наблюдать свой фавикон. Если фавикон не меняется, попробуйте почистить кэш браузера. Эти же правки можно внести и через ftp клиент, сделав резервную копию header.php.
Плагины для установки фавикона в WordPress
В репозитории WordPress вы можете найти много плагинов для установки иконки на сайт. Для примера давайте рассмотрим несколько из них.
All In One Favicon
Идем в меню «Плагины» — «Добавить новый», ищем по названию, устанавливаем и активируем плагин. После этого переходим в раздел «All in one Favicon» в меню админки.
Загружаете изображения в пунктах: «ICO Frontend (или же PNG Frontend)» и «ICO Backend (или же PNG Backend)». Нажимаем «Сохранить изменения».
Favicon от RealFaviconGenerator
Это более продвинутый плагин, который позволяет генерировать несколько типов иконок для разных платформ: iPhone/iPad, Android устройств, Windows 8 планшетов и другого.
Алгоритм работы с плагином следующий.
Есть и другие плагины: Fresh Favicon, Genie WP Favicon и пр. Все их можно найти в репозитории WordPress и ознакомиться с их возможностями.
Как изменить фавикон в WordPress?
Если вы изначально сами добавляли фавикон на сайте, то проблем быть не должно. А что, если вам разрабатывали сайт и вы хотите изменить иконку? В таком случае можно предложить следующий алгоритм.
Что делать если фавикон не отображается?
Тут может быть несколько причин.
На этом сегодня все, надеюсь, информация была вам полезна, и вы легко сможете установить favicon на своем сайте.
Установка иконки favicon на сайт WordPress
Вступление
Неразрывной «спутницей» адреса сайта является картинка расположенная рядом с ним. Это иконка сайта или favicon (favorites icon). Видна иконка в адресной строке открытой вкладки и при добавлении сайта в закладки браузера. Отсутствие иконки сайта делает его менее заметным и неотличимым от других сайтов, особенно в закладках браузера.
Новая установка иконки favicon на сайт WordPress в конце статьи (23-09-2019).
Что в статье
Для установки иконки на сайт WordPress нужно сделать несколько шагов:
Как сделать Favicon для сайта WordPress
Для иконки сайта WordPress нужна картинка размером 16×16 пикселя, лучше в формате favicon.ico. Если в шаблоне, при помощи кода, указывать явное размещение иконки в каталоге сайта, то формат Favicona может быть отличным от [.ico].
Считается, что некоторые современные браузеры могут самостоятельно находить картинку в формате favicon.ico в корневом каталоге сайта или в каталоге шаблона и использовать ее как иконку сайта.
Для изготовления «фавикона» существует масса online инструментов. Предложу два из них. Я пользуюсь ими давно, они элементарны в своем исполнении.
FAVICON GENERATOR
Dynamicdrive
Чтобы сделать Favicon, нужно сначала указать нужный размер Favicona, загрузить в генератор любое изображение со своего компьютера и нажать изготовление favicon. Favicon генерируется за секунды, после чего его можно скачать опять на компьютер. Генерируются иконки с именем Favicon.ico.
Favicon готов можно загружать его на сайт WordPress
Сначала попробуем найти в корневом каталоге сайта ранее установленный Favicon. Favicon сайта может располагаться в двух основных местах каталога.
Проверяем эти два адреса. Если находим старый Favicon его удаляем или переименовываем.
Загружаем новый Favicon в каталог сайта
Для работы с файлами сайта я пользуюсь FTP клиентом FileZilla. Загрузить Favicon сайта можно в любую папку каталога, а потом прописать место его нахождения в коде. Но наиболее разумны два места загрузки Favicona.
Первое место это непосредственно корневая папка сайта (папка [httpdocs] или [publ_html]). Второе место это папка [image] в рабочей теме вашего сайта. При втором размещении Favicon нужно будет менять каждый раз при смене темы (шаблона) сайта.
После размещения Favicona в каталоге сайта понадобятся следующие коды
При размещении Favicona в корне сайта нужен такой код:
При размещении Favicona в теме сайта нужен такой код:
Этот код можно использовать, если вы хотите сделать отдельную иконку для какого нибудь внутреннего плагина WordPress.
В этих кодах можно изменить название и формат favicon,который вы загрузили в каталог.
Остается последнее вставить прописанный код в шаблон сайта
Авторизуемся в административной панели сайта. В консоли, слева, в вертикальном меню выбираем: Внешний вид →Редактор.
Не забываем сохраняться. Открываем сайт в браузере. Через несколько секунд появляется ваш favicon рядом с названием сайта. Было:
Как видно на фото в адресной строке иконка сайта не меняется. Меняется только иконка в закладках и в окне вкладки. Работа по размещению своего favicon (favorites icon), иконки сайта завершены. В итогах статьи отмечу:
Еще один вариант добавить одинаковый Favicon на сам сайт и на административную панель
Всё! Установлен одинаковый favicon для основной части сайта и для консоли.
Дополнения
Начиная с версии WordPress 4.3 в ядре сайта появилась функциональность favicon. Теперь не нужно работать с кодом сайта или использовать сторонние плагины для добавления иконки сайта. Во всех темах WordPress установка (замена) фавикона (значок сайта) есть по умолчанию.
Чтобы установить фавикон сайта: