Файл фавиконки не найден wordpress

Обновлено: 21.11.2024

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

Что такое фавикон?

Возможно, вы видели значки фавиконов по всему Интернету, иногда даже не подозревая об этом. Это очень маленькие значки (обычно 16 x 16 пикселей), которые располагаются рядом с заголовком страницы на панели вкладок браузера:

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

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

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

Зачем добавлять фавикон на свой сайт WordPress?

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

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

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

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

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

Кроме того, вы можете создать свой значок вручную, используя один из многих инструментов для создания значков, таких как Favicon.cc и Faviconer. Такие платформы, как Adobe Photoshop и GIMP, также полезны для создания высококачественных фавиконов.

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

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

Шаг 1. Выберите подходящий размер фавиконки

Фавикон может иметь размер от 16 x 16 пикселей до 512 x 512 пикселей. Таким образом, вам нужно будет принять решение об устройствах и разрешениях, которые вы хотели бы удовлетворить.

Вот краткий обзор некоторых рекомендуемых размеров фавиконов:

16 пикселей: это стандартный размер для всех браузеров, представляющий собой минимальный размер.
24 пикселя: этот размер используется для закрепленного сайта в Internet Explorer 9.
32 пикселя: этот размер используется в некоторых инструментах, например на странице новой вкладки в Internet Explorer, кнопке на панели задач в Windows и боковой панели Safari "Читать позже".
57 пикселей — размеры стандартного главного экрана iOS (т. е. не Retina).
72 пикселя: этот размер соответствует стандартному значку на главном экране iPad.
114 пикселей: более современные устройства Apple захотят использовать этот размер, так как дисплеи Retina используют преимущества двойного стандартного размера для четкого изображения.

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

Шаг 2. Создайте свой фавикон и сохраните его в подходящем формате

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

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

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

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

Инструменты для создания фавиконок

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

Favicon.cc – это ведущее средство создания фавиконов, которым очень легко пользоваться. Вы просто выбираете цвет, закрашиваете каждый пиксель, а затем нажимаете кнопку Загрузить:

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

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

Наконец, существуют также инструменты, позволяющие преобразовывать уже существующее изображение в фавикон, например Dynamic Drive FavIcon Generator и RealFaviconGenerator. Оба предлагают гибкость при преобразовании вашего значка в разные размеры, хотя мы должны отдать предпочтение последнему, основываясь на его широких возможностях для изменения размера ваших файлов.

Плагины для создания значков

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

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

1. Фавикон от RealFaviconGenerator

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

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

2. Генератор героических фавиконок

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

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

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

Есть несколько вариантов на выбор, если вы ищете способы добавить фавикон на свой сайт WordPress:

Используйте настройщик WordPress. Если в используемой вами теме предусмотрена эта опция, вы можете легко добавлять значки сайтов с помощью настройки. Просто выберите Внешний вид > Настроить на панели инструментов вашего сайта, а затем выберите Идентификация сайта > Значок сайта.
Загрузите фавиконку со страницы параметров темы. Не все темы оснащены панелью параметров, но если у вас есть, это еще один вариант, который открыт для вас. Вам, вероятно, придется изучить документацию по вашей теме или пройтись по ее страницам настроек, чтобы найти вариант загрузки.
Используйте подключаемый модуль. Если вы используете тему, которая не позволяет вставлять значок через настройщик или не имеет встроенной панели параметров, вы можете вставить значок через плагин. Например, Favicon от RealFaviconGenerator — один из бесплатных и простых в использовании плагинов, о которых мы упоминали ранее. Такой подход помогает гарантировать, что ваш значок фавикона имеет правильный тип файла и соответствует различным стандартам для конкретных устройств.

Давайте подробнее рассмотрим, как именно вы можете добавить значок сайта с помощью этих трех методов.

Использование настройщика WordPress

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

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

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

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

Загрузка фавиконки через страницу параметров темы

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

Например, тема WordPress Twenty Nineteen управляет значками избранного через настройщик и не имеет отдельной страницы параметров. Однако премиум-тема Avada создает новый пункт меню и имеет страницу параметров темы, на которую можно напрямую добавить значок значка:

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

Использование плагина WordPress Favicon

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

Один из самых популярных плагинов для этого — All In One Favicon:

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

Этот плагин также имеет удобный пользовательский интерфейс, в который вы можете загружать свои изображения. All In One Favicon поддерживает три типа изображений значков, включая форматы GIF, ICO и PNG.

Favicon не отображается?

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

Вы использовали неправильный формат изображения. Большинство современных браузеров поддерживают фавиконы в формате GIF или PNG. Однако некоторые старые браузеры этого не сделают. Большинство современных браузеров сначала ищут файл favicon.ico в корневом каталоге вашего домена, поэтому лучше придерживаться формата файла ICO, чтобы избежать ошибок отображения.
Ваш значок не соответствует размеру. Формат файла ICO хранит несколько версий изображения в разных размерах и разрешениях, чтобы пользователи могли просматривать их на разных устройствах. Однако рекомендуется загружать несколько размеров favicon.ico. Это поможет обеспечить наилучшее взаимодействие с пользователем независимо от того, какое устройство используется.

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

Многосайтовый значок WordPress

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

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

4 полезности для мультисайтовых фавиконов WordPress

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

1. Все в одном фавиконе

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

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

2. Свежий фавикон

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

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

Fresh Favicons — это плагин премиум-класса, который можно приобрести за 21 доллар США. Сюда входят и будущие обновления подключаемого модуля.

3. Бренда Про

Branda Pro – это подключаемый модуль с полным спектром услуг, предназначенный для веб-разработчиков, которым необходим полный контроль над персонализацией и брендингом. Вы можете попробовать его бесплатно в течение семи дней.Чтобы использовать его на неограниченном количестве сайтов, предлагается подписка за 49 долларов США в месяц.

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

4. Фавикон Genie WP

Подключаемый модуль Genie WP Favicon – это бесплатный и простой, но эффективный плагин, который позволяет легко загружать изображения на сайт WordPress. Затем плагин устанавливает изображение в качестве вашего фавикона.

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

Вдохните жизнь в свой бренд с помощью движка WP

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

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

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

Одна проблема, с которой я сталкиваюсь каждый раз, заключается в том, что инструменты тестирования скорости, такие как Pingdom и WebPageTest, жалуются на отсутствие значка значка (ошибка 404). Расскажите о проблемах первого мира. 😂 Поэтому сегодня я поделюсь с вами парой быстрых приемов, чтобы просто создать пустой фавикон без каких-либо изображений или инструментов для обработки фотографий. Это хорошая мелочь, чтобы добавить в закладки.

Отсутствует Favicon на новом сайте WordPress

Например, в Pingdom отсутствующий значок значка вызывает ошибку 404.

Отсутствие значка вызывает ошибку 404 в Pingdom

В WebPageTest это еще более очевидно, так как ошибка 404 явно выделяется красным.

Отсутствие значка вызывает ошибку 404 в WebPageTest

Создать пустой фавикон с кодом (без изображений)

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

Прежде чем я продолжу, я должен отдать должное Дэвиду Уолшу, его статья определенно вдохновила меня на это. Но иногда мне проще найти что-то в своем собственном блоге. Это эгоистично? 😉 Возможно, но я думаю, что использование собственного блога в качестве документации поможет всем.

Вариант 1. Используйте наш плагин Perfmatters

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

Чтобы добавить пустой значок фавикона, просто перейдите в настройки Perfmatters, перейдите на вкладку "Дополнительно" и включите параметр "Добавить пустой значок фавикона".

Создать пустую фавиконку

Вариант 2. Перетащите код в заголовок WordPress

Ваш второй вариант — просто поместить следующий код прямо в файл header.php вашей темы WordPress перед тегом.

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

Вариант 3. Используйте фрагмент кода PHP

Мне нравится бесплатный плагин Code Snippets от Shea Bunge. На самом деле, я обычно всегда делаю небольшие настройки PHP на своих сайтах (даже при новой установке), и поэтому я всегда устанавливаю этот плагин.

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

Вот код фрагмента PHP:

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

Фрагмент PHP для пустой иконки сайта

И все! Больше никаких отсутствующих фавиконов или ошибок 404. Тест скорости прочь. А если вы работаете с рабочим сайтом, я всегда рекомендую загружать окончательную версию вашего фавикона из CDN.

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

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

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

Как правильно установить фавиконы

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

Загрузите файл favicon.ico в нужный каталог на вашем сайте.
Вставьте этот код в раздел:

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

Распространенные причины, по которым ваш фавикон не отображается

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

Вот распространенные причины, по которым ваш значок не отображается, и способы их устранения:

Синтаксические ошибки

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

В приведенном выше коде есть 1 простая синтаксическая ошибка:

Ваш браузер кэшировал ваш сайт как сайт без фавикона

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

Неверный путь к файлу

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

Если ваш CSS и значок являются родственными в том смысле, что они находятся на «одном уровне», убедитесь, что у вас нет косой черты перед именем файла фавикона, так как ваш href должен быть следующим:

Браузер не отображает фавиконы, если они локальные

В таких браузерах, как Chrome и Safari, значки избранного не отображаются, если они являются локальными (не загружены на сервер). Chrome, например, может отображать значок только в том случае, если он находится в папке загрузок.

Ссылка для создания значка сайта находится не в том месте

Важно разместить ссылку для добавления вашего фавикона в нужное место. Он должен быть размещен в разделе заголовка вашей веб-страницы, а не где-либо еще. Хотя, если он будет помещен в тело, он может работать в некоторых браузерах, другие браузеры, такие как Chrome, не загрузят его.

Имя файла вашего фавикона по-прежнему используется по умолчанию

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

А теперь давайте сосредоточимся на том, почему значки избранного не отображаются в Chrome, WordPress, Shopify, Wix и Squarespace:

Причины, по которым Favicon не отображается в Chrome

Вот почему ваш значок может не отображаться в Chrome:

Неверный размер значка

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

Системы управления контентом (CMS) также имеют определенные рекомендуемые размеры. WordPress рекомендует 512 x 512 и Squarespace 300 x 300. Эти CMS могут изменять размер фавикона в соответствии с различными сценариями. Например, для закладок требуется больший размер, а для мобильных устройств может потребоваться меньший размер.

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

Наличие файла favicon в корневом каталоге, но без добавления ссылки, которая его «импортирует»

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

Это то, что импортирует фавикон на ваш сайт.

Причины, по которым Favicon не отображается конкретно в Shopify

Вот причины, по которым ваш значок может не отображаться в Shopify:

Ссылка для импорта фавикона находится в неправильном месте

Там, где вы размещаете ссылку, важно. Убедитесь, что именно в разделе, а не .

Причины, по которым Favicon не отображается конкретно в WordPress

Вот причины, по которым ваш значок может не отображаться в WordPress:

В Customizer значок сайта предназначен для фавиконки AMP

Если вы используете Customizer для загрузки пользовательского значка favicon, он может не работать, поскольку он предназначен для страниц, использующих AMP. Чтобы решить эту проблему, вам нужно сначала удалить значок, который вы загрузили с помощью Customizer. Затем вам нужно установить плагин под названием «Favicon by RealFavicon Generator». Этот плагин позволяет вам загружать изображение, которое вы предпочитаете использовать в качестве фавикона. Он должен быть в формате png или jpg. Плагин поможет вам преобразовать его в .ico.

Может быть плагин, добавляющий элементы тела в ваш

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

Вы не указали тип изображения, если это не .ico

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

Вам также необходимо добавить файл .ico в корень сайта.

Причины, по которым Favicon не отображается конкретно на Squarespace

Вот почему ваш значок может не отображаться в Squarespace:

Кэшированная версия еще не признана недействительной

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

Вы все еще находитесь в CMS

Если вы все еще вошли в свою CMS, она может по-прежнему отображать значок Squarespace по умолчанию. Вам нужно выйти из CMS, чтобы увидеть свой собственный значок.

Заключение

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

Внедрение значков фавиконов не всегда может проходить гладко, и мы рассмотрели распространенные причины, по которым значки фавиконов не отображаются. Мы даже изучили проблемы, которые могут возникнуть при использовании определенных систем управления контентом — CMS, таких как WordPress, Shopify или SquareSpace. Как вы могли заметить, большинство проблем достаточно просты, и вы можете их исправить. Однако не стесняйтесь обращаться за профессиональной помощью, когда это необходимо.

Джей Кан

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

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

Таким образом, это важная часть вашего бренда. При правильном использовании ваш значок или значок сайта может помочь пользователям легко идентифицировать ваш бизнес. Это может помочь повысить узнаваемость бренда и даже улучшить взаимодействие с пользователем (UX).

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

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

Преимущества использования фавиконки WordPress

Если у вас когда-либо было открыто слишком много вкладок одновременно (вина!), вы, вероятно, оцените полезность значка значка. Фавикон позволяет пользователям быстро идентифицировать ваш веб-сайт, когда в их браузере открыто несколько вкладок:

Фавикон Kinsta в браузере Chrome

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

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

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

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

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

Раньше для фавикона приходилось использовать определенный файл ICO. Однако в настоящее время все современные браузеры поддерживают использование файлов ICO, PNG и GIF для вашего фавикона. JPEG также широко поддерживается (читай: JPG против JPEG), но не во всех версиях Internet Explorer, что делает его менее подходящим для использования с фавиконками.

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

RealFaviconGenerator (облачная версия плагина, о которой мы поговорим позже) — отличный вариант, потому что:

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

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

Чтобы использовать RealFaviconGenerator, начните с загрузки изображения, которое вы хотите использовать, нажав Выберите изображение Favicon:

Загрузка исходного изображения фавикона в RealFaviconGenerator

На следующем экране вы можете настроить конкретные сведения о вашем наборе значков (при желании). Когда вы закончите, прокрутите вниз и нажмите «Создать фавиконы и HTML-код»:

Экран параметров генератора фавиконок в RealFaviconGenerator

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

Экран загрузки пакета Favicon

Не забудьте оставить эту страницу открытой, если вы планируете вручную добавить значок значка на свой сайт.

Советы по созданию фавиконки WordPress

Есть несколько советов по дизайну и форматированию, о которых стоит упомянуть и изучить перед созданием фавикона. Самое главное, рекомендуемый размер фавиконки – 512 × 512 пикселей.

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

Кроме того, важно отметить, что ваш фавикон будет отображаться в виде квадрата 16 x 16 пикселей. Следовательно, вы хотите выбрать изображение, которое будет хорошо выглядеть, когда оно уменьшится до этих размеров. Хотя он будет отображаться в этом размере, его высота и ширина должны быть не менее 512 пикселей.

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

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

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

1. Использование настройщика WordPress для загрузки фавиконки

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

Все, что вам нужно, это изображение размером не менее 512 x 512 пикселей. WordPress возьмет на себя остальную часть процесса. Чтобы начать, перейдите в раздел «Внешний вид» → «Настроить» на панели инструментов WordPress:

Меню «Внешний вид» в WordPress

Оттуда перейдите на вкладку "Идентификация сайта":

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

Хотите узнать, как мы увеличили трафик более чем на 1000 %?

Присоединяйтесь к более чем 20 000 человек, которые получают нашу еженедельную рассылку с полезными советами по WordPress!

Опция «Идентификация сайта» в настройщике WordPress

Затем найдите внизу раздел "Значок сайта" и нажмите кнопку "Выбрать значок сайта":

Кнопка «выбрать значок сайта» в настройщике WordPress

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

Получив понравившееся изображение, нажмите на него и выберите «Выбрать» в правом нижнем углу:

Выбор изображения фавикона в WordPress

Если ваше изображение еще не является идеальным квадратом (например, 512 × 512 пикселей), WordPress даст вам возможность обрезать его на следующем экране.

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

Как только вы будете довольны тем, как все выглядит, нажмите «Обрезать изображение», чтобы завершить свой выбор:

Обрезка изображения фавикона в WordPress

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

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

Если вы предпочитаете плагин, а не нативную функциональность значков сайта WordPress, вы можете использовать популярный бесплатный плагин под названием Favicon от RealFaviconGenerator (облачный инструмент, который мы обсуждали ранее).

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

Плагин Favicon by RealFaviconGenerator для WordPress

После активации плагина перейдите в раздел Внешний вид → Фавикон, чтобы создать свой набор значков. Все, что вам нужно сделать, это выбрать или загрузить изображение размером не менее 70 x 70 пикселей (в идеале 260 x 260 пикселей):

Боретесь с простоями и проблемами WordPress? Kinsta — это решение для хостинга, разработанное с учетом производительности и безопасности! Ознакомьтесь с нашими планами

Экран для добавления фавикона в WordPress с помощью плагина

Выбрав изображение, нажмите «Создать фавикон». Когда вы нажмете эту кнопку, плагин перенесет вас за пределы вашего сайта WordPress на сайт RealFaviconGenerator.

В нижней части сайта прокрутите вниз и выберите «Создать свои значки и HTML-код» (см. предыдущий раздел). Пока инструмент работает, Real Favicon Generator вернет вас на панель инструментов WordPress:

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

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

3. Добавление фавиконки вручную через FTP

Если вы предпочитаете делать что-то вручную, вы можете добавить фавикон на свой сайт WordPress через протокол передачи файлов (FTP) или файловый менеджер, если ваш хост использует cPanel.

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

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

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

Получите доступ к файлам вашего сайта либо через FTP-клиент, либо через файловый менеджер в cPanel вашего хостинга.
Найдите корневой каталог вашего сайта и загрузите содержимое пакета значка (favicons.zip)

Файлы должны находиться в той же папке, что и ваши папки wp-admin и wp-content. Затем возьмите код, который RealFaviconGenerator предоставил вам ранее, и либо:

Используйте подключаемый модуль, например Insert Headers and Footers, чтобы добавить его в заголовок темы.
Вставьте его непосредственно в раздел вашей темы, отредактировав файл header.php вашей темы.

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

Для этого установите и активируйте Вставить верхние и нижние колонтитулы. Затем перейдите в «Настройки» → «Вставить верхние и нижние колонтитулы» и вставьте свой код в раздел «Сценарии в верхнем колонтитуле»:

Добавление кода фавикона с помощью подключаемого модуля «Вставить верхние и нижние колонтитулы»

Не забудьте сохранить изменения. Тогда все готово!

Дополнительные советы по использованию фавиконов WordPress

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

Вы также можете рассмотреть возможность использования сети доставки контента (CDN) для доставки изображений фавиконки. Все три метода, которые мы обсуждали в этом посте, сохраняют ваши изображения favicon на вашем сервере. Однако вы можете еще больше оптимизировать свой сайт, используя CDN для показа этих изображений.

Когда вы устанавливаете Cloudflare или такой сервис, как KeyCDN, браузеры посетителей будут загружать ваш значок из вашей CDN, а не с сервера вашего сайта. Если вы используете такой плагин, как CDN Enabler, он должен автоматически переписать URL-адрес вашего фавикона WordPress для работы с вышеуказанными методами.

Обзор

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

Использование настройщика WordPress для загрузки значка сайта.
Установка подключаемого модуля, например Favicon от RealFaviconGenerator.
Добавление значка значка вручную с помощью FTP-клиента или файлового менеджера.

Экономьте время, деньги и повышайте эффективность сайта с помощью:

Мгновенная помощь от экспертов по хостингу WordPress, круглосуточно и без выходных.
Интеграция с Cloudflare Enterprise.
Глобальный охват аудитории благодаря 29 центрам обработки данных по всему миру.
Оптимизация с помощью нашего встроенного мониторинга производительности приложений.

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

Отобранные статьи по теме

Блог

Как улучшить навигацию по сайту (с примерами и причинами, почему вы должны это сделать)

Навигация по веб-сайту влияет на то, как посетители просматривают ваши страницы. Если вы пропустите это, это негативно повлияет на ваши конверсии, время на странице и…

Блог

Шрифты WordPress: все, что вам нужно знать в 2022 году

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

Блог

Как правильно использовать шрифты значков WordPress (лучше производительность)

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

Подпишитесь на нашу рассылку

Получите премиум-контент на отмеченной наградами платформе хостинга WordPress

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

Войдите на MyKinsta или ознакомьтесь с демо-аккаунтом

Читайте также: