Як зробити

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

Практично на будь-якому сучасному сайті в інтернеті є спеціальна іконка, що відображається на вкладці браузера після повного завантаження ресурсу. Дана картинка створюється і встановлюється кожним власником самостійно, хоча і не є обов'язковою. В рамках цієї статті ми розповімо про варіанти установки фавікона на сайти, створені різними засобами.

Додавання Favicon на сайт

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

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

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

Варіант 1: Додавання вручну

Цей варіант додавання іконки на сайт підійде вам, якщо ви не використовуєте платформу, яка надає спеціальні інструменти.

Спосіб 1: Завантаження Favicon

Найбільш простий метод, який підтримується буквально будь-яким сучасним інтернет-браузером, полягає в додаванні раніше створеної картинки в кореневій каталог вашого сайту. Зробити це можна як через веб-інтерфейс, так і будь-який зручний FTP-менеджер.

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

Іноді потрібний каталог може мати назву «public_html» або будь-яке інше, залежне від ваших уподобань в плані налаштувань.

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

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

Спосіб 2: Редагування коду

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

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

    2. Приклад додавання ICO іконки в код сайту

  2. Найкраще використовувати абсолютне посилання із зазначенням префікса замість відносної.

    3. Код з абсолютною посиланням на іконку для сайту

  3. У деяких випадках значення «rel» можна змінити на «shortcut icon", збільшивши тим самим сумісність з веб-браузерами.

    4. Зміна значення rel на засланні на іконку сайту

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

    Примітка: Найбільш універсальним є ICO-формат.

    • ICO - «image / x-icon» або «image / vnd.microsoft.icon»;

      • Приклад додавання ICO іконки на сайт

    • PNG - «image / png»;

      • Приклад коду додавання PNG іконки на сайт

    • GIF - «image / gif».

      • Приклад коду додавання GIF іконки на сайт

  5. Якщо ваш ресурс націлений на переважно останні версії браузерів, рядок можна скоротити.

    6. Приклад спрощеного коду для додавання іконки

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

    7. Використання декількох рядків коду іконки

  7. Встановлене зображення буде відображатися на всіх сторінках сайту, але за бажанням може бути змінено шляхом додавання раніше згаданого коду в окремі розділи.

    8. Приклад іконки на вкладці в браузері

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

Варіант 2: Засоби WordPress

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

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

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

    2. Перехід до розділу Налаштувати в панелі WordPress

  2. На сторінці, необхідно скористатися кнопкою «Властивості сайту».

    3. Перехід до розділу Властивості сайту в панелі WordPress

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

    4. Перехід до завантаження іконки в панелі WordPress

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

    5. Процес завантаження іконки для сайту WordPress

  5. Після цього ви будете повернуті до «Властивостям сайту», а в блоці «Іконка» з'явиться вибране зображення. Тут же ви можете ознайомитися з прикладом, перейти до його редагування або видалити при необхідності.

    6. Успішно встановлений логотип в панелі WordPress

  6. Встановивши потрібну дію через відповідне меню, натисніть кнопку «Зберегти» або «Опублікувати».

    7. Збереження властивостей сайту на WordPress

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

    8. Успішно встановлений логотип для сайту на WordPress

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

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

    2. Перехід до розділу Модулі в панелі WordPress

  2. Заповніть пошукове поле у відповідності з найменуванням потрібного плагіна - all in one favicon - і в блоці з відповідним розширенням натисніть кнопку «Встановити».

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

    Процес додавання займе якийсь час.

    3. Установка плагіна на WordPress

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

    4. Активація плагіна на WordPress

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

    5. Перехід до налаштувань плагіна на WordPress

  5. У розділі з параметрами плагіна слід додати іконку в одну з представлених рядків. Це потрібно повторити як в блоці «Frontend Settings», так і в «Backend Settings».

    6. Завантаження іконки Frontend Setting на WordPress

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

    7. Завантаження іконки Backend Setting на WordPress

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

    8. Успішно встановлена ​​іконка для сайту на WordPress

Цей варіант є найбільш простим в реалізації. Сподіваємося, у вас вийшло встановити Favicon на сайт через панель управління WordPress.

висновок

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