Разное

Как поставить фавикон на вордпресс: Как установить favicon в WordPress.Как поставить иконку на сайт?

31.07.2021

Содержание

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

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

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

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

Давайте приступим!

Содержание статьи

Чего ожидать при добавлении фавикона на сайт 

Добавление значка на сайт WordPress — очень простой процесс. Вы должны сначала создать набор иконок, а затем добавить их на свой сайт с помощью настройщика WP, плагина или FTP.

Вот как это сделать:

  • Шаг 1. Создайте фавикон WordPress для своего сайта
  • Шаг 2. Добавьте значок на свой веб-сайт WordPress
Плюсы

Идентичность и узнаваемость бренда — конечная цель каждого веб-сайта.

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

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

Для вас это беспроигрышный вариант.

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

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

Минусы

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

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

Если вы планируете использовать настройщик WordPress для добавления фавикона, убедитесь, что у вас установлена ​​последняя версия WordPress.

Функция загрузки и обрезки фавикона была представлена ​​только после запуска WordPress 4.3. Таким образом, вам придется загрузить свой значок в корневой каталог своего веб-сайта через FTP, если у вас WordPress 4.2 или ниже, что немного сложнее, чем использование плагина или настройщика.

Кроме того, добавление вашего значка через FTP и вставка HTML-кода непосредственно в раздел <head> вашей темы подвергает вас риску потери иконки всякий раз, когда вы меняете тему WordPress. Так что вам придется проделать весь процесс снова.

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

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

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

Раньше владельцы веб-сайтов должны были использовать определенный файл ICO для создания значка. Сейчас все (к счастью) изменилось.

Сегодня большинство веб-браузеров поддерживают файлы PNG, ICO, GIF и JPEG для фавиконов. Однако вы должны помнить, что не все версии Internet Explorer поддерживают JPEG, поэтому было бы лучше выбрать другие параметры браузера.

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

Рекомендуем Favicon.cc, RealFaviconGenerator  и Favicon Generator, поскольку они предоставляют вам значки значков в форматах PNG и ICO, а также различные средства настройки. Все, что вам нужно сделать, это вставить код, который дает вам плагин, и все готово.

Вот несколько дополнительных советов по созданию отличного фавикона для WordPress:

  • Выберите изображение значка размером 512 × 512 пикселей.
  • Ваш фавикон WordPress должен быть идеальным квадратом. Если вы используете прямоугольное изображение, вам придется обрезать его до или после загрузки в WordPress.
  • Вы можете добавить изображение значка через настройщик WordPress, используя встроенную в платформу функцию обрезки.
  • Ваш фавикон должен представлять собой квадрат размером 16×16 пикселей. Поэтому постарайтесь выбрать изображение, которое будет хорошо выглядеть после того, как оно уменьшится до этих размеров.
  • Не забудьте ознакомиться с рекомендациями Google по созданию и использованию значков.

Покажем, как создать фавикон с нуля с помощью RealFaviconGenerator.

Откройте веб-сайт RealFaviconGenerator и загрузите изображение, которое хотите использовать, нажав кнопку «Выбрать изображение Favicon» .

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

Когда вы, наконец, закончите, прокрутите курсор вниз и нажмите «Создать значки и HTML-код» .

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

Шаг 2. Добавьте значок на свой веб-сайт 

Затем вам нужно добавить значок на свой веб-сайт.

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

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

Метод 1: через настройщик WordPress

Из трех методов этот самый простой и быстрый.

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

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

Давайте разберемся, как добавить фавикон.

Перейдите во «Внешний вид» на главной панели администратора и нажмите «Настроить» в раскрывающемся меню.

Оттуда выберите вкладку «Идентификация сайта». Затем перейдите к нижней части экрана, и нажмите на Выбрать значок.

На этом этапе на вашем экране откроется интерфейс библиотеки мультимедиа WordPress.

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

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

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

Поздравляю! Ваш фавикон активен.

Метод 2: установите плагин для добавления фавикона 

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

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

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

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

Введите «Favicon» в строку поиска, расположенную в верхней правой части экрана. Щелкните Поиск.

Нажмите кнопку «Установить сейчас», чтобы установить плагин на свой веб-сайт. Это начнет установку плагина.

Чтобы активировать плагин, нажмите кнопку «Активировать», которая заменит предыдущую кнопку «Установить сейчас»после завершения процесса установки.

После установки и активации плагина Favicon вы можете создать набор иконок.

Нажмите «Внешний вид» на главной панели управления WordPress и выберите «Фавикон» из отображаемых параметров.

Выберите или загрузите изображение размером 70 × 70 пикселей, и готово! Было бы хорошо даже изображение размером 260 × 260 пикселей.

После этого нажмите «Создать значок». 

Затем вы будете перенаправлены на сайт RealFaviconGenerator.

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

На этом этапе ваш значок настроен и готов к запуску.

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

Метод 3: через протокол передачи файлов или FTP вручную

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

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

Откройте файлы своего сайта через FTP-клиент или файловый менеджер в cPanel вашего хостинга.

Найдите корневой каталог WordPressвашего веб-сайта и загрузите свой пакет иконок вместе с его содержимым (обычно он должен называться favicons.zip).

Совет: файлы будут в той же папке, что и ваши папки wp-admin и wp-content.

Помните HTML-код, который мы получили при создании значка в RealFaviconGenerator? Он понадобится сейчас.

Вы можете добавить код в заголовок вашей темы с помощью плагина, такого как Insert Headers and Footers, или вставить его прямо в раздел <head> вашей темы, отредактировав файл header.phpвашей темы .

Рекомендуем использовать плагин Insert Headers and Footers, так как вам не придется еще раз проходить весь процесс добавления вашего значка, если вы решите изменить тему WordPress в будущем.

Перейдите в Настройки на главной панели управления WordPress и нажмите «Вставить верхние и нижние колонтитулы». Вставьте HTML-код в раздел «Сценарии в заголовке».

Сохраните все внесенные изменения. Ваш фавикон готов к работе!

Источник

 

🥇 ▷ КАК ДОБАВИТЬ ФАВИКОН В WORDPRESS ЗА 5 МИНУТ ✅ — ТЕХНИКА

Проверьте вкладку браузера прямо сейчас.Видите изображение слева от заголовка страницы?Это называется «значок».Ваш значок появляется в:Вкладки браузераМаркерыМобильные приложенияА недавно он

Содержание:

Проверьте вкладку браузера прямо сейчас.

Видите изображение слева от заголовка страницы?

Это называется «значок».

Ваш значок появляется в:

  • Вкладки браузера
  • Маркеры
  • Мобильные приложения

А недавно он даже стал появляться в результатах поиска Google!

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

Смотреть видео

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

Подпишитесь на канал YouTube Compete Themes

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

Первый шаг — посетить Live Customizer (Внешний вид> Настроить).

В настройщике щелкните раздел вверху.

В разделе «Идентификация сайта» внизу вы увидите опцию «Значок сайта».

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

Создайте свое изображение фавикона

WordPress рекомендует квадратное изображение размером 512 x 512 пикселей. Если вы знаете, как использовать графический редактор, такой как GIMP, Photoshop или Sketch, вы можете создать это изображение самостоятельно.

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

Нажмите кнопку «Создать из текста», и вы попадете на экран простого редактора.

Вы можете изменить текст, цвета, шрифт и размер шрифта всего за минуту, чтобы создать собственное изображение.

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

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

Когда у вас есть изображение, вы готовы загрузить его на свой сайт.

Загрузите свой фавикон

Теперь, когда у вас есть изображение, вернитесь в раздел «Идентификация сайта» в настройщике и нажмите кнопку.

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

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

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

Полюбуйтесь своим красивым новым значком

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

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

Если вы хотите и дальше улучшать дизайн своего сайта, ознакомьтесь с моей статьей «Советы по дизайну, чтобы сделать ваш сайт лучше»:

9 простых правил дизайна, которые сделают ваш сайт красивее

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

Как сделать фавикон для сайта:создание,добавление,рекоендации

Для начала разберёмся в терминологии.
Что такое фавикон? Это маленькая картинка, которая отображается в верхней строке браузера на вкладке сайта. Она присутствует всегда. Иногда она появляется в поисковой системе яндекс или гугл, слева от выдаваемых запросов на страницах выдачи.
Какой должна быть картинка, которую вы сделаете в качестве фавикона? Выделяющейся, запоминающейся, неповторимой. Так же иконка должна вызывать ассоциации с наполнением сайта, и не только на главной странице. Приятное изображение способно сделать больше трафик посещений на вашем сайте. Как сделать фавикон для сайта? Об этом подробно изложено ниже.

Как сделать иконку при помощи генератора?

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

Рекомендации

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

Как сделать фавикон в фотошоп?

В фотошоп можно сделать уникальную картинку. Как сделать favicon для сайта в фотошоп?
  • Откройте фотошоп. Нажмите на Файл, далее на Новый. Сделайте новый файл с разрешением 64 на 64 пикселя.
  • В нашем примере используем латинскую букву W с преобладанием синего и жёлтого цветов. Сделаем иконку с таким логотипом. Для этого установите цвет #6A91D0 и нажмите на Заливка. Документ получилось окрасить в синий цвет.
  • Следующим шагом нажмите на Текст и добавьте букву W. Для того, что бы сделать жёлтый цвет, введите значение #FAC31D.
  • Следует выделить букву на фоне. Для этого обведите её чёрным цветом, задав размер обводки в 2 пикселя. Что бы сделать обводку нажмите на Слой, затем кликните на Стиль слоя, затем на Обводка. Выберите цвет и разрешение обводки.
  • Сгруппируйте слои. Для группировки нажмите на Слой, затем на Объединить видимые. Для достижения плавности в линиях добавьте размытие. Для добавления размытия нажмите на Фильтр, затем на Размытие, далее на Размытие по Гауссу. Сделайте параметр радиуса в 0,3 пикселя.
  • Буква, расположенная на фоне должна занимать всё пространство.
  • Исходный размер значка применяется 16 на 16 пикселей. Это значит, что следует сделать уменьшение полученного изображения. Для уменьшения фавикона нажмите на Изображение, затем на Размер изображения и задайте разрешение 16 на 16 пикселей.
  • Далее следует сохранить фавикон. Изображение надо назвать favicon и задать ему расширение ico. Загвоздка заключается в том, что фотошоп не способен сохранить картинку в этом расширении. Поэтому придётся сохранить фавикон в расширении png. Для этого необходимо пройти в пункт Файл, затем на Сохранить как, и при помощи нужной строки, сохраните нужный формат.
  • Вы создали favicon. И всё же для добавления favicon на сайт требуется формат icon. Можно перевести картинку в необходимый формат, воспользовавшись генератором ru. Посетите этот сайт и нажмите на Обзор. Выберите ваш фавикон и нажмите на Создать favicon.ico.
  • Загрузится страница с надписью Скачать favicon.ico. Нажмите на надпись и сохраните конвертированный файл на свой компьютер.

Добавление фавикон на сайт

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

Как поменять иконку (favicon) на WordPress?

Нужно  зайти в админку Word Press , перейти на панели слева в Внешний вид —- Настроить — Свойства сайта. картинка 1 Далее находим внизу область “иконка сайта”  и переходим в Изменить изображение картинка 2 Загружаем необходимую картинку Загрузить Файлы в формате PNG (желательно) т.к у этого формата прозрачный фон и хорошее качество и что бы соотношение картинки было 1:1 (квадратное) , при необходимости отредактировать в Photoshop, поменять фон прозрачность, буквы и тд. После загрузки изображения смотрим что получилось в итоге, если норм то сохраняем жмем Сохранить и опубликовать картинка 3

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

Видео как изменить логотип     Нужно  зайти в админку Word Press , перейти на панели слева в Внешний вид —- Темы — Настроить. картинка 1 Далее на панели слева  Стили темы картинка 2 После перехода в Стили темы скролим вниз и находим нужный нам пункт Логотип в шапке и в подвале сайта картинка 3 Изменяем изображение на новое которое уже заранее приготовлено в формате PNG хорошего качества. Если логотип не на своем месте, значит необходимо логотип масштабировать. Переходим Изменить изображение картинка 3 , далее после перехода  выбираем ту же картинку в Библиотеке Файлов и жмем Редактировать  картинка 4 В новой вкладке появится  окно масштабирование изображения. Далее необходимо подогнать картинку под нужные нам размеры , чтобы логотип стоял на своем месте. картинка 5 После редактирования сохраняем и обновляем. Мы только отредактировали изображение. Повторяем пункт 1,2.3,4 выбираем  изображение которое масштабировали и сохраняем. Заключение Фавикон является неотъемлемым сопровождением сайта. Он не менее важен, чем логотип, эмблема и другое наполнение. Не забывайте об уникальности и цветовом оформлении изображения. Это касается как создаваемых вами, так и готовых фавиконов. Успехов!

как создать и добавить иконку сайта • SA1NIKOV.RU

Автор Сергей Сальников На чтение 13 мин Опубликовано

В этой статье разберемся что такое иконка сайта – фавикон (favicon) и как ее создать и установить на сайт. Пройдем весь путь от использования готовых вариантов, до разработки своей собственной. Отвечу на вопросы какие форматы поддерживаются и какого размера должна быть иконка. Также затрону вопрос добавления html-кода фавикона под разные платформы.

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

Favicon – расшифровывается как Favorite Icon (“значок для избранного”). Он был придуман еще в прошлом веке. В марте 1999 года, браузер Internet Explorer 5 стал первым поддерживать эти значки. По сравнению с 99 годом, интернет-технологии ушли далеко вперед, а иконка осталась и используется по сей день. Конечно, за пару десятков лет она претерпевала ряд усовершенствований, о некоторых из них мы сегодня поговорим.

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

Так выглядит иконка сайта в поисковой выдаче Яндекса

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

Формат фавикона

В самом начале, иконка имела расширение ICO, но сегодня этим дело не ограничивается. Ее можно встретить в таких форматах как GIF, JPEG, PNG и SVG. Большинство форматов поддерживаются всеми современными интернет-браузерами. Вот небольшая сравнительная таблица, для наглядности:

БраузерICOPNGGIFJPGSVG
ChromeДаДаДаДаДа
FirefoxДаДаДаДаДа
OperaДаДаДаДаДа
EdgeДаДаДаНетДа
IEДаДаДаНетНет
SafariДаДаДаДаДа

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

Раньше фавикон можно было делать в BMP-формате, но на сегодняшний день он уже устарел и практически нигде не используется. Наверное, самые распространенные варианты – это ICO, PNG и GIF, так как поддерживают прозрачность. Хотя формат ICO тоже потихонечку устаревает. Как, впрочем, и GIF (по крайней мере для иконок). Рекомендую использовать PNG-формат, как наиболее универсальный и поддерживаемый. Некоторые умельцы делают себе анимированную GIF иконку, но анимация поддерживается только в Firefox, поэтому это практически бессмысленно.

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

Размер иконки

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

Рекомендация Яндекса по размеру и формату favicon

В свою очередь Google рекомендует иконки кратные 48 пикселям – 48х48, 96х96, 144х144. Однако это касается десктопных браузеров. У телефонов плотность пикселей гораздо выше, да и количество иконок там помещается меньше, даже при аналогичном разрешении с монитором. Поэтому слишком маленькая иконка может выглядеть размытой, при масштабировании. Для современных смартфонов на Android рекомендуют 192х192, для iPhone – 180×180.

Favicon для Android:

  • 36×36 – для экранов с коэффициентом плотности 0.75
  • 48×48 – для экранов с коэффициентом плотности 1
  • 72×72 – для экранов с коэффициентом плотности 1.5
  • 96×96 – для экранов с коэффициентом плотности 2
  • 144×144 – для экранов с коэффициентом плотности 3
  • 192×192 – для экранов с коэффициентом плотности 4

Favicon для Apple:

  • 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
  • 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
  • 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
  • 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
  • 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
  • 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
  • 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
  • 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
  • 180×180 – для iPhone 6 Plus c iOS версии 8.0

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

Для того чтобы создать сам favicon, есть два основных способа. Первый – ручная отрисовка иконки на специализированных онлайн-сервисах или при помощи графических редакторов типа Photoshop. Второй – скачать и использовать уже готовые иконки. Рассмотрим оба варианта по порядку.

Онлайн-сервисы для создания фавикон

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

Скриншот сервиса favicon.by для созания фавиконки

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

  • Favicon.cc – англоязычный сервис.
  • Favicon.by – русскоязычный сервис.

Устарели эти сервисы потому, что ограничены малым разрешением – 16х16 пикселей. А также из-за того, что сохраняют иконку в уходящем потихоньку на покой формате ICO.

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

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

Сайтов, которые предоставляют такую возможность бесплатно, достаточно много. В некоторых сервисах можно даже скачать иконки в векторном формате для последующего редактирования в Adobe Illustrator или аналогичных редакторах. Я не буду перечислять все, приведу только несколько ресурсов, где можно их скачать в PNG или SVG-форматах, которыми пользуюсь сам.

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

Отрисовка иконки в фотошопе

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

Редактирование скаченной иконки сайта в фотошопе

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

Как сохранить или конвертировать в ICO

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

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

Как установить favicon на сайт: html-код

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

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

Добавление иконки сайта в Вордпресс

Если у вас другая CMS-система, то настройки могут быть в другом месте. Однако, даже если их нет, иконку сайта можно добавить и через html-код, который нужно прописать в секцию <head>. Обычно она тоже выносится в куда-то настройки. В нее вставляются счетчики метрики, гугл аналитики, скрипты онлайн-консультантов и т.д. Туда же добавляется и html-код для фавикона. Если таких настроек нет (такое тоже может быть), то ищите файл шаблона вашей темы, который отвечает за кусок кода в <head>.

Десктопные браузеры (chrome, firefox, opera)

Вставка иконки осуществляется через тег <link>. Тег универсальный и используется не только для установки иконок. Выглядит в коде примерно так:

<head>
    ...
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    ...
</head>

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

АртибутОписаниеВозможные значения
relТип ресурсаicon — учитывается большинством браузеров;
shortcut icon — учитывается браузером Internet Explorer;
apple-touch-icon — для браузера Safari и устройств Apple;
mask-icon — маска для монохромных векторных иконок в Safari и на Touch Bar в MacBook;
manifest – для устройств на Android.
hrefАдрес файлаПуть до иконки. Для кириллических доменов нужно использовать Punycode-конвертер.
typeТип передаваемых данныхimage/svg+xml — для формата SVG;
image/x-icon или image/vnd.microsoft.icon — для формата ICO;
image/gif — для формата GIF;
image/jpeg — для формата JPEG;
image/png — для формата PNG;
image/bmp — для формата BMP.
sizesВысота и ширина (не обязательный)any — любой размер;
ВхШ — заданный размер.

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

Последовательность атрибутов может быть любая. Например, если необходимо прописать ICO для старых браузеров (типа IE), и PNG разных размеров для новых, то код будет выглядеть вот так:

<link type="image/x-icon" rel="shortcut icon" href="/favicon.ico">
<link type="image/png" rel="icon" href="/favicon-16x16.png">
<link type="image/png" rel="icon" href="/favicon-32x32.png">
<link type="image/png" rel="icon" href="/favicon-96x96.png">
<link type="image/png" rel="icon" href="/favicon-120x120.png">

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

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

Браузер Safari и Apple устройства

Код практически ничем не отличается, за исключением атрибута «rel». В данном случае он должен иметь значение «apple-touch-icon». Размер иконки лучше использовать максимальный 180х180 пикселей, без прозрачного слоя. Но вы можете указать и несколько размеров иконок, как и в примере выше. Углы иконки автоматически будут скруглятся при добавлении на главный экран.

Получаем вот такой код:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Помимо этого, в Apple поддерживается и иной формат иконок – монохромная векторная иконка, окрашенная в определенный цвет (по маске). Для этого в артибут «rel» прописывают значение «icon-mask» и дополнительно прописывается новый атрибут «color», который и задает нужный цвет. В коде выглядит так:

<link rel="mask-icon" href="/safari-icon.svg" color="#5bbad5">

Иконка при этом должна быть в векторном SVG-формате.

Устройства на Android

Тут иконку также лучше использовать большую, например, 192х192 пикселя. Подключение иконки происходит также через тег <link>, однако вместо адреса иконки указывается JSON-файл (спецификация WebApp Manifest), внутри которого уже и прописываются иконки. В атрибуте «rel» присваивают значение «manifest». По итогу, должно получится что-то похожее:

<link rel="manifest" href="/webmanifest.json">

Сам файл должен иметь похожее содержание:

{
 "name": "MyApp",
 "short_name": "App",
 "description": "Application",
 "lang": "ru-Ru",
 "start_url": "/",
 "scope": "/",
 "display": "standalone",
 "theme_color": "#ffffff",
 "background_color": "#ffffff",
 "icons": [
  {
   "src": "/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image/png",
   "density": "1.5"
  },
  {
   "src": "/android-icon -96x96.png",
   "sizes": "96x96",
   "type": "image/png",
   "density": "2.0"
  },
  {
   "src": "/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image/png",
   "density": "3.0"
  },
  {
   "src": "/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image/png",
   "density": "4.0"
  },
  {
   "src": "/android-icon-512x512.png",
   "sizes": "512x512",
   "type": "image/png"
  }
 ]
}

Устройства Windows и браузеры Edge, IE

Дополнительно можно прописать иконки для плиток в операционной системе. Их поддерживает Windows 8 и 10 версий. Также браузеры от Microsort (IE и Edge) используют этот стандарт. Правда формат PNG поддерживается только начиная с версии IE 11. Для IE 10 версии нужно использовать ICO.

Иконки в плитках в ОС Windows 10

Установка такой иконки делается уже не через тег <link>, как было до этого. Вызов происходит следующим образом:

<meta name="msapplication-TileColor" content="#fff000">
<meta name="application-name" content="MyApp">
<meta name="msapplication-TileImage" content="/ms-tile-144x144.png">

В атрибут «name» задается имя переменной, в «content» – значение.

  • msapplication-TileColor — цвет плитки;
  • application-name — имя сайта;
  • msapplication-TileImage — путь к иконке.

Размеры плиток определенные Microsoft:

  • Маленькая — 70×70 (Рекомендуемый размер: 128×128)
  • Средняя — 150×150 (Рекомендуемый размер: 270×270)
  • Широкая — 310×150 (Рекомендуемый размер: 558×270)
  • Большая — 310×310 (Рекомендуемый размер: 558×558)

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

Начиная с версии 8.1 можно использовать файл «browserconfig.xml». Для вызова нужно использовать следующий код:

<meta name="msapplication-config" content="/browserconfig.xml">

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

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo   src="/ms-tile-128.png"/>
      <square150x150logo src="/ms-tile-270.png"/>
      <wide310x150logo   src="/ms-tile-558x270.png"/>
      <square310x310logo src="/ms-tile-558.png"/>
      <TileColor>#009900</TileColor>
    </tile>
  </msapplication>
</browserconfig>

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

Favicon в WordPress — как добавить или поменять фавикон

Фавикон (Favicon) — это небольшая иконка, которая отображается рядом с адресом сайта в адресной строке при открытии сайта. Также она отображается рядом с сайтом в поисковой выдаче, во вкладах и в некоторых других элементах интерфейса. Такой значок повышает узнаваемость сайта, что важно для его продвижения. В качестве фавикона можно использовать любую картинку с расширением PNG, ICO, JPG или BMP, размер которой составляет не менее 512 x 512 пикселей. Ниже я расскажу, как добавить WordPress Favicon на сайт и дам ответы на популярные вопросы относительно установки.

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

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

Откройте панель работы с WordPress, выберите вкладки Внешний вид и Настроить. Подождите несколько секунд — в открывшемся окошке активируйте пункт Свойства сайта, а потом нажмите кнопку «Выберите иконку сайта».

Нажмите на кнопку «Выберите иконку сайта»

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

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

Выберите нужную картинку в библиотеке изображений или загрузите новую. После этого нажмите на кнопку «Выбрать».

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

Если Вас все устраивает, нажмите кнопку Опубликовать.

Обратите внимание, что на разных системах значок-фавикон отображается по-разному. Однако Вам переживать не стоит — система самостоятельно сгенерирует нужные варианты изображений и добавит их в свою базу данных. Админка генерирует свои версии значков для всех основных OS — это Windows, MacOS, iOS, Andoid и другие.

Установить Favicon в WordPress с помощью плагина

Установить фавикон на страничку можно с помощью различных плагинов. К сожалению, у многих программ для WordPress есть свои недостатки — не работают основные функции, генерируется только один вариант изображения под конкретную OS и другие. Оптимальный вариантом будет установка плагина Favicon by RealFaviconGenerator — он надежен, прост в управлении и самостоятельно делает копии картинки для всех основных OS (Windows, MacOS, Android, iOS и другие).

Установите плагин Favicon by RealFaviconGenerator

Работать с плагином просто:

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

Нажмите кнопку Выберите из библиотеки мультимедиа

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

Нажмите кнопку Генерировать Favicon — после этого откроется официальный сайт плагина. Выберите пункт Continue и подождите несколько секунд.

В открывшейся панели Вы можете увидеть, как будет отображаться значок на различных OS — если Вас все устраивает, пролистайте страницу вниз, нажмите кнопку Generate и подождите 10-20 секунд для завершения операции.

Если Вас все устраивает, пролистайте страницу вниз, нажмите кнопку Generate

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

Для расположения элементов на сайте WordPress использует язык разметки HTML5, поэтому Вы можете добавить или поменять иконку вручную с помощью введения кода в панели управления. Для этого откройте корневой каталог системы (обычно он располагается в папке public_html) и скопируйте туда нужную картинку. Обратите внимание, что изображение должно иметь квадратную форму, а название у него должно быть английским — в противном случае изображение не отобразится или будет отображаться с искажениями.

После добавления изображения откройте WordPress, активируйте пункты Внешний вид и Редактор тем (на левой стороне панели). Справа выберите пункт Заголовок (header php). В центральном окне для работы с кодом найдите тэг </head> и прямо перед ним вставьте следующую строку:

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

После этого нажмите кнопку Обновить файл и подождите несколько секунд — добавление фавикона завершено. Обратите внимание, что в образце кода выше указан файл-изображение с названием favicon и расширением jpg. Если Ваш файл имеет другое расширение/название, то необходимо внести соответствующие правки. Скажем, Вы хотите добавить файл с названием fav_pict с разрешением png — в таком случае нужно в коде указать название fav_pict.png. Где хранится иконка

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

  1. Откройте корневую папку, выберите папки wp-content и uploads.
  2. Выберите папку с номером года, когда Вы добавляли иконку.
  3. Откройте папку и найдите требуемый фавикон системы WordPress.

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

К сожалению, после добавления фавикона значок в поисковой выдаче начинает отображаться не сразу, а только после того, как его проиндексирует поисковой робот. Распространяется это правило на все поисковые системы — Яндекс, Google и так далее. Чтобы ускорить индексацию, Вы можете добавить сайт на переобход. Для этого выполните следующие действия:

  1. Откройте панель настроек в Яндекс Вебмастер.
  2. Выберите пункты Индексирование и Переобход страниц.
  3. В открывшемся окне добавьте ссылку на сайт и нажмите кнопку Отправить.

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

Три способа добавить фавикон в WordPress

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

Фавикон (favicon) — графическое изображение относительно небольшого размера, предназначенное для зрительного идентифицирования конкретного портала в количестве открытых вкладок, закладок или в списке результатов поиска. Как правило, оно содержит логотип или значок, относящийся к деятельности сайта. Возможные форматы — PNG и ICO.

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

Конечно, можно найти готовый вариант на просторах интернета или сделать его самостоятельно. Для этой цели подойдет любой графический редактор, в том числе Paint или Photoshop. Необходимо создать изображение размером 128 × 128 пикселей и используя инструменты программы нарисовать картинку. Затем сохранить результат в формате ICO или PNG. Конечно, это не единственный способ. Существует множество онлайн-сервисов, разработанных для создания фавиконов. Кроме того, можно выбрать понравившееся изображение и конвертировать его в favicon.ico.

Нужно ли уменьшать фавикон перед загрузкой в WordPress?

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

Перейдем в админку веб-портала, а точнее — раздел “Внешний вид”/“Темы”, и посмотрим, как лучше всего добавить фавикон к конкретному сайту.

Добавление фавикона в шаблон сайта

Большинство премиум-тем и некоторые бесплатные уже «из коробки» имеют отдельные настройки для установки фавикон. Так что первый способ добавления фавикона на сайт — через шаблон. Кликните на кнопку “Настроить” на активной теме веб-портала и найдите вкладку “Свойства сайта”:

  • найдите блок настроек “Иконка сайта”;

  • загрузите файл (расширение .ico не поддерживается), нажав на кнопку “Выбрать изображение”;

  • нажмите кнопку “Сохранить и опубликовать”:

Добавление фавикона при помощи плагина

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

Теперь перейдите в новый пункт меню — XT-Favicon, заполните предложенные поля, как показано на скриншоте, и сохраните изменения:

Добавление фавикона в файл header.php

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

Итак:

  • откройте папку сайта через ФТП-клиент или диспетчер файлов на хостинге;

  • загрузите в него файл favicon.ico. После загрузки проверьте, чтобы файл был доступен по адресу ваш-сайт/favicon.ico:

  • перейдите в папку /wp-content/themes/активная_тема/ и откройте в режиме редактирования файл header.php;
  • вставьте приведенные ниже строки после открывающего тега <head>:

<link rel=»icon» href=»http://ваш-домен/favicon.ico» type=»image/x-icon» />

<link rel=»shortcut icon» href=»http://ваш домен/favicon.ico» type=»image/x-icon» />

Результат

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

Источник: s-host.com.ua.

| | Опубликовано: 10.03.2017 11:44 | Комментарии к записи Три способа добавить фавикон в WordPress отключены

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

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

Добавление Favicon на сайт

Чтобы добавить рассматриваемый тип иконки на сайт, вам придется для начала создать подходящее изображение квадратной формы. Это можно сделать как с использованием специальных графических программ, например, Photoshop, так и прибегнув к некоторым онлайн-сервисам. Кроме того, подготовленный значок желательно заранее преобразовать в формат ICO и уменьшить до размера 512×512 px.

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

Читайте также:
Онлайн-сервисы для создания Favicon
Как создать изображение в формате ICO

Вариант 1: Добавление вручную

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

Способ 1: Загрузка Favicon

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

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

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

Способ 2: Редактирование кода

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

  1. Между тегами «HEAD» добавьте следующую строку, где «*/favicon.ico» необходимо заменить на URL-адрес вашего изображения.

    <link rel="icon" href="*/favicon.ico" type="image/x-icon">

  2. Лучше всего использовать абсолютную ссылку с указанием префикса вместо относительной.

  3. В некоторых случаях значение «rel» можно изменить на «shortcut icon», увеличив тем самым совместимость с веб-браузерами.

  4. Значение «type» также может быть вами изменено в зависимости от формата используемого изображения:

    Примечание: Наиболее универсальным является ICO-формат.

    • ICO – «image/x-icon» либо «image/vnd.microsoft.icon»;

    • PNG – «image/png»;

    • GIF – «image/gif».

  5. Если ваш ресурс нацелен на преимущественно последние версии браузеров, строку можно сократить.

    <link rel="icon" href="*/favicon.ico">

  6. Для достижения наибольшей совместимости вы можете добавить сразу несколько строк с указанием ссылки на Favicon сайта.

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

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

Вариант 2: Средства WordPress

При работе с WordPress вы можете прибегнуть к ранее описанному варианту, добавив упомянутый код в файл «header.php» или воспользовавшись специальными инструментами. Благодаря этому иконка гарантировано будет представлена на вкладке сайта вне зависимости от браузера.

Способ 1: Панель управления

  1. Через главное меню разверните список «Внешний вид» и выберите раздел «Настроить».

  2. На открывшейся странице необходимо воспользоваться кнопкой «Свойства сайта».

  3. Пролистайте раздел «Настройка» до низа и в блоке «Иконка сайта» нажмите кнопку «Выбрать изображение». В данном случае картинка должна иметь разрешение 512×512 px.

  4. Через окно «Выбрать изображение» загрузите нужную картинку в галерею либо выберите ранее добавленную.

  5. После этого вы будете возвращены к «Свойствам сайта», а в блоке «Иконка» появится выбранное изображение. Тут же вы можете ознакомиться с примером, перейти к его редактированию или удалить при необходимости.

  6. Установив нужное действие через соответствующее меню, нажмите кнопку «Сохранить» или «Опубликовать».

  7. Чтобы увидеть логотип на вкладке любой страницы вашего сайта, включая «Панель управления», перезагрузите ее.

Способ 2: All In One Favicon

  1. В «Панели управления» сайтом выберите пункт «Плагины» и перейдите к странице «Добавить новый».

  2. Заполните поисковое поле в соответствии с наименованием нужного плагина — all in one favicon — и в блоке с подходящим расширением нажмите кнопку «Установить».

    Процесс добавления займет некоторое время.

  3. Теперь необходимо кликнуть по кнопке «Активировать».

  4. После автоматического перенаправления вам нужно перейти к разделу с настройками. Сделать это можно через «Настройки», выбрав из списка «All in one Favicon» либо воспользовавшись ссылкой «Settings» на странице «Плагины» в блоке с нужным расширением.

  5. В разделе с параметрами плагина следует добавить иконку в одну из представленных строк. Это нужно повторить как в блоке «Frontend Settings», так и в «Backend Settings».

  6. Нажмите кнопку «Сохранить изменения», когда изображение будет добавлено.

  7. По завершении обновления страницы картинке будет присвоена уникальная ссылка и она отобразится на вкладке браузера.

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

Заключение

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

Мы рады, что смогли помочь Вам в решении проблемы.
Опишите, что у вас не получилось. Наши специалисты постараются ответить максимально быстро.
Помогла ли вам эта статья?
ДА НЕТ

Добавление логотипа и значков — ThemeFusion

Вы можете загрузить файл изображения любого размера в качестве логотипа вашего веб-сайта в Avada в 3 различных областях; логотип по умолчанию, липкий логотип в заголовке и мобильный логотип. Это дает вам возможность настраивать свой логотип в зависимости от того, где он отображается. Avada также поддерживает Retina, поэтому есть дополнительные возможности для загрузки логотипа Retina 2x для устройств с высоким разрешением.

При создании раздела макета заголовка с помощью макетов Avada вы также можете добавить свой логотип через элемент изображения вручную или с помощью динамического содержимого.Дополнительные сведения об этом методе см. В разделе «Как использовать элемент изображения для добавления логотипа в видео с макетом заголовка». Пожалуйста, прочтите ниже дополнительную информацию о логотипах и различных областях, в которых вы можете их отображать, о значках, а также о доступных вариантах стиля.