Донецкий техникум промышленной автоматики

Favicon WordPress - 4 способи встановити фавікон на сайт

  1. Що таке favicon, чому погано, якщо він відсутній? Фавікон - невелика тематична картинка - додасть...
  2. Віртуальний хостинг сайтів для популярних CMS:
  3. Вставити фавікон використовуючи можливості WordPress шаблону
  4. Додати в файл header.php
  5. Установка favicon використовуючи плагін Favicon by RealFaviconGenerator
  6. Чому краще встановити без використання плагіна?

Що таке favicon, чому погано, якщо він відсутній?

Фавікон - невелика тематична картинка - додасть вашому сайту індивідуальність і виділить його в браузері серед інших веб-сторінок. Встановити фавікон для сайту на WordPress можна декількома способами.

Фавікон (від англійського словосполучення favorite icon) - це маленька квадратна картинка, яка візуально представляє ваш сайт і відображається в ярликах сторінок в браузері, в закладках на сторінку, і в адресному рядку поруч з ім'ям сайту. Правильно підібраний фавікон відповідає логотипу сайту або тематиці інформації, яка на ньому міститься. При погляді на фавікон користувач повинен безпомилково визначати ваш сайт серед інших, навіть не бачачи його назви. Наш фавікон в закладці браузера виглядає так:

Наш фавікон в закладці браузера виглядає так:

Як формат файлу для фавікона в сучасних браузерах використовуються ico, png або gif. Деякі браузери підтримують завантаження іконки в форматі jpg, а Opera і Firefox можуть відображати анімований gif. Картинка фавікона буває різних габаритів, зазвичай застосовуються розміри 16x16, 32x32, 48x48, 64x64, 128x128 або 512x512 пікселів. Для сайтів, призначених для перегляду на мобільних пристроях, розмір іконки може відрізнятися.

Як зробити фавікон для сайту онлайн?

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

наприклад, favicon.ru пропонує вибрати колір, створити картинку на квадратному полі і зберегти її на свій комп'ютер.

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

Віртуальний хостинг сайтів для популярних CMS:

Поставити favicon засобами Вордпресс

Зазвичай фавікон можна встановити, регулюючи налаштування сайту в адмін-панелі WordPress.

  1. В меню «Зовнішній вигляд» увійдіть в пункт «Налаштувати» і виберіть «Властивості сайту».
  2. У запропонованому списку дій можна налаштувати відображення іконки сайту. Натисніть кнопку «Вибрати зображення» і завантажте файл з потрібною картинкою.
  3. Щоб застосувати настройку до сайту, натисніть кнопку «Зберегти і опублікувати». Переконайтеся, що на ярлику сторінки в браузері з'явився фавікон.

Переконайтеся, що на ярлику сторінки в браузері з'явився фавікон

Вставити фавікон використовуючи можливості WordPress шаблону

У деяких темах WordPress закладена додаткова можливість по установці іконки сайту.

  1. Увійдіть в меню «Зовнішній вигляд» і виберіть пункт «Налаштувати».
  2. Подальший шлях до налаштувань залежить від використовуваного шаблону. Як правило, фавікон встановлюється в загальних налаштуваннях теми. Знайдіть відповідну команду і завантажте файл з картинкою.
  3. Не забудьте підтвердити зміни натисненням кнопки «Зберегти й опублікувати».

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

Додати в файл header.php

Якщо не вдалося встановити фавікон вбудованими засобами WordPress, використання іконки для сайту можна безпосередньо прописати в файлі заголовка header.php. Для внесення змін до цього файл використовуйте редактор коду, наприклад, вбудований редактор WordPress.

  1. За допомогою файлового менеджера підключіться до сервера хостингу і скопіюйте в кореневу директорію вашого сайту підготовлений файл з ім'ям favicon.
  2. В адмінці WordPress зайдіть в меню «Зовнішній вигляд» (1) і виберіть пункт «Редактор» (2).
  3. У списку шаблонів відкрийте файл заголовка header.php (3).
  4. Після відкриваючого тега вставте рядок (4), в якій перевірте формат завантаженого файлу з іконкою (png або інший), при необхідності замініть на свій варіант.
  5. Натисніть кнопку «Оновити файл» (5), щоб застосувати іконку до сайту.

Натисніть кнопку «Оновити файл» (5), щоб застосувати іконку до сайту

Установка favicon використовуючи плагін Favicon by RealFaviconGenerator

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

В меню «Модулі» виберіть пункт «Додати новий». Знайдіть, встановіть і активуйте плагін Favicon by RealFaviconGenerator. Потім зайдіть в меню «Зовнішній вигляд» (1), після установки плагіна в ньому з'явиться пункт Favicon (2) для завантаження іконки. Натисніть кнопку «Виберіть з бібліотеки мультимедіа» (3) і вкажіть розташування файлу з іконкою на вашому комп'ютері. Натисніть кнопку «Генерувати favicon» (4).

Натисніть кнопку «Генерувати favicon» (4)

З адмінки WordPress вас перекине на офіційний сайт плагіна, де ви зможете налаштувати спосіб відображення іконки (5) для нового або працюючого сайту, вказати алгоритм стиснення і масштабування картинки.

Внесіть зміни при необхідності і натисніть кнопку генерації фавікона (6). Після цього ви знову повернетеся в адмін-панель, а плагін автоматично встановить обраний фавікон.

Чому краще встановити без використання плагіна?

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

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

Що таке favicon, чому погано, якщо він відсутній?
Що таке favicon, чому погано, якщо він відсутній?
Як зробити фавікон для сайту онлайн?
Чому краще встановити без використання плагіна?