WordPress favicon: Create a Favicon – WordPress.org Documentation

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

• Детали
• Отзывы
• Установка
• Разработка

Поддержка

NOW WITH DARK MODE! Safely add an SVG favicon to your site! Don’t limit your site favicon to the .ico/png/jpg formats! Upload cool vector art from your favorite vector app in seconds! Support is common for SVG favicons in modern browsers. Favicon meta generated by the customizer will not be over-written, giving older browsers a fallback in the event they lack support SVG favicons.

Usage

Before uploading your SVG favicon, make sure the aspect ratio is 1:1. For Safari, create a copy of your SVG and do the following:

• Drop it to a single color (preferably black)
• Merge art onto a single layer
• Place it on a transparent background
• viewBox attribute must be set to «0 0 16 16»

Uploading: Under the SVG Favicon tab, click the “Upload SVG Favicon” field and upload your SVG favicon

Manifest: After uploading your SVG favicon, you can fill out the corresponding manifest. This step is optional. If you already have your site manifest, leave “Use this site manifest” unchecked.

Safari: The upload process for a pinned tab icon is the same as above. Please note that pinned tab icons should be 100% black with a transparent background. The mask icon color will determine the color of the pinned tab icon.

Dark Mode (NEW): Here is an example of how to enable dark mode in your svg favicon using the prefers-color-scheme media query:

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path.class-of-path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path.class-of-path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Credits

• Artwork by Online Web Fonts — license
• Mithril — license
• SVG Sanitizer — license
• Tippy. js — license
• Spectrum — license

• Upload SVG Favicon
• Upload Pinned Tab Icon for Safari

1. Install SVG Favicon either via the WordPress.org plugin directory or by uploading the files to your server.
2. Activate the plugin through the Plugins menu in WordPress.
3. Go to the Appearance > SVG Favicon to upload your SVG favicon.

Can I use svg favicons?

Check SVG favicon browser Compatibility

Can I use dark mode in my svg favicon?

YES! Here is an example of how to enable dark mode in your svg favicon using the prefers-color-scheme media query:

<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        path.class-of-path {
            fill: #000;
        }
        @media (prefers-color-scheme: dark) {
            path.class-of-path {
                fill: #fff;
            }
        }
    </style>
    <path fill-rule="evenodd" d="M0 0h26v16H0z"/>
</svg>

Why can’t I see my svg favicon after updating?

If you are running a caching plugin for your WordPress installation, trying emptying the caches. If that doesn’t work, try emptying your browser cache and restarting.

Safari’s pinned icon cache stubborn, what can I do?

Try the following:
1. Unpin the tab for your site
2. Quit Safari
3. Remove the Template Icons folder in your Home > Library > Safari folder

4. Restart Safari
5. Refresh the page your testing (page with your mask-icon)
6. Re-pin the tab

thank you it is working.

This plugin actually works. Reading the docs and posts also helped. Excellent work.

So, don’t know what the issue is. But it didn’t work out for me. I’ll have to go give a try to some other options. I’m giving 3 starts because 1 star is too cruel for a plugin with 1 other review.

After trying to optimize my png favicons with multiple sized and multiple exports, I found the SVG Favicon plugin. After installing, painlessly and within 5 minutes, I was able to include an SVG file for my favicon that scales cleanly to all sizes.

Highly recommended.

Посмотреть все 4 отзыва

«SVG Favicon» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• 415 Plugins

Перевести «SVG Favicon» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.2.3

• Updated for WP 6.0

1.2.2

• Fixed typos and updated language file

1.2

• Now with dark mode support

1.0

• Initial Release.

Оценки

Посмотреть все

• 5 звёзд 3
• 4 звезды 0
• 3 звезды 1
• 2 звезды 0
• 1 звезда 0

Войдите, чтобы оставить отзыв.

Участники

• 415 Plugins

Поддержка

Решено проблем за последние 2 месяца:

0 из 1

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

Как установить фавикон на 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 — через админ-меню Медиафайлы > Добавить новый.

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

Как создать собственный фавикон в WordPress

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

Простой способ создать профессиональное присутствие в Интернете — создать собственный значок значка. Когда вы добавляете свой логотип на вкладки браузера и результаты поиска, вы можете повысить узнаваемость бренда и рейтинг кликов (CTR).

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

Знакомство с фавиконками

Фавикон или «любимая иконка» — это изображение размером 16×16 пикселей, которое помогает брендировать содержимое вашего веб-сайта. Он был создан в 1999 году, чтобы помочь различать веб-страницы, добавленные в закладки.

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

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

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

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

Как создать собственный фавикон WordPress (4 метода)

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

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

Какой бы вариант вы ни выбрали, убедитесь, что вы создаете квадратное изображение. Фавиконы обычно отображаются размером 16 × 16 пикселей, но WordPress требует высоты и ширины не менее 512 пикселей.

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

1. Добавьте значок сайта с помощью настройщика WordPress 

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

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

Откроется настройщик WordPress. Затем перейдите к Settings > Site Identity :

Здесь вы увидите раздел с надписью Site Icon . Нажмите на Выберите иконку сайта и загрузите изображение фавиконки:

Обрежьте изображение по мере необходимости. С правой стороны вы можете увидеть превью фавикона:

После того, как вы закончите, нажмите Опубликовать .

Получайте содержимое прямо на свой почтовый ящик

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

2. Добавьте фавиконку с помощью конструктора страниц WordPress

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

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

Затем откройте любой пост или страницу в редакторе Elementor:

Перейдите Настройки сайта > Идентификация сайта . Здесь вы увидите название и описание вашего сайта. Также будут варианты для загрузки логотипа сайта и фавикона сайта:

Наведите курсор на серое поле под Фавикон сайта и нажмите Выбрать изображение . Загрузите свой значок и выберите Insert Media :

После загрузки вашего значка перейдите в нижнюю часть экрана и нажмите Обновление .

3. Установите плагин для фавиконки

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

Для этого процесса мы рекомендуем использовать Favicon Rotator. Этот бесплатный плагин WordPress позволяет добавить изображение фавикона за считанные минуты:

Установите и активируйте плагин. Теперь перейдите к Внешний вид > Фавикон 9.0040 :

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

Нажмите Добавить значок рядом с Значок браузера . Загрузите изображение фавикона:

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

Когда вы закончите, выберите Добавить значок браузера . Затем нажмите Сохранить изменения .

4. Создание фавикона вручную

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

Сначала загрузите файл изображения в такой инструмент, как Real Favicon Generator. Используя это программное обеспечение, вы можете сгенерировать пользовательскую кодировку вашего фавикона:

Начните с нажатия на Выберите изображение Favicon . После загрузки файла изображения Real Favicon Generator создаст предварительный просмотр вашего значка:

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

После настройки изображения прокрутите страницу вниз и нажмите Создайте свои значки и HTML-код :

Это покажет вам код вашего значка. Загрузите пакет Favicon и скопируйте HTML-код:

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

Затем откройте панель управления cPanel. Хотя у каждого хостинг-провайдера есть своя панель инструментов, вам нужно будет найти кнопку Загрузить файл s.

В DreamHost эта кнопка находится в левом нижнем углу:

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

Для этого откройте wp_content и нажмите на файл header.php . Затем выберите Изменить :

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

Элементы сильного бренда

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

Чтобы просмотреть, вот лучшие способы добавления значка на ваш веб-сайт WordPress:

1. Добавьте значок с помощью настройщика WordPress.
2. Используйте конструктор страниц, например Elementor.
3. Установите плагин favicon, например Favicon Rotator.
4. Закодируйте фавикон вручную.

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

Фавикон WordPress – Как его изменить

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

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

Что такое фавикон и зачем его использовать?

Слово favicon является сокращением от символа избранного и первоначально произошло от функции избранного Internet Explorer (также называемой закладками во многих браузерах). Это небольшое изображение, которое появляется рядом с URL-адресом веб-сайта в веб-браузере. Он также появится на вкладке вашего сайта.

Фавиконы помогают пользователям быстро находить веб-сайты, которые они добавили в закладки или добавили в список избранного.

Кроме того, добавление фавикона на веб-сайт WordPress — отличный способ улучшить брендинг веб-сайта.

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

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

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

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

Как создать фавиконку для своего веб-сайта Сделано в WordPress

Первый шаг — выбрать подходящую тему для фавиконки. Конечно, лучше всего для этого подходит ваш логотип. Затем вы переводите это в квадратный формат (512 x 512 пикселей).

Затем сохраните файл в формате JPG. Если вы хотите, чтобы фон был прозрачным, вы также можете сохранить изображение в формате PNG или GIF.

С созданным файлом вы, наконец, можете создать свой собственный значок. Либо непосредственно в WordPress, либо с помощью онлайн-инструмента.

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

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

Пример значка Apple Touch:

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

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

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

Как легко и быстро изменить значок WordPress

В зависимости от темы, которую вы используете, значок в WordPress можно изменить относительно легко. Единственное, что нужно отметить, это то, что фавикон WordPress должен быть квадратным. Часто рекомендуется размер изображения 512 x 512 пикселей (может варьироваться в зависимости от темы). На основе исходного изображения затем в фоновом режиме создаются (несколько меньших) фавиконов, которые отображаются в зависимости от конечного устройства и/или используемого программного обеспечения (например, для планшетов, iPhone, ПК и т. д.).

Во многих темах WordPress настройка фавикона находится в настройщике.

Ниже я покажу вам, как изменить значок WordPress в следующих темах:

Kadence WP

Astra

Avada

Kubio

Kadence WP эту тему, вы должны сначала вызвать Customizer. (Панель инструментов -> Тема -> Настройщик)

После открытия Настройщика в левом меню навигации можно выбрать вкладку «Идентификация страницы».

Теперь можно установить желаемый фавикон (здесь Kadence называет его значком веб-сайта).

После нажатия на значок «Выбрать веб-сайт» можно загрузить фавикон или выбрать существующее изображение из медиатеки WordPress.

Astra — настройка фавикона WordPress

Как и в теме Kadence, настройки фавикона также находятся в настройщике темы WordPress Astra. (Панель инструментов -> Тема -> Настройщик)

В Настройщике щелкните элемент меню Идентификация сайта. После этого можно установить фавикон. (Термин значок веб-сайта используется здесь вместо фавикона).

Тема WordPress Avada — установка фавикона

С одной стороны, тема WordPress Avada предлагает возможность установить значок фавикона в настройщике.

Для этой темы это работает так же, как я описал для темы Hello Elementor.

С другой стороны, Avada Extra предлагает собственные варианты Avada. В этих опциях можно и нужно установить фавикон при использовании темы Avada.

Если вы хотите изменить значок WordPress, наведите указатель мыши на запись Avada на панели инструментов и выберите «Параметры». Затем открывается вид на бесчисленные (и, на мой взгляд, очень запутанные) настройки, которые предлагает Avada. Нажмите на пункт меню Logo, а затем выберите Favicon. Теперь вы можете установить фавикон, а также значок Apple iPhone и значок Apple iPad.

Kubio Builder – Изменить значок

Если вы используете Kubio Builder для создания целевой страницы или любой другой страницы в WordPress и хотите изменить значок на своем веб-сайте, перейдите в раздел Внешний вид -> Общие настройки -> Идентификация сайта -> и затем вы увидите вариант значка сайта. Здесь вы можете легко изменить фавикон на своем сайте с помощью Kubio Builder.

Плагин WordPress – Фавикон от RealFaviconGenerator

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

Один из способов исправить любые проблемы с фавиконкой WordPress — использовать плагин Favicon by RealFaviconGenerator. Как следует из названия, этот плагин представляет собой генератор фавиконок. В частности, осуществляется доступ к генератору favicon веб-сайта https://realfavicongenerator.net/.

После установки и активации плагина вы можете настроить свой значок WordPress на панели инструментов в разделе «Дизайн» -> «Favicon». После того, как вы установили изображение в качестве значка, доступ к генератору значка осуществляется через API. При этом плагин генерирует несколько фавиконов, каждый из которых выводится соответствующим образом для различных конечных устройств и приложений (например, для iPhone, планшета, Internet Explorer и т.