Главная » Как сделать » Вы здесь

Способы добавления Favicon на сайт

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

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

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

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

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

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

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

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

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

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

Пример иконки для сайта в формате ico

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

Пример правильного размещения иконки сайта

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

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

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

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

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

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

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

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

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

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

    • ICO – «image/x-icon» либо «image/vnd.microsoft.icon»;
    • Пример добавления ICO иконки на сайт

    • PNG – «image/png»;
    • Пример кода добавления PNG иконки на сайт

    • GIF – «image/gif».
    • Пример кода добавления GIF иконки на сайт

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

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

  9. Пример упрощенного кода для добавления иконки

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

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

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

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

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

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

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

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

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

  7. Через окно «Выбрать изображение» загрузите нужную картинку в галерею либо выберите ранее добавленную.
  8. Процесс загрузки иконки для сайта WordPress

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

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

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

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

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

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

    Поиск плагина для установки иконки на WordPress

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

  4. Установка плагина на WordPress

  5. Теперь необходимо кликнуть по кнопке «Активировать».
  6. Активация плагина на WordPress

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

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

  11. Нажмите кнопку «Сохранить изменения», когда изображение будет добавлено.
  12. Загрузка иконки Backend Setting на WordPress

  13. По завершении обновления страницы картинке будет присвоена уникальная ссылка и она отобразится на вкладке браузера.
  14. Успешно установленная иконка для сайта на WordPress

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

Заключение

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

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

Помогла ли вам эта статья?

Да Нет


Еще статьи по данной теме:


Поделиться статьей в социальных сетях:

Задайте вопрос или оставьте свое мнение