Способы добавления 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.

Заключение

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

Помогла ли Вам статья?
Да Нет
Задайте вопрос или оставьте мнение
Получить ответ на Email
Уведомить о

1 Ответ
По рейтингу
Новые Старые
Межтекстовые Отзывы
Посмотреть все комментарии
Аноним
25 октября 2023 23:04

Классный сайт. Вы просто молодцы! Великое дело делаете. Спасибо Вам.

Инструкции по операционным системам:
AndroidAndroid iOSiOS Windows 11Windows 11 Windows 10Windows 10 Windows 7Windows 7 Windows 8Windows 8 Windows XPWindows XP Общее по компьютерамОбщее по компьютерам LinuxLinux macOSmacOS
Инструкции по мессенджерам и соц.сетям:
ВконтактеВконтакте ОдноклассникиОдноклассники TelegramTelegram ViberViber WhatsAppWhatsApp SkypeSkype ZoomZoom InstagramInstagram
Инструкции по работе в программах:
WordWord ExcelExcel PowerPointPowerPoint OutlookOutlook DirectXDirectX PhotoshopPhotoshop LightroomLightroom Premiere ProPremiere Pro Google ChromeGoogle Chrome Яндекс БраузерЯндекс Браузер Mozilla FirefoxMozilla Firefox OperaOpera Internet ExplorerInternet Explorer Уроки по остальным браузерамПо остальным браузерам Расширения для браузеровРасширения браузеров Уроки по антивирусамПо антивирусам AvastAvast AudacityAudacity Apple IDApple ID AutoCADAutoCAD BandicamBandicam BlueStacksBlueStacks DAEMON ToolsDAEMON Tools DiscordDiscord Epic GamesEpic Games FL StudioFL Studio HamachiHamachi iСloudiСloud iTunesiTunes OBSOBS OriginOrigin Play MarketPlay Market Sony VegasSony Vegas SpotifySpotify SteamSteam TeamViewerTeamViewer The Bat!The Bat! TikTokTikTok TunngleTunngle UltraISOUltraISO uTorrentuTorrent VirtualBoxVirtualBox Торрент клиентыТоррент клиенты Яндекс ДискЯндекс Диск Яндекс.КартыЯндекс.Карты Яндекс.НавигаторЯндекс.Навигатор В остальных программахВ остальных программах Драйвера для устройствДрайвера Подборки программПодобрать программу Остальные программыСкачать программы
Инструкции по онлайн-сервисам:
ЯндексЯндекс GoogleGoogle ДзенДзен YouTubeYouTube FacebookFacebook TwitterTwitter AliExpressAliExpress AvitoAvito ChatGPTChatGPT QiwiQiwi Другие онлайн-сервисыДругие сервисы Все о почтеВсе о почте Яндекс почтаЯндекс почта GmailGmail Почта Mail.ruПочта Mail.ru Рамблер почтаРамблер почта
Инструкции по телефонам:
SamsungSamsung XiaomiXiaomi HuaweiHuawei Прошивки устройствПрошивки телефонов ТелефонОбщие по телефонам
Инструкции по периферийным устройствам:
МышкаМышка КлавиатураКлавиатура ПринтерПринтер РоутерРоутер ФлешкаФлешка Карта памятиКарта памяти HDMIHDMI Игровые консолиИгровые консоли Яндекс СтанцияЯндекс Станция AirPodsAirPods
Инструкции по комплектующим:
Материнская платаМатеринская плата ПроцессорПроцессор ВидеокартаВидеокарта SSD дискиSSD диски Жесткий дискЖесткий диск BIOSBIOS