Файл favicon не найден wordpress
Сегодняшний пост будет о том, как добавить favicon на ваш сайт WordPress. Я расскажу о нескольких способах добавления.
Каждый сайт должен иметь значок. Несмотря на небольшой рост, значки (или фавконки сайтов) используются веб-браузерами для мощного представления вашего сайта (или бренда). Фавиконки используются не только для отображения небольшого изображения на вкладке вашего браузера, они также могут быть использованы для закладок и окон Windows. WordPress позволяет легко добавить значок сайта на ваш сайт прямо из настройщика. И теперь это рекомендуемый способ сделать это. Но есть и несколько других способов, которые могут удовлетворить ваши потребности.
Что такое favicon?
Favicon (сокр. от англ. FAVorites ICON — "значок для избранного") — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Традиционно использовались изображения размера 16×16 пикселей формата ICO, помещённые в корневой каталог сайта под именем favicon.ico.
Наименование и размещение
Возможно, вы помните дни, когда фавикон должен был иметь точное имя файла «favicon.ico». Затем вы добавили бы его в свой корневой каталог, и это было в основном так. Времена изменились, и, к счастью, WordPress тоже. Теперь вы можете назвать свой файл как угодно, сохранить его в других форматах и сохранить в любом месте на вашем сайте. Если вы используете настройщик WordPress для добавления значка сайта (favicon), WordPress создаст несколько изображений и сохранит их в папке мультимедиа.
Примечание: Размещение Favicon.ico в корневом каталоге все еще является хорошей идеей в качестве запасного варианта, но будьте осторожны, чтобы использовать правильный метод или получить некоторую помощь от плагина.
Формат ico
Традиционно иконки создаются в виде файла ICO (favicon.ico). Файл ICO позволяет хранить несколько изображений разных размеров в одном файле, что позволяет браузеру (настольному и мобильному) выбирать необходимый размер из доступных изображений. Проблема с форматом ico состоит в том, что не многие люди знают, что это такое или как его создать. Вы можете создать ICO файлы в графическом редакторе, таком как Gimp, но мне кажется, что гораздо проще испольховать онлайн генератор favicon (я использую всегда этот), который делает процесс очень легко, особенно для создания значков с прозрачным фоном.
К счастью, с выпуском WordPress 4.3 нам не нужно беспокоиться о создании значка в формате ico, чтобы добавить его на ваш сайт. У настройщика есть опция «Иконка сайта», которая принимает более популярные форматы, такие как png, gif и jpeg. Подробнее об этом позже.
Примечание: стоит упомянуть, что некоторые старые браузеры поддерживают только формат ico и ничего более и могут стать необходимым резервным вариантом для старых версий браузеров. Поэтому, если вы ищете лучшее из обоих миров (например, PNG и ICO), вам может понадобиться заглянуть в плагин или добавить его вручную.
Как добавить favicon на ваш сайт WordPress в 3 способа
По этой же теме:
Favicon by RealFaviconGenerator - создать и установить свой Favicon
Плагин более функционален, чем предыдущий. С помощью этого модуля можно создать Favicon из любой картинки, а также генерировать иконку для мобильных браузеров iPhone / Ipad, устройств Android. После установки и активации плагина переходите сразу: Внешний вид - Favicon:
Далее, выберете из своей библиотеки медиафайлов нужную картинку (загрузить квадратную картинку, по крайней мере, 70x70, рекомендуется: 260x260 или более), затем нажимаете на кнопку Generate Favicon и вас перебросит на онлайн сервис realfavicongenerator, где вы можете настроить, по своему желанию, все нужные иконки:
Здесь, придётся воспользоваться переводом браузера, сервис на английском языке, но визуально и так всё понятно. После всех настроек нажимаете кнопочку "Generate your Favicons and HTML code" и вас перебросит назад в вашу админку сайта. Где можете посмотреть результат, то есть, ваш текущий Favicon:
А если кликнуть по кнопке Check your Favicon, то можно проверить их на сервисе, как иконки будут выглядеть на различных устройствах:
Ну вот, дамы и господа, пожалуй и всё на сегодня. Надеюсь, было вам полезно. А я прощаюсь с вами, совсем не надолго. Удачи и до скорой встречи.
и теперь браузер вообще никакого favicon.ico не видит.
Удалить всё что вы загрузили и прописали и впредь знать что фавикон на сайтах WP и в любой теме устанавливается вот так:
Час от часу не легче… Я поменял текст header.php на следующий:
— и сайт …перестал работать вообще. Удалил — то же самое. Что происходит?
Правда я еще пытался почистить кэш на последний час, но это было долго, и я закрыл страницу. Теперь мой сайт перестал открываться в Google Chrome и на ПК, и на смартфоне…
Я поменял текст…..— и сайт …перестал работать вообще.Что происходит?
Горе от ума. Вот что происходит. Вам выше уже сказано как фавикон устанавливается.
Но раз уж погубили файл header.php — остается только одно — через ftp или менеджер файлов хостинга заменить его новым из архива со скачанной темой, установленной на сайте. Надеюсь тема у вас из оф.каталога? Тогда всё это очень просто.
и сайт …перестал работать вообще.
tuxfighter! Мы наверное видим кэшированные страницы:
или видим попытку рекламировать сайт
Удалить всё что вы загрузили и прописали и впредь знать что фавикон на сайтах WP и в любой теме устанавливается вот так:
Это логотип — какое отношение он имеет к фавикону? Я про него знал, сейчас специально проверил — появился логотип из фавикона, а сам фавикон остался прежним.
Подозреваю, что у меня проблемы с кешем, но его очистка приводит к фатальным последствиям — причем не только на ПК, но и на смартфоне (где у меня тоже перестал открываться сайт). Сейчас, после перезагрузки ПК, сайт работает, но в качестве фавикона показывает тот, что я удалил (и несколько раз менял на другие).
- Ответ изменён 3 года назад пользователем Ar1ur .
- Ответ изменён 3 года назад пользователем Ar1ur .
Забыл вернуть ссылку на фавикон — сейчас обновляет сразу. Короче, словил какой-то адский баг.
Это логотип — какое отношение он имеет к фавикону
То что вам нужно увидеть на скриншоте я обвел красным.
Вообще то мне казалось Вы более догадлив
Это что-то новое в WordPress!
Спасибо, теперь понял. Меня сбил с толку логотип наверху настроек — у меня это непосредственно в свойствах сайта.
Формат файла(ов)
Существует несколько приемлемых форматов изображений, доступных для значков, но два самых популярных — это ico и png. Эти форматы имеют наибольшую поддержку браузера и поддерживают прозрачный фон для вашего значка (в отличие от jpg).
Понимание favicon в WordPress
Как установить favicon на WordPress
Для того, чтобы установить фавикон на вордпресс, зайдите в панель управления (консоль). В разделе Внешний вид нажмите Настроить:
Затем, на странице визуальной настройки (Customizer) сайта откройте пункт Свойства сайта:
Да чуть не забыл, картинка у вас должна быть уже подготовлена - любой формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP. Рекомендуемый размер изображения значка вашего сайта - не менее 512 пикселей по ширине и высоте. Изображение значка сайта должно быть квадратным, вы можете использовать прямоугольное изображение большего размера, а WordPress позволит вам обрезать изображение при его добавлении. Прозрачное или с фоном, без разницы.
Изображение должно быть четким и, как правило, соответствовать изображению и / или содержанию вашего сайта. Файл картинки лучше иметь с таким названием favicon
В свойствах сайта - Иконка сайта - нажмите Выбрать изображение:
Выберите картинку на компьютере или из библиотеки медиафайлов вашего сайта. После того, как изображение загрузите, то появится предпросмотр фавиконки:
Если всё окей, то нажимайте синею кнопку Опубликовать. Откройте свой сайт и проверьте вашу проделанную работу. Я установил прозрачную картинку и у меня иконка сайта в браузере гугла выглядит так:
Учтите, что многие браузеры (а также поисковые системы) кэшируют favicon-изображения, поэтому изменения могут вступать в силу не сразу. В браузере от Google картинка появится сразу, в Яндексе браузере ещё не скоро. Придется подождать. Если ваш сайт отображается в результатах поиска Яндекса, то в течение двух недель после посещения сайта роботом фавиконка появится в поиске.
Добавляя свой собственный значок из настройщика сайта, то он не изменится даже, если вы смените шаблон/тему вордпресс.
Плагин PhpSword Favicon Manager
Данный плагин позволяет установить на сайт или блог две иконки - фавикон и выбирать между ними, какую отображать иконку в браузере. А так же, можно включать или отключать фавикон на сайте. PhpSword Favicon Manager очень простой и легкий в использовании. Установить и активировать фавикон менеджер можно стандартным способом, через поиск по плагинам. Вводите его название, устанавливаете, активируете и в вашей админпанели появится новый раздел - PhpSword Favicon. Нажмёте его и перейдёте на страницу загрузки и установки фавиконки на ваш сайт. Обратите внимание: перед загрузкой Favicon на сайт: Стандартные размеры Favicon: 16x16, 32x32, 48x48, 96x96, 180x180 или 192x192; Формат иконки фавикон: .jpg, .jpg или .ico Размер: максимальная 25 Kb или менее, чтобы минимизировать время загрузки сайта.
После того, как загрузите иконки, выберите, какую отображать в браузере и сохраните изменения. Всё, готово. Переходите на сайт, смотрите - красота какая. Ваш сайт приобрёл свою индивидуальность. Так, идём далее.
1. Добавление favicon с настройщиком WordPress
Для большинства это единственный метод, который вы должны рассмотреть для WordPress. Все, что вам нужно, это файл изображения (png, gif, jpeg), а WordPress сделает все остальное.
Начиная с Wordrpess 4.3, вы можете легко добавить значок сайта (или иконку сайта) на свой сайт WordPress в настройщике. От панели управления WordPress перейдите к «Внешний вид — Настройка».
Затем выберите «Site Identity» (Идентичность сайта), и вы найдете возможность установить значок сайта (значок сайта — это еще один термин для favicon). Затем вы можете выбрать свое изображение из медиатеки или загрузить новое. Убедитесь, что размер файла не менее 512х512, чтобы обеспечить наилучшее качество рендеринга изображения для всех случаев использования.
После выбора нужного изображения вам будет предложено обрезать изображение, чтобы оно правильно отображалось в вашем браузере. Это полезно, если вы загружаете изображение, которое не идеально квадратное.
Это оно! WordPress сделает все остальное. Как только изображение будет обрезано, WordPress сгенерирует необходимые размеры изображения, необходимые для всех вариантов использования favicon:
- 32 пикселя для браузера favicon
- 180 пикселей для приложения IOS
- 192 пикселя для Chrome App Icon
- 270 пикселей для плитки Windows
Он даже создает полезный предварительный просмотр того, как будет выглядеть значок.
Опубликуйте свои изменения и обновите страницу, чтобы ваш значок волшебным образом появился в вашем браузере. Если вы не видите его сразу же, вам может потребоваться очистить кэш сайта или открыть свой сайт в окне инкогнито вашего браузера, чтобы увидеть его.
Добавление favicon с использованием параметров темы
В целом, все еще рекомендуется использовать функцию значка сайта в настройщике WordPress, если она доступна, поскольку она была создана специально для WordPress. Но в некоторых темах WordPress (особенно старых) есть возможность загружать значки прямо из настроек темы. Будьте осторожны при использовании этой опции пользовательской темы, потому что она может использовать устаревший метод и генерировать только одно изображение для нескольких экземпляров.
Формат png
Начиная с HTML5, формат PNG является приемлемым форматом для ваших значков, и все основные браузеры поддерживают его сейчас. Возможно, это лучший вариант в будущем, так как png более последовательный из-за его широкого использования в сети. Однако, поскольку все браузеры (даже старые) поддерживают ICO, может быть лучше использовать версии png и ico, чтобы избежать нежелательных ошибок 404.
Яндекс не видит значок
После внесения правок любым способом, описанных в статье, пользователи хотят наблюдать значок в выдаче поисковиков. Но Яндекс и Гугл не сразу обновят информацию, потому что это связано с индексированием ресурса. Смотрите когда у поисковых систем апдейты и следите за изменениями в выдаче.
Чтобы ускорить индексирование заносите главную страницу на переобход, это сократит время обновления базы. Так выглядит настройка в яндекс вебмастере. Время изменений в выдаче от 5 до 90 дней.
Переобход страниц в Яндексе
На этом урок закончу, потому что ответ на вопрос как установить favicon на wordpress разобран полностью, жду ваших рекомендаций в комментариях.
Приветствую вас, дорогие друзья! Как установить фавикон на Вордпресс? Favicon для WordPress - установка Favicon на сайт WordPress без плагина, инструкция находится здесь, но так, как у многих возникают трудности с этим, сделать процесс более лёгким, вам, как обычно помогут специальные плагины.
Для справки : Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в и збранном или в з акладках браузера .
Основные блюда на вынос
Если вам нужно немного подвести итоги, вот несколько основных моментов о добавлении значков на ваш сайт WordPress:
- Вы должны добавить свой значок с настройщиком WordPress, если он доступен.
- Если вы хотите убедиться в том, что ваше размещение значка везде, где оно должно быть, и иметь немного больший контроль над тем, как будет выглядеть ваш значок в каждом конкретном случае, используйте такой плагин, как realfavicongenerator.
- Если по какой-то причине вы оказались в темных веках WordPress или вам нужно использовать ручной подход, убедитесь, что вы используете правильные методы
- Не используйте встроенные опции темы (кроме настройщика WordPress), чтобы добавить свой значок, если у вас нет веских причин для этого.
Я надеюсь, что это поможет прояснить некоторые вещи о значках сайта (иконках сайта) и облегчит ваши мысли о том, как WordPress обрабатывает ваши значки. И я с нетерпением жду возможности услышать любые ваши вопросы или идеи по этому вопросу в комментариях ниже.
На этом все — до скорых встреч!
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
Привет всем! Фавикон (Favicon) WordPress - как установить / добавить / поставить / заменить / удалить? Очень легко и просто. Как только вы создали блог/сайт на платформе WordPress, произвели базовую настройку ВордПресс пора подумать об установке фавикона (favicon) для сайта. Инструкция: как установить favicon на WP с видео уроком . А также читайте, как загрузить на сайт WP фавиконку в формате SVG?
Процесс этот не сложный, не стоит откладывать на потом. "Потом" может не наступит ни когда. Favicon или значок сайта - это крошечное изображение, которое отображается в браузере рядом с названием вашего сайта. Это помогает вашим пользователям идентифицировать ваш сайт, а более частые посетители вашего веб-ресурса мгновенно распознают эту маленькую картинку. Это повышает узнаваемость вашего бренда и помогает вам завоевать доверие аудитории.
Возможность загрузки собственной иконки favicon в самом ядре WordPress появилась совсем недавно. Начиная с версии 4.3, вы можете добавить значок сайта из админки WordPress.
Что такое фавикон
Favicon (термин «значок для избранного») — это маленькая иконка, используемая веб-браузерами для добавления дополнительного элемента брендинга, чтобы пользователи могли узнавать ваш сайт/компанию. Если favicon установлен на вашем сайте правильно, браузеры будут использовать его в разных местах по мере необходимости. Эти местоположения включают вкладки браузера (рядом с заголовком страницы), адресные строки (рядом с URL-адресом), закладки и другие.
В WordPress значки избранного называются «site Icons», что является полезным описанием, информирующим пользователей о том, что этот значок будет использоваться для представления вашего сайта в различных случаях.
Установить favicon на WP с помощью плагина
Единственный вменяемый плагин это “Favicon by RealFaviconGenerator” , особенность заключается в том, что он проставляет фото для всех устройств:
Устанавливаем стандартно и переходим к работе, в панели заходим Внешний вид > Favicon. В открывшемся окошке находим “Выберите из библиотеки мультимедиа”.
Выбор изображения для плагина
Откроется форма с выбором картинки, можете загрузить собственное или воспользоваться ранее сохраненными в WordPress. Не забудьте заранее оптимизировать фото под WP.
Библиотека медиафайлов
Далее нажимаем кнопку Генерировать.
Генерация
Перекинет на официальный ресурс realfavicongenerator, если изображение выбрано правильно то нажимаем синюю кнопку “Continue with this picture”.
Подтверждение и продолжение процесса
Смотрим, как будет отображение на разных устройствах и браузерах, если все нормально, то перелистываем страницу вниз и нажимаем Generate your favicon and HTML code.
отображение на разных устройствах
Ждем пока сервис обработает запрос и автоматически перебросит обратно в админку WordPress. Для надежности обновляем Ctrl+F5 и любуемся на установленный значок, который корректно отображается на всех устройствах.
Проверка работы плагина
Создание вашего favicon
Фавикон — это изображение, поэтому разработка собственного фавикона не будет отличаться от разработки собственного логотипа. Вы можете использовать фоторедактор, такой как Gimp или Photoshop. Просто помните, что ваш фавикон должен быть идеальным квадратом (т.е. 512х512 для иконки вашего сайта WordPress). Если вы хотите прозрачный фон, сохраните ваш файл в формате png (или gif). После этого вы можете загрузить свое изображение в WordPress в виде значка вашего сайта (подробнее об этом позже). Если вы хотите конвертировать png в формат ico, я предлагаю использовать онлайн-конвертер файлов, такой как Convertico.
Совет: иногда вы можете создать свой значок, обрезав квадратную часть вашего логотипа. Это может быть хорошей идеей, если вы хотите упростить процесс. Просто помните, что этот значок будет представлять ваш бренд, поэтому не будьте небрежны.
Важность фавиконок
Фавиконки (или значки сайтов) похожи на логотип компании в том смысле, что он может играть небольшую, но важную роль в брендинге вашего сайта. Веб-сайт, на котором отсутствует значок, может показаться менее заслуживающим доверия пользователям (поскольку мы все привыкли их видеть). С другой стороны, веб-сайт, на котором есть значок, предоставит пользователю четкое визуальное представление, в котором он нуждается, и улучшит его восприятие. Думать об этом. Гораздо проще найти закладку с иконкой рядом с ней, чем читать текст.
Размер favicon
Вашему сайту необходимо иметь несколько размеров изображений фавиконов, чтобы оптимально отображать их во всех случаях использования (именно поэтому фавиконы начинались в формате ico). Я не буду вдаваться во все различные размеры здесь, но 4 наиболее распространенных необходимых размера генерируются автоматически всякий раз, когда вы добавляете иконку сайта из настройщика WordPress.
Однако вам необходимо убедиться, что размер загружаемого в настройщик изображения составляет не менее 512×512 пикселей. WordPress создаст другие размеры из этого исходного файла следующим образом:
- 32x32px favicon.
- Значок приложения 180x180px для iOS и iPhone 6+.
- 192x192px значок приложения для Android/Chrome.
- 270x270px плитка среднего размера для Windows.
Как поменять или удалить иконку сайта WordPress?
Проделайте те же действия. Админ панель — Внешний вид — Настроить. Открываете Свойства сайта. И теперь дело техники. Нажимаете Удалить или Изменить изображение:
Удаляете и нажимаете Опубликовать. Меняете фавикон сайта путём новой загрузки картинки в WordPress.
Поддержка значков SVG распространена в современных браузерах. Мета-иконки, сгенерированные настройщиком, не будут перезаписаны, что дает более старым браузерам запасной вариант на случай, если они не поддерживают значки SVG.
На странице настроек плагина вы можете установить все параметры использования SVG Favicon. Загрузка: на вкладке SVG Favicon щелкните поле Загрузить SVG Favicon и загрузите свой SVG-фавикон на сайт ВордПресс.
Перед загрузкой фавиконки SVG WordPress убедитесь, что соотношение сторон составляет 1:1.
Если вы используете плагин кэширования WordPress, рекомендуется очистить кэш, чтобы посетители могли видеть обновления вашего значка SVG.
На этом, дорогие друзья, у меня все. До встречи. Пока, пока!
Стандартная функция WordPress в админке
В вордпресс существует стандартная функция. Чтобы добавить в панели WordPress заходим в Внешний вид > Настроить.
Вкладка настроить
Откроется окно (на сленге разработчиков) кастомайзера. Заходим в раздел Свойства сайта.
Свойства
Откроется новая вкладка, находим “Выберите значок сайта”.
Выбор значка
Появится всплывающее окно с выбором файла изображения для установки или смены Favicon, можно загрузить с компьютера или выбрать с библиотеки имеющейся в базе.
Рекомендуется использовать размер не менее 512 на 512 пикселей (px).
Загрузка изображения
- Выбираем откуда загрузим изображение с жесткого диска или ранее доступных в библиотеке
- Отмечаем необходимое
- Жмем Выбрать
Появится окно в котором настраиваем отображение, область квадратная по умолчанию. Изменить размер и нажать обрезать.
Предварительный просмотр
В предварительном просмотре WordPress установит фавикон, и покажет, как он отображается в закладках браузера. Если все хорошо, то выбираем Опубликовать.
Публикуем
WordPress загрузит и сгенерирует несколько форматов для разных систем и браузеров, в зависимости откуда пришел посетитель:
- Mac OS
- Ios
- Android
- Приложения Windows
Фавиконка для Яндекс
Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера.
Пример отображения фавиконки в результатах поиска:
Как отмечено выше, иконка идентифицирует ваш блог, то есть, его нельзя будет спутать с остальными сайтами открытыми в окне вашего браузера. Посмотрите на скриншот:
Посмотрите на мою иконку блога, я выбрал картинку вордпресс. Раз блог на этом движке и я пишу о WP, то пусть иконка будет соответствующая. А теперь перейдем к делу, к загрузке и установке картинки на WP.
3. Добавление favicon вручную (от WordPress 4.2 и старше)
В более старых версиях WordPress (до обновления Customizer) вы можете добавить значок сайта в два этапа. Убедитесь, что вы используете дочернюю тему для изменения файлов вашего сайта.
Во-первых, вам нужно загрузить файл favicon.ico на свой веб-сайт (вам нужно будет использовать FTP-клиент, например FileZilla, если это не локальная установка). Получив доступ к файлам сайта, загрузите значок в свой корневой каталог. Вы также можете добавить значок в папку дочерней темы.
Существуют разные мнения о том, следует ли добавлять значок в корневой каталог, папку темы или и то, и другое. Например, некоторые предлагают сохранить значок в корневом каталоге для отображения в программах чтения новостей. Поэтому, чтобы быть в безопасности, всегда держите один в корневом каталоге. Везде, где вы решите поместить его, убедитесь, что вы ссылаетесь на расположение файла в заголовке. Не просто бросьте его в свою папку, полагая, что все браузеры автоматически найдут это. Некоторые старые браузеры не смогут найти автоматически.
Ссылка на ваш значок требует использования HTML-тега ссылки в заголовочном файле вашей темы (или дочерней темы) (header.php) внутри тега «HEAD». Вот два примера.
Чтобы создать ссылку на значок (в формате ICO) в корневом каталоге вашей темы (или дочерней темы), вы можете добавить следующий код внутри тега «head».
Чтобы разместить favicon.ico в вашем основном корневом каталоге, используйте следующее:
Я не знаю как вы, но я очень благодарен за WordPress 4.3.
Где хранится иконка
Задают вопросы где хранится иконка на сервере. Ответ прост, если размещали с помощью первых 2 методов, то расположение будет такое wp-content/uplouads .
папка на хостинге со всеми фото
В папках по годам, будут каталоги по месяцам, в них размещены все медиафайлы блога. Вспомните, когда производили установку и найдите объект на сервере.
7 комментариев к “Установка Favicon (фавикон) на WordPress сайт”
Добрый день! У меня к вам вопрос: вот после того, как мы загрузили картинку в медиафайлы, мы, наверное, должны взять адрес этой картинки? Вы как-то это пропустили, по-моему, или я что-то не так поняла?
А как иконку загрузить на хостинг? Мы загружаем какую фразу на хостинг, напишите, пожалуйста, что конкретно мы должны загрузить, чтобы «чайникам», таким, как я, было понятно.Это фраза: favicon.ico. или что-то другое?
Извините за тупые, возможно, вопросы, но они возникают у нас. С уважением, Анна.
Анна, это вы пропустили — написано же «нам нужен только URL адрес картинки:…..Скопируйте его и вставьте ссылку в блокнот 🙂
И вот ещё — Да чуть не забыл, иконка у вас должна быть уже подготовлена, с названием favicon.ico. Иконка это картинка, а favicon название картинки; ico это расширение картинки.
Спасибо, все так хорошо расписано, получилось все с первого раза, трудно накасячить.
Фавикон — это уникальная картинка, которая является визитной карточкой любого сайта. По нему узнаете знакомые ресурсы, соцсети, сервисы. Желательно изначально выбрать и не менять иконку сайта в будущем, и оставить на все время существования проекта. Сейчас расскажу как установить favicon на WordPress, разберу несколько методов и дам подробные инструкции.
Бесплатно создать фавикон favicon ru
Здесь, на сайте вы можете нарисовать свою собственную иконку или же, что самое лёгкое, это сделать Favicon из изображения. Загружаете картинку и на выходе получаете готовый файл с нужным расширением ico. Прежде чем скачать готовый Favicon посмотрите как она будет выглядеть в реальном разрешение. После того, как вы скачали готовый фавикон - иконку можно переходить к выбору подходящего для вас плагина.
Как поменять иконку кодом
Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.
Для начала нужно установить FTP соединение и в корень, обычно папка public_html, загружаем изображение, с каким расширением решайте сами, главное чтобы он был квадратным.
favicon.jpg в корне сайта
Даю код, который нужно добавить в раздел head в активной теме.
Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.
Правильно устанавливаем фавикон в раздел head
- Редактор тем
- Заголовок header.php
- Закрывающий тег
- Код для вставки
- Обновляем файл
В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.
Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.
Favicon в браузере
Важный момент, что большинство браузеров могут сами найти в корне сайта favicon, только необходимо чтобы он был в формате ico. Но не всегда срабатывает, потратьте 5 минут времени и установите элемент как надо. Полезно знать как вставлять шорткоды в темы. Чтобы увидеть все наглядно предлагая посмотреть мое видео.
2. Добавление favicon с помощью плагина
Если вы хотите, чтобы с помощью плагина вы добавили иконку на ваш сайт WordPress, вам повезло. Простой поиск в репозитории WordPress даст вам несколько отличных бесплатных плагинов на выбор. Лично я бы посмотрел не дальше, чем Favicon by RealFaviconGenerator. Этот плагин обеспечит совместимость вашего favicon со всеми браузерами, разместив несколько изображений во всех нужных местах. Он даже позволяет настроить дизайн каждого изображения, что не так просто сделать самостоятельно.
Чтобы добавить и использовать значок с помощью плагина, сначала установите плагин и перейдите во вкладку «Внешний вид — Фавикон». Затем загрузите свое изображение. Убедитесь, что оно идеально квадратное и не менее 260х260 пикселей.
Плагин перенаправит вас в онлайн-генератор, чтобы завершить настройку вашего избранного для IOS, Android (Chrome), Windows и macOS (Safari). Всего за несколько минут вы можете добавить свои фирменные цвета, чтобы иконки выглядели идеально для всех перечисленных выше устройств. Когда вы закончите, нажмите кнопку «Generate Your Favicons and HTML Code» (Создать свой favicon и код HTML) в нижней части страницы.
Поскольку вы используете плагин, вам не придется беспокоиться о каких-либо кодах. Вы будете перенаправлены на свой сайт и встретитесь с хорошим предварительным просмотром ваших значков.
Вот такие вот дела!
Читайте также: