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

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

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

Процесс этот не сложный, не стоит откладывать на потом. «Потом» может не наступит ни когда. 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

Для тех кому надо загрузить значок для сайта в формате SVG используйте специальный плагин — SVG Favicon для WordPress.

Плагин SVG Favicon для WordPress

Загрузите фавиконы SVG на свой сайт ВордПресс! Безопасно добавьте значок SVG в ВордПресс! Не ограничивайте фавикон сайта форматами .ico/png/jpg! Загружайте крутые векторные изображения из вашего любимого векторного приложения за считанные секунды! 

SVG Favicon WordPress

Поддержка значков SVG распространена в современных браузерах. Мета-иконки, сгенерированные настройщиком, не будут перезаписаны, что дает более старым браузерам запасной вариант на случай, если они не поддерживают значки SVG.

Установите плагин SVG Favicon через каталог плагинов WordPress.org (через админку). Активируйте его. Перейдите в раздел Внешний вид — SVG Favicon , чтобы загрузить свой SVG-фавикон.

Настройки SVG Фавикон

На странице настроек плагина вы можете установить все параметры использования SVG Favicon. Загрузка: на вкладке SVG Favicon щелкните поле Загрузить SVG Favicon и загрузите свой SVG-фавикон на сайт ВордПресс.

Перед загрузкой фавиконки SVG WordPress убедитесь, что соотношение сторон составляет 1:1.

Если вы используете плагин кэширования WordPress, рекомендуется очистить кэш, чтобы посетители могли видеть обновления вашего значка SVG.

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

Как установить фавикон на WordPress сайт и правильно подключить

В этой статье разбираемся, как установить фавикон на WordPress сайт и правильно его подключить.

Что такое favicon и зачем нужно устанавливать на сайт

Это маленькая картинка, которая видна слева во вкладке браузера на открытой странице сайта. Также отображается в поисковой выдаче Яндекс. Размер изображения рекомендуется создавать небольшой – от 120 до 512 пикселей. Если меньше, то может нечетко выглядеть, будет менее заметным среди сохраненных избранных закладок.

Какой лучше формат иконки сделать

Это могут быть типы файлов: SVG, PNG, ICO, GIF, JPEG, BMP. Чаще всего используют первые три. А вообще алгоритм такой – четче иконка и меньший размер файла.

Как создать фавиконку бесплатно

Можете скачать уже готовую (с бесплатных ресурсов типа freepik.com, iconsdb.com и других, которые отлично ищутся в интернете) или создать свою с помощью сервиса favicon.io. Последний позволит сгенерировать Favicon из загруженного фото, текста или смайлика Emoji, скачать в форматах ICO/PNG и в разных размерах.

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

Разберем 2 варианта.

С помощью Настройщика темы

Обычно в любом WP-шаблоне пользователь сможет задать фавиконку для своего сайта – в админ-разделе Внешний вид > Настроить > Свойства сайта.

В других темах расположение опции добавления фавикона может отличаться. Например, для Astra нужно в Кастомайзере перейти в секцию Шапка > Айдентика сайта.

Прописать код вручную

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

Также в Яндекс.Вебмастере может возникнуть ошибка “Робот не смог загрузить или обработать файл с изображением, которое может отображаться во вкладке браузера и возле названия сайта в поиске“.

Добавить информацию о фавиконе и его формате можно несколькими способами. Например, в плагинах Clearfy Pro, Code Snippets или через файл functions.php.

Какой вариант вы бы не выбрали, в HTML-раздел <head> ВордПресс-сайта нужно добавить код

<link rel="icon" href="URL-ссылка на картинку фавиконки" type="image/jpeg">

Значение атрибута type зависит от типа картинки:

• . ico – “image/x-icon”,
• .jpeg – “image/jpeg”,
• .png – “image/png”,
• .bmp – “image/bmp”,
• .gif – “image/gif”.

Фавиконку на хостинг можете загрузить с помощью встроенных средств CMS – через админ-меню Медиафайлы > Добавить новый.

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

Как добавить Favicon на ваш сайт WordPress

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

Ищете простой способ добавить значок WordPress на свой сайт?

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

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

Почему вам нужно создать фавикон WordPress

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

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

Эти значки скучные, не очень запоминающиеся и могут сделать ваш сайт непрофессиональным. Поэтому создание собственного фавикона WordPress — это одна из первых вещей, которую вы захотите сделать для своего сайта.

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

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

Как добавить значок на ваш сайт WordPress (в 3 шага)

В следующих нескольких разделах мы обсудим, как создать фавикон WordPress и добавить его на свой веб-сайт. Давайте начнем!

Шаг 1. Спланируйте дизайн своего фавикона

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

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

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

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

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

Шаг 2. Создайте свой значок

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

В противном случае вам нужно будет создать свой значок. Есть несколько способов решить эту задачу:

• Наймите дизайнера, чтобы он создал его для вас. Это может показаться излишним для такого маленького и простого изображения, но, потратив немного денег, вы получите более качественный профессиональный результат. Кроме того, дизайнер может дать совет о том, как оптимизировать и изменить размер вашего изображения для различных способов доставки.
• Создайте свою фавиконку с нуля, используя такую ​​программу, как Photoshop. Если у вас есть солидные дизайнерские навыки или свободное время, создание фавикона вручную предлагает вам полный контроль.
• Используйте средство создания фавиконов, чтобы упростить процесс. Если вы не хотите нанимать профессионала, но вам неудобно делать все это самостоятельно, существует множество инструментов, которые помогут преодолеть разрыв. Многие из них бесплатны и позволяют либо создать свой значок с использованием пустого шаблона, либо загрузить и отредактировать уже существующее изображение.

Учитывая последний момент, Faviconer — это простой инструмент в браузере, который может выполнить работу:

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

Другими преимуществами этих инструментов для создания фавиконов являются помощь в сохранении простоты изображения и различные параметры размера, к которым у вас будет доступ. Браузеры и устройства различаются, но для большинства из них требуется, чтобы фавиконы были размером 16 x 16 или 32 x 32 пикселя. Это означает, что вы можете создать увеличенное изображение (512 x 512 пикселей является стандартным для WordPress) и уменьшить его по мере необходимости.

Шаг 3. Добавьте фавикон WordPress на свой сайт и оптимизируйте его

Когда у вас есть готовая иконка, вы можете добавить ее на свой сайт несколькими способами.

Используйте настройщик WordPress — подходит для большинства случаев

Самый простой способ — перейти к Внешний вид > Настроить на панели управления и выбрать вкладку Идентификация сайта :

Наряду с некоторыми основными параметрами здесь вы найдете раздел под названием Значок сайта 9.0078 . Здесь вы можете загрузить версию своего изображения размером 512 x 512 пикселей, которая будет использоваться как в качестве фавиконки, так и в качестве значка мобильного приложения.

Используйте бесплатный плагин — обеспечивает совместимость со всеми устройствами

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

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

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

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

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

После этого вы можете нажать кнопку внизу страницы, чтобы сгенерировать фавиконы и вернуться на панель инструментов:

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

Заключение

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

Как вы видели, процесс создания фавиконки WordPress состоит всего из трех шагов:

1. Спланируйте дизайн своего фавикона.
2. Создайте свой значок с нуля или с помощью инструмента создания, такого как Faviconer.
3. Добавьте свой значок WordPress на свой сайт и оптимизируйте его с помощью настройщика WordPress или плагина, такого как Favicon, от RealFaviconGenerator.

У вас есть вопросы о том, как создать или оптимизировать свой значок WordPress? Спросите в разделе комментариев ниже!

Бесплатная направляющая

5 основных советов по ускорению

вашего сайта WordPress

Сократите время загрузки даже на 50-80%

просто следуя простым советам.

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

Ана Линн Амелио Обновлено 8 сентября 2022 г.

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

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

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

Приступаем к работе…

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

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

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

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

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

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

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

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

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

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

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

Это самый быстрый и простой способ.

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

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

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

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

В некоторых темах этот пункт будет отличаться от Идентификатор объекта .

Я видел его под названием:

Название сайта, слоган и логотип или Логотип и заголовок сайта (последний был в другом меню под названием Общее ).

Несмотря ни на что, опция должна выглядеть примерно так, как показано выше.

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

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

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

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

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

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

Способ 3: с помощью плагина

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

Favicon Rotator

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