Как установить на wordpress favicon: Установка Favicon (фавикон) на WordPress сайт

Содержание

Установка Favicon (фавикон) на WordPress сайт

Привет всем! Фавикон (Favicon) WordPress — как установить / добавить / поставить / заменить / удалить? Очень легко и просто. Как только вы создали блог/сайт на платформе WordPress, произвели базовую настройку ВордПресс пора подумать об установке фавикона (favicon) для сайта. Инструкция: как установить favicon на WP с видео уроком.

Процесс этот не сложный, не стоит откладывать на потом. «Потом» может не наступит ни когда. 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 картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.

Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/тему вордпресс.

Как поменять или удалить иконку сайта WordPress?

Проделайте те же действия. Админ панель — Внешний вид — Настроить. Открываете Свойства сайта. И теперь дело техники. Нажимаете Удалить или Изменить изображение:

Удалить или изменить изображение

Удаляете и нажимаете Опубликовать. Меняете фавикон сайта путём новой загрузки картинки в WordPress.

Если вы внесли изменения в значок и хотите, чтобы они были учтены для Google, то можете запросить повторное сканирование главной страницы сайта. Обычно изменения учитываются в результатах поиска в течение нескольких дней.

Видео — Как установить Favicon WordPress

Как установить favicon на сайт WordPress

На этом, дорогие друзья, у меня все. До встречи. Пока, пока!

Как установить фавикон на wordpress: 3 супер способа

Стандартная функция WordPress в админке

В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.

Вкладка настроить

Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.

Свойства

Откроется новая вкладка, находим “Выберите значок сайта”.

Выбор значка

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

Рекомендуется использовать размер не менее 512 на 512 пикселей (px).

Загрузка изображения

Выбираем откуда загрузим изображение с жесткого диска или ранее доступных в библиотеке
Отмечаем необходимое
Жмем Выбрать

Появится окно в котором настраиваем отображение, область квадратная по умолчанию. Изменить размер и нажать обрезать.

Предварительный просмотр

В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.

Публикуем

WordPress загрузит и сгенерирует несколько форматов для разных систем и браузеров, в зависимости откуда пришел посетитель:

Mac OS
Ios
Android
Приложения Windows

Установить favicon на WP с помощью плагина

Единственный вменяемый плагин это “Favicon by RealFaviconGenerator”, особенность заключается в том, что он проставляет фото для всех устройств:

Mac
Iphone
Android
IOS
Surface

Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим “Выберите из библиотеки мультимедиа”.

Выбор изображения для плагина

Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.

Библиотека медиафайлов

Далее нажимаем кнопку Генерировать.

Генерация

Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку “Continue with this picture”.

Подтверждение и продолжение процесса

Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.

отображение на разных устройствах

Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.

Проверка работы плагина

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

Для начала нужно установить FTP соединение и в корень, обычно папка public_html, загружаем изображение, с каким расширением решайте сами, главное чтобы он был квадратным.

favicon.png в корне сайта

Даю код, который нужно добавить в раздел head в активной теме.

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

Правильно устанавливаем фавикон в раздел head

Редактор тем
Заголовок header.php
Закрывающий тег </header>
Код для вставки
Обновляем файл

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

<link rel="shortcut icon" type="image/jpg" href="/favicon.jpg"/>

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

Favicon в браузере

Важный момент, что большинство браузеров могут сами найти в корне сайта favicon, только необходимо чтобы он был в формате ico. Но не всегда срабатывает, потратьте 5 минут времени и установите элемент как надо. Полезно знать как вставлять шорткоды в темы. Чтобы увидеть все наглядно предлагая посмотреть мое видео.

Где хранится иконка

Задают вопросы где хранится иконка на сервере. Ответ прост, если размещали с помощью первых 2 методов, то расположение будет такое wp-content/uplouads.

папка на хостинге со всеми фото

В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.

Яндекс не видит значок

После внесения правок любым способом, описанных в статье, пользователи хотят наблюдать значок в выдаче поисковиков. Но Яндекс и Гугл не сразу обновят информацию, потому что это связано с индексированием ресурса. Смотрите когда у поисковых систем апдейты и следите за изменениями в выдаче.

Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в яндекс вебмастере. Время изменений в выдаче от 5 до 90 дней.

Переобход страниц в Яндексе

На этом урок закончу, потому что ответ на вопрос как установить favicon на wordpress разобран полностью, жду ваших рекомендаций в комментариях.

Пожалуйста, оцените материал: Мне нравится4Не нравится

Установка favicon | WordPress.org Русский

К чему WordPress предлагает загружать такую большую картинку для favicon?

WP из этой картинки делает не только традиционный фавикон, но и всякие apple touch icon. Заодно эту картинку можно использоваться для социальных сетей.

Или лучше не пользоваться этим стандартным функционалом и все прописать вручную?

Лучше, конечно, сделать вручную все иконки (ибо автоматический ресайз всяко хуже ручного, особенно для иконок), положить их все в корень сайта и прописать в head.

Лучше, конечно, сделать вручную все иконки (ибо автоматический ресайз всяко хуже ручного, особенно для иконок), положить их все в корень сайта и прописать в head.

А какие сейчас современные требования к favicon, по старинке использовать формат .ico с несколькими размерами или отдельно делать .png для каждого размера?

Модератор
Yui

(@fierevere)

ゆい

<link rel="icon" href="/img/favipanda.png" />
<link rel="icon" href="/img/favipanda-32x32.png" />
<link rel="icon" href="/img/favipanda-192x192.png" />
<link rel="apple-touch-icon-precomposed" href="/img/favipanda-180x180.png">
<meta name="msapplication-TileImage" content="/img/favipanda-270x270.png">

cейчас желательно иметь все эти размеры

cейчас желательно иметь все эти размеры

А 16 и 48 уже не используются?

… и традиционный старорежимный favicon.ico в корне сайта.

Модератор
Yui

(@fierevere)

ゆい

можете попробовать установить значок сайта из настройщика темы и посмотреть в коде какие он прописывает размеры и какими мета-тегами,
в остальном поддержу мнение Юрия, лучше прописать все это в <head> в файлах темы или плагином https://ru.wordpress.org/plugins/dco-insert-analytics-code/
c ручным редактированием картинок.

Модератор
Yui

(@fierevere)

ゆい

… и традиционный старорежимный favicon.ico в корне сайта.

для пользователей с ископаемыми браузерами )
которые еще встречаются

Боты тоже бывает забегают за /favicon.ico. Зачем лишняя 404?

и традиционный старорежимный favicon.ico в корне сайта

Какой для него размер делать?

Я традиционно делаю 16х16, иногда 32х32.

cейчас желательно иметь все эти размеры

А нужно ли прописывать type="image/png"

Как установить 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. После открывающего тега <head> вставьте следующий код:

<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" />

, либо же измените разрешение на .png, если у вас иконка этого типа.

Теперь осталось сохранить этот файл и обновить главную страницу в браузере. Во вкладке должна появиться новая иконка, которую вы успешно подключили к сайту.

Способ 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 – это административная часть, её можно не заполнять. Осталось выбрать соответствующие иконки и нажать «Сохранить изменения».

Заключение

Если у вас не сработала установка иконки ни с одним из предложенных мною способов — напишите в комментарии, обсудим, как решить вашу мелкую проблему. Но, как лично мне кажется, этих вариантов более чем достаточно чтобы решить столь простую проблему. 😉

Если вы хотите поблагодарить меня за материал — можете сделать это здесь 🙂

Или угостить кофе 😉

Buy me a coffee

Твитнуть

Отправить

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

Иконка сайта или favicon — это лицо вашего сайта которое отображается в браузере перед названием вашего ресурса. Функциональной нагрузки фавикон не несет, но он повышает имидж и визуальную привязанность к вашему сайту. Сегодня мы попробуем разобраться, как установить favicon WordPress сайта, быстро и без всяких проблем.

Рассудите сами как бы происходил поиск нужной вкладки, если бы было открыто хотя бы 10 одновременно в браузере и все они выглядели идентично? Именно для такого зрительного различия и был придуман и внедрен favicon.

Обновление от 19.08.2015. В новой версии WordPress 4.3 существует способ добавления любой картинки и создание иконки сайта непосредственно с админки.

Создание иконки для WordPress сайта

Урок из цикла посвященного базовым настройкам и установкам в 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

Что бы установить favicon в наш сайт на WordPress нужно скачать файл header.php с нашего сервера и прописать в него следующие строки между тегами <head></head>

<head>

</head>

Файл с изображением должен быть в корневой папке сайта, если же его размещаем в другой каталог тогда нужно прописывать к нему путь.

Начиная с версии 4.3 можно устанавливать иконку сайта непосредственно с визуального редактора страниц. Так же благодаря данному обновлению размер и картинки больше не важно, программа сама отредактирует и сделает все как нужно.

Как установить Favicon WordPress можно посмотреть в следующем видео уроке:

Сделали? Все на этом данный урок закончен и цель достигнута, вы разобрались как устанавливать Favicon WordPress.

Вы можете продолжать изучать наши полезные уроки для начинающих пользователей WordPress и стать специалистом в разработке сайтов на данной платформе.

Рекомендую почитать:

как сделать и добавить в WordPress блог

icons Здравствуйте, дорогие друзья!
Сегодня расскажу, как установить favicon на сайт, а так же как его создать. Если вы заметили, у моего блога теперь новый фавикон. Пора и вам этому научиться. Из данной статьи вы узнаете, как сделать иконку с помощью favicon online generator или нарисовать самостоятельно, какого она должна быть размера и почему она так необходима каждому сайту. Если на вашем WordPress блоге до сих пор не установлен фавикон, сделаете это прямо сейчас.

Что такое favicon иконка

Вы еще не знаете, что такое favicon и зачем он нужен?

Как видно из скриншота, каждый сайт имеет иконочку, как правило, не ней изображен логотип сайта.

Favicon – это маленькая иконка, которая отображается в адресной строке браузера, на вкладке открытого сайта, рядом с его Title. Так же он присутствует в закладках, избранном и главное — в выдаче поисковых систем! Технически он представляет собой графический файл с расширением .ico.

Зачем нужен favicon.ico для сайта

Нужен он обязательно — это лицо вашего сайта. Он повышает CTR и помогает вашему сайту выделиться из общей массы, поэтому должен быть ярким и запоминающимся!

Пользователи, просматривая выдачу ПС, чаще кликают на сайты с привлекающим внимание фавиконом. Как видно из предыдущего скриншота, третий сайт без фавикона выглядит безликим и не привлекает внимания.
Пользователи, которые уже переходили на ваш блог через поисковые системы, запоминают вашу иконку. И в следующий раз, увидя ее в выдаче, обязательно кликнут по ссылке рядом.

Как сделать favicon и где его взять:

Нарисовать фавикон можно самостоятельно, если вы обладаете художественными навыками.
Или подобрать готовую картинку и конвертировать ее в файл favicon.ico для сайта.
Можно найти готовый фавикон в формате .ico.

Размеры favicon для WordPress

Favicon имеет стандартный размер 16×16 пикселей. Конечно же, это и для Worpdpress и для чёрта в ступе. Но можно сделать и больше, например, 24×24, 32×32, 48×48 или 64×64 пикселей. В этом случае иконка просто сожмется до стандартного размера. При этом, если кто-то захочет ее сохранить себе на компьютер, она опять станет большого размера и будет хорошо смотреться в виде ярлыка на рабочем столе:)

Favicon как сделать самостоятельно

Нарисовать иконку вы можете в привычном для вас графическом редакторе (Paint, Photosh0p), как обычную картинку. А затем преобразовать эту картинку в файл .ico с помощью онлайн генератора. Это не совсем удобно, т.к. в обычном редакторе вы не чувствуете масштаба и при конвертировании может пострадать качество.

Другой вариант того, как сделать favicon — нарисовать, используя онлайн сервис.

favicon.ru — наиболее удобный на мой взгляд генератор иконок. Рисуете свою иконку с помощью предлагаемых инструментов, если удачно вышло, нажимаете кнопку «Скачать favicon», и файл скачивается на ваш компьютер.

Favicon online generator

Для того, чтобы преобразовать обычную картинку в фавикон, есть различные сервисы.

favicon.co.uk — я всегда пользуюсь только этим сервисом, для меня он наиболее удобен. Не пугайтесь, что он англоязычный, там ничего не нужно читать и настраивать. Просто выберите файл с жесткого диска и кликните «Generate favicon».

favicon-generator.org – еще один аналогичный сервис, favicon online generator. Здесь так же можно преобразовать обычную картинку в файл favicon.ico. А кроме того, есть возможность нарисовать иконку самостоятельно или выбрать уже готовую из галереи.

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

Как установить favicon на WordPress сайт

Осталось узнать самое важное, как добавить favicon в WordPress. В большинстве готовых тем он уже установлен. Если у вас он уже есть, то нужно отыскать его в папке активной темы. Скорее всего он лежит в папке с картинками (Img или images). Просто замените там файл favicon.ico на новый.

Теперь рассмотрим ситуацию, когда в вашей теме блога нет фавикона.

Для начала зайдите в корневую папку сайта (у меня это папка “public_html ”) и загрузите туда ваш новый favicon.ico для сайта.
Откройте файл header.php и вставьте туда следующий код сразу после открывающегося тега :
1
<link rel="shortcut icon" href="https://адрес_сайта/favicon.ico"type="image/x-icon" />
<link rel=»shortcut icon» href=»https://адрес_сайта/favicon.ico»type=»image/x-icon» />
Обновите страницу, не используя кэш, и вы увидите новый фавикон. Хочу заметить, что не все браузеры моментально начинают показывать новую иконку, для некоторых должно пройти время.

Favicon не отображается в Яндексе

Мои клиенты по сайтам часто задают мне вопрос: «почему favicon не отображается в яндексе? установите его туда!». Мне остается только посмеяться над такой постановкой вопроса и ответить, что на работу Яндекса я повлиять не могу.

Дело в том, что индексирует он такие иконки очень долго, бывает, что и два месяца нужно ждать, пока она появится в выдаче. Поэтому, имейте терпение.

На этом все, теперь вы знаете, как добавить фавикон в WordPress блог. Задавайте ваши вопросы в комментариях, я обязательно помогу. До скорых встреч!

Favicon на сайте WordPress

От автора: приветствую, вас, уважаемые читатели. В статье вы найдете информацию о том, как добавить favicon на сайт WordPress или как поменять favicon, который уже установлен. Представленный материал будет полезен как владельцам сайтов WordPress, так и владельцам любых других сайтов.

Итак, начнем с того, что же такое есть этот самый Favicon. Собственно, определение термина можно найти в Википедии. Из определения понятно, что favicon — ни что иное, как иконка сайта, показывающаяся (если она, конечно, имеется на сайте) во вкладке браузера слева от названия сайта. Если такая иконка не установлена, тогда на вкладке вы увидите только название сайта.

Согласитесь, наличие такой иконки делает сайт более узнаваемым. Особенно это касается брендовых проектов, которые могут знать и регулярно посещать многие пользователи. Наличие favicon на сайте имеет еще один, порой значительный, плюс — эта иконка показывается в результатах отдельных поисковых сервисов. Например, Яндекс Поиск показывает favicon.

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

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

КАК СДЕЛАТЬ FAVICON

Итак, если на вашем сайте WordPress все еще нет иконки, тогда самое время добавить ее. Однако перед добавлением, ее необходимо сделать. Для начала мы рассмотрим универсальные способы создания favicon, ну а чуть ниже вы узнаете, как добавить favicon на сайт WordPress (в WordPress сделать это вообще крайне просто).

Для создания favicon можно использовать любую подходящую программу. Однако можно поступить гораздо проще — воспользоваться онлайн сервисами для создания favicon. Таких сервисов не меньше, чем программ, и работа с ними проста и понятна. По запросу «favicon online» Гугл или Яндекс подскажут вам множество вариантов, на любой вкус.

Как неплохой вариант, можете попробовать сервис http://favicon.ru/. Здесь вы можете как создать иконку из имеющегося изображения, так и нарисовать ее сами с чистого листа. Кроме того, на этом же сервисе вы можете заказать услугу создания иконки. Вариантов, как видите много. Кстати, вы можете задать вполне логичный вопрос — А что, я не могу сделать иконку в редакторе Photoshop? А вот здесь не все так просто. Проблема в том, что для иконки favicon предъявляется ряд требований.
Начнем с расширения favicon. Традиционно это должен быть файл с расширением ico. Почему традиционно спросите вы? Да потому что прочие расширения для favicon могут быть некроссбраузерными. Например, браузер Internet Explorer до 11-ой версии не поддерживает никаких других форматов для favicon, кроме формата ico. Ну а Photoshop из коробки просто не поддерживает работу с файлами ico.

Что касается прочих форматов, то лучше всего в этом плане работает Firefox, он распознает все популярные форматы изображений (png, gif, jpg и пр.). К слову, поддержка формата gif означает, что мы можем создать для сайта анимированный favicon. Не уверен, что это хорошая идея, но на некоторых сайтах я встречал и такой favicon. Вот только увидеть анимацию можно не во всех браузерах (опять таки, проблема кроссбраузерности). Chrome, к примеру, не поддерживает анимацию иконки favicon, он просто покажет первый кадр анимации, т.е. на вкладке мы увидим статичную иконку.

Из этого выходит, что если для вас важна кроссбраузерность (в частности, поддержка старых версий IE), тогда для favicon желательно использовать формат ico. Если же поддержка старых версий IE в плане показа иконки не критична, тогда лучше использовать png. На текущий момент все популярные современные браузеры способны отобразить favicon и других форматов. Сам же формат ico на сегодняшний день уже можно считать устаревшим.

Среди других требований можно назвать размеры favicon. Это будут традиционные 16х16 пикселей. Однако они также уже несколько устарели. По той простой причине, что сайт могут просматривать на десятках различных платформ и устройств. Именно поэтому можно сделать иконки различных размеров и подключать ту или иную в зависимости от устройства (различные варианты в документации). Зачастую будет достаточно одной иконки 16х16. Если вам необходимо учесть все возможные устройства, тогда можете попробовать сервис Real Favicon Generator. Загружаете картинку — на выходите получаете целый пак иконок различных размеров и код для их подключения.

КАК ПОДКЛЮЧИТЬ FAVICON

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

Также можно было прописать код подключения favicon в коде HTML следующей строкой:

Как вы понимаете, в атрибуте href указывается путь к иконке, которая в нашем случае помещена в корень сайта. Соответственно, ее можно положить не обязательно корневую директорию, можно в любую папку, прописав корректный путь.

Так было раньше. Но сейчас все не намного сложнее. С появлением в HTML5 атрибута sizes мы можем указать несколько вариантов для подключения той или иной иконки. Выше я писал, что сервис Real Favicon Generator сгенерировал мне целый пак изображений и выдал примерно такой код для подключения favicon на сайт:

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

<!— и еще с десяток строк различных вариантов… —>

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

FAVICON НА САЙТ WORDPRESS

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

Идем дальше. Следующим шагом будет админка WordPress. Да, вы не ослышались. Нам не нужно использовать сторонние сервисы, WordPress все сделает за нас. Заходим в меню Внешний вид — Настроить — Свойства сайта.

В открывшемся меню нажимаем кнопку Выберите файл, чтобы загрузить файл или выбрать его из библиотеки файлов вашего сайта. Обратите внимание, что WordPress рекомендует использовать картинку квадратных пропорций с размером стороны не менее 512 пикселей. Выбираем или загружаем картинку — остальное WordPress сделает за нас.

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

В исходном коде сайта при этом мы увидим новые строки, в которых подключается favicon, это будет примерно такой код:

<!— и еще парочка вариантов… —>

Вот и все, так просто мы подключили favicon в WordPress. Чтобы поменять favicon в WordPress необходимо проделать ту же процедуру, в свойствах сайта просто изменив картинку для иконки.

На этом будем завершать статью. Теперь вы сможете создать и добавить favicon в WordPress и не только. Задавайте вопросы, если вам что-то не ясно или не получается. Удачи!

Бесплатный курс «Основы создания тем WordPress»

Изучите курс и узнайте, как создавать мультиязычные темы с нестандартной структурой страниц

Скачать курс

Основы создания тем WordPress

Научитесь создавать мультиязычные темы с нестандартной структурой страниц

Смотреть

Favicon от RealFaviconGenerator — плагин для WordPress

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

Favicon — это не просто файл favicon.ico , размещенный в середине вашего сайта. В настоящее время, когда существует так много разных платформ и устройств, вам нужна куча изображений для выполнения работы. С помощью RealFaviconGenerator генерируйте все значки, необходимые для настольных браузеров, iPhone / iPad, устройств Android, устройств Windows 8 и т. Д.

Устройства

iOS используют значок Apple Touch с высоким разрешением для отображения закладок и ярлыков на главном экране. Для iPhone первого поколения требуется изображение 57 × 57, тогда как новому iPad с экраном Retina требуется изображение 152 × 152. Android Chrome также использует эти изображения, если находит их. Windows 8 идет другим путем со специальным набором значков и HTML-объявлений.

Favicon — это не только картинки с разным разрешением. Различные платформы имеют разные правила пользовательского интерфейса.Например, классические значки на рабочем столе часто используют прозрачность. Но iOS требует непрозрачных значков. И у Windows 8 есть свои рекомендации.

Сэкономьте часы на исследованиях и редактировании изображений с RealFaviconGenerator и его дополнительным плагином. За считанные секунды вы настраиваете значок, совместимый с:

Windows (IE, Chrome, Firefox, Opera, Safari)
Mac (Safari, Chrome, Firefox, Opera, Camino)
iOS (Safari, Chrome, Coast)
Android (Chrome, Firefox)
Поверхность (IE)
И более

Мы очень серьезно относимся к совместимости.См. Полный список на http://realfavicongenerator.net/favicon_compatibility.

** Локализация **

Использование панели управления WordPress

Перейдите к «Добавить новый» на панели управления плагинами.
Искать «Favicon by RealFaviconGenerator»
Нажмите «Установить сейчас»
Активируйте плагин на панели управления плагином
Перейдите к пункту «Favicon» в меню «Внешний вид».
Выберите эталонное изображение из медиабиблиотеки (необязательно)
Нажмите кнопку «Создать значок» и следуйте инструкциям.

Использование FTP

Скачать favicon-by-realfavicongenerator.zip
Извлеките каталог favicon-by-realfavicongenerator на свой компьютер
Загрузите каталог favicon-by-realfavicongenerator в каталог / wp-content / plugins /
Активируйте плагин на панели управления плагином
Перейдите к пункту «Favicon» в меню «Внешний вид».
Выберите эталонное изображение из медиабиблиотеки (необязательно)
Нажмите кнопку «Создать значок» и следуйте инструкциям.

«Favicon by RealFaviconGenerator» — программное обеспечение с открытым исходным кодом. Следующие люди внесли свой вклад в этот плагин.

авторов

1.3.18

Удалить ссылку на устаревшую функцию screen_icon

Плагин

был протестирован до WordPress 5.4

1.3.17

Изменения в очистке предупреждений безопасности от CodeRisk

1.3.16

Плагин

протестирован до WordPress 5.3.2

1.3,15

Плагин протестирован до WordPress 5.1

1.3.14

Плагин протестирован до WordPress 5.0-beta5

1.3.13

Плагин

протестирован до WordPress 4.9.7

1.3.12

Не публиковалось, без изменений

1.3.11

Добавлен перевод id / ID, спасибо Jordan Silaen

Плагин

был протестирован до WordPress 4.8.1

1.3.10

Всегда получать доступ к RealFaviconGenerator через HTTPS
Уточнение в разделителях локальных путей для Windows

Плагин

был протестирован до WordPress 4.7,1
Уведомление, чтобы попросить администратора не деактивировать плагин

1,3,9

Плагин

был протестирован до WordPress 4.7

1,3,8

Плагин

был протестирован до WordPress 4.6

1,3,7

Исправление: Ключевые слова плагина перефразированы (некоторые не учтены).

1,3,6

Исправление: путь к значкам иногда был неправильным, если каталог загрузки был корневым каталогом

1.3,5

Добавлен перевод pl / PL, спасибо Maciej Gryniuk

Добавлен перевод

ru / RU, спасибо Наташе Дятко

1,3,4

Плагин

протестирован до WordPress 4.5

1.3.3

1.3.2

Опечатки в французском переводе
Предупреждение, исправление для PHP7
Протестировано до WordPress 4.4.1

Добавлен перевод

cs / CZ, благодаря анонимному переводчику

1.3.1

Исправление в предыдущей версии.

1.3.0

Плагин использует преимущества неинтерактивного API RealFaviconGenerator для автоматического обновления значка всякий раз, когда доступна новая версия.

1.2.15

Добавлена ссылка на пожертвование.

Плагин

теперь работает при доступе к файловой системе через FTP (не прямой). См. Https://wordpress.org/support/topic/no-images-created

1.2.14

Улучшение безопасности.
Предупреждение об исправлении NONCE_ACTION_NAME.
Удалены ненужные закрывающие теги PHP.
Добавлена проверка ошибок при распаковке пакета favicon.

1.2.13

1.2.12

Улучшения производительности: проверка обновлений значков теперь выполняется в разделе «Администратор» (а не в разделе «Общие»), языковые стандарты больше не загружаются в раздел «Общие».
Воспользуйтесь преимуществами Rewrite API (если он доступен), чтобы файлы отображались в корневом каталоге. Итак, http://example.com/favicon.ico работает (например,по запросу Яндекса).

Добавлен перевод

nl / NL, спасибо Axel Vanderhaeghen.

1.2.11

Когда браузер администратора не может получить изображение, выбранное из библиотеки мультимедиа, пользовательский интерфейс корректно перестает работать.
Распаковка пакета Favicon более надежна.
Уведомление о том, чтобы просить пользователей оценить плагин на WordPress.org.

1.2.10

Исправлено предупреждение при использовании с BuddyPress (bp_setup_current_user). См. Https: // wordpress.org / support / topic / wp_debug-notice-for-bp_setup_current_user.

1,2,9

При выборе из библиотеки мультимедиа основное изображение теперь извлекается браузером администратора WP для предотвращения нескольких проблем (локально размещенные блоги, блоги, защищенные тем или иным образом и т. Д.).

1,2,8

Плагин

успешно протестирован на WordPress 4.1.

1,2,7

Исправление для сайтов WordPress, размещенных в Windows.

1.2,6

Плагин теперь совместим с мультисайтом.

1,2,5

Исправление для страницы входа: код значка не был введен на этой конкретной странице.

1,2,4

Удалите сообщения отладки, чтобы избежать ложных срабатываний в журнале ошибок.

1.2.3

Уведомления об обновлениях можно закрыть раз и навсегда.
Новая страница настроек для включения / отключения уведомлений об обновлениях.

1.2.2

Исправление ошибки 403 в службе хостинга HostGator (https: // wordpress.org / support / topic / 403-error-when-generate-favicon).

1.2.1

Исправление при удалении плагинов и проверке обновлений.

1.2.0

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

1.1.1

Использование API перезаписи отключено. Файлы Favicon больше не находятся в корневом каталоге блога.

1.1.0

Запустите средство проверки значков RealFaviconGenerator из интерфейса администратора.

1.0.7

Деактивировать значок Genesis по умолчанию, если он настроен в FbRFG.

1.0.6

Улучшено управление ошибками во время установки значка.

1.0.5

Не пытайтесь перезаписать URL-адрес файлов значков, если .htaccess недоступен для записи.

1.0.4

Возможность не перезаписывать URL файлов значков, даже если это возможно.

1.0.3

Синтаксис кода плагина изменен для соответствия более старым версиям PHP.

1.0.2

URL-адрес обратного вызова был слишком длинным для некоторых серверов. Он был сокращен.

1.0.1

Настройки администратора Favicon теперь находятся в меню «Внешний вид».
Исправление при загрузке пакета favicon.
Исправление в управлении ошибками при установке значка.

1,0

Начальная версия.

Как добавить фавикон в WordPress 4.3

Значок — это крошечный значок, который появляется на вкладке рядом с вашим доменным именем. Раньше он отображался в адресной строке рядом с вашим доменным именем, но был удален из этого места по соображениям безопасности. Единственным исключением является Microsoft Internet Explorer, который по-прежнему показывает значок рядом с адресом в адресной строке. Все остальные браузеры удалили фавикон из адресной строки, чтобы избежать путаницы с состоянием безопасности веб-сайта.

Как создать фавикон

Существует несколько способов создания значков, но в целом вам потребуется графическая программа, которая может создавать файлы JPEG, GIF или PNG размером не менее 512 пикселей в ширину на 512 пикселей в высоту. Основная задача — сохранить небольшой размер файла с минимальными цветами и разрешением, чтобы обеспечить быструю скорость загрузки. WordPress версии 4.3 позволяет создавать фавикон (называемый в WordPress иконкой сайта ), просто загружая графику в WordPress и затем вырезая только часть изображения.Вот несколько общих рекомендаций по созданию фавикона:

WordPress просит, чтобы файл был не менее 512 пикселей в ширину на 512 пикселей в высоту
Сохраняйте изображение с разрешением 72 DPI (разрешение, используемое для веб-изображений; DPI = точек на дюйм)
Сведите количество цветов к минимуму
Сохраняйте небольшой размер файла. Обычно это делается путем ограничения количества цветов и сохранения разрешения до 72 dpi

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

Как добавить значок сайта в WordPress 4.3

Вход в администратор WordPress
Щелкните Внешний вид , затем щелкните Настроить
Нажмите Идентификатор сайта
Щелкните файл сайта под значком сайта
Нажмите Выберите файл после того, как вы щелкнете файл, который вы собираетесь использовать для значка сайта. Помните, что изображение должно быть не менее 512 пикселей в ширину на 512 пикселей в высоту
Щелкните кнопку Select в правом нижнем углу диалогового окна Select File. После этого вы увидите изображение под областью «Значок сайта» в разделе «Идентификация сайта». Убедитесь, что значок сайта отображается так, как вы хотите.
Нажмите Сохранить и опубликовать вверху, чтобы сохранить изменения.

Как обрезать выделение для создания значка сайта в WordPress 4.3

Вход в администратор WordPress
Щелкните Внешний вид , затем щелкните Настроить
Нажмите Идентификатор сайта
Нажмите Выберите файл , чтобы выбрать рисунок, на котором вы собираетесь обрезать значок сайта.
Щелкните Выберите файл . Если выбранный вами файл довольно большой, WordPress автоматически обнаружит это и откроет экран Crop Image .Вы сможете перемещать и изменять размер области кадрирования для вашего Favicon. Экран справа также позволяет вам точно увидеть, как будет выглядеть значок.
После того, как вы выбрали область, которую собираетесь использовать для значка сайта (favicon), нажмите Crop Image
После выбора значка сайта вы увидите его версию в области «Идентификация сайта». Нажмите Сохранить и опубликовать , чтобы сохранить изменения

На этом руководство по использованию значка сайта (favicon) в WordPress 4 завершено.3. На приведенном выше рисунке показано, как значок будет отображаться в большинстве браузеров.

3 простых способа добавить фавикон в WordPress

Один из часто игнорируемых аспектов веб-сайтов и онлайн-брендинга — это фавикон. Фавикон — это маленькое изображение, отображаемое на вкладке вашего браузера. Это поможет вам:

Создайте свою визуальную идентичность в Интернете
Улучшает взаимодействие с пользователем
Помогает укрепить ваш бренд

В этом посте вы узнаете, как добавить значок на свой веб-сайт WordPress.

Начало работы…

Ниже мы обсудим 3 метода добавления значка в WordPress.

Для первого метода потребуется квадратное изображение размером 512 × 512 пикселей.

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

Эта опция доступна, начиная с версии WordPress 4.3, но если по какой-либо причине у вас установлена более старая версия, вы захотите использовать один из последних 3 методов.

Вот что делать, если у вас нет версии 4.3:

Сначала вам нужно создать 16 × 16 или 32 × 32.ico файл. К сожалению, большинство программ для редактирования изображений не поддерживают сохранение в формате .ico напрямую, поэтому сначала вам придется создать изображение .png.

После того, как вы создали свой значок, вам необходимо преобразовать его в правильный формат. В Интернете есть множество создателей фавиконов, которые делают процесс легким и безболезненным.

Наиболее заметными из них являются: Faviconer и Dynamic Drive Favicon Tools. Все они бесплатны и отлично справляются с созданием значка в формате .ico.

Когда вы будете готовы, все, что осталось сделать, это добавить значок в WordPress.Я шаг за шагом проведу вас через каждый метод.

Метод 1: загрузите свой логотип через настройщик WordPress

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

На сегодняшний день это самый быстрый и простой способ.

Вам понадобится изображение размером 512 × 512 пикселей для загрузки, и вам не придется беспокоиться о его преобразовании в формат .ico — отлично!

Сначала войдите в настройщик WordPress, выбрав Внешний вид> Настроить :

Теперь следующий шаг может немного отличаться для вас, и я объясню, почему через секунду.

Для большинства тем вам следует перейти к пункту меню, который говорит: S ite Identity :

В некоторых темах этот параметр будет говорить что-то иное, чем Site Identity .

Я видел, что это называется:

Название сайта, слоган и логотип или Логотип и заголовок сайта (последний находился в другом меню под названием General ).

В любом случае вариант должен быть похож на один из приведенных выше.

Затем вы получите возможность загрузить значок вашего сайта / значок:

После загрузки нажмите Сохранить и опубликовать — все готово.

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

Метод 2: загрузка значка через страницу параметров вашей темы

Сегодня все больше и больше тем поставляется с большим количеством опций — некоторые из них даже включают возможность загрузки собственного значка. Естественно, в первую очередь следует искать страницу параметров вашей темы. Если у вас есть возможность загрузить изображение значка — отлично!

Просто загрузите созданное изображение, и все готово.Обязательно сохраните изменения и обновите страницу. Ваш значок должен быть там. Если вы его не видите, обязательно очистите кеш — это должно решить проблему.

Метод 3: использование плагина

Если ваша тема не поддерживает эту опцию, второй самый простой способ — добавить значок с помощью плагина.

Favicon от RealFaviconGenerator

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

Favicon Rotator

Favicon Rotator позволяет легко добавить значок — просто загрузите значок из меню Тема> Favicon, и он появится на вашем сайте. Вы можете добавить несколько изображений и отображать случайный значок для посетителей.

All In One Favicon

С помощью All In One Favicon вы можете загрузить свой значок, и он даже поддерживает значки для устройств Apple Touch.

К вам

Вот и все — 3 простых способа добавить значок в WordPress.

Это поможет придать вашему веб-сайту профессиональный вид и улучшить ваш брендинг, что замечательно.

И даже когда у людей открыто множество вкладок в браузере, ваша будет выделяться из-за вашего нового значка!

Как добавить значок в свой блог WordPress с помощью Hook + другие параметры • Crunchify

Последнее обновление 17 июля 2017 г. от App Shah 2 комментария

Значок (сокращенно от «Избранный значок»), также известный как значок ярлыка, значок веб-сайта, значок URL-адреса или значок закладки, представляет собой файл, содержащий один или несколько небольших значков, чаще всего 32 × 32 пикселей, связанных с конкретным веб-сайтом. сайт или веб-страницу. Веб-дизайнер может создать такой значок и установить его на веб-сайт (или веб-страницу) несколькими способами, а затем графические веб-браузеры будут использовать его.

Браузеры, которые поддерживают фавикон, обычно отображают фавикон страницы в адресной строке браузера и рядом с названием страницы в списке закладок.

Просто вставьте следующее в файл вашей темы WordPress function.php , сохраните его, и все готово.

function blog_favicon () {?>

/ Images / favicon.png «>

add_action (‘wp_head’, ‘blog_favicon’);

Измените URL-адрес значка по своему усмотрению. Также обратите внимание, что если в вашей теме не реализована функция wp_head () , этот рецепт не будет работать.

Другие способы:

1) Загрузите плагин All in One для веб-мастеров.

2) Поместите код ниже в раздел заголовка. Измените ссылку, указывающую на ваш значок фавикона.

Образец:

Присоединяйтесь к обсуждению

Поделитесь и оставьте нам несколько комментариев о том, что вы думаете по этой теме или хотите ли вы что-то добавить.