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

Установка іконки favicon на сайт WordPress

  1. вступ
  2. Що в статті
  3. Як зробити Favicon для сайту WordPress
  4. FAVICON GENERATOR
  5. Dynamicdrive
  6. Favicon готовий можна завантажувати його на сайт WordPress
  7. Завантажуємо новий Favicon в каталог сайта
  8. Залишається остання вставити прописаний код в шаблон сайту
  9. Ще один варіант додати однаковий Favicon на сам сайт і на адміністративну панель

вступ

Нерозривному «супутницею» адреси сайту є картинка розташована поруч з ним. Це іконка сайту або favicon (favorites icon). Видно іконка в адресному рядку відкритої вкладки і при додаванні сайту в закладки браузера. Відсутність іконки сайту робить його менш помітним і не відрізнятись від інших сайтів, особливо в закладках браузера.

Що в статті

Для установки іконки на сайт WordPress потрібно зробити кілька кроків:

  • Зробити іконку (Favicon) на генераторі Favicon;
  • Завантажити Favicon на сервер хостингу в каталог сайта;
  • Написати код з атрибутом rel і явною вказівкою на розміщення Favicon;
  • Вставити код в шаблон сайту.

Як зробити Favicon для сайту WordPress

Для іконки сайту WordPress потрібна картинка розміром 16 × 16 пікселя, краще в форматі favicon.ico. Якщо в шаблоні, за допомогою коду, вказувати явне розміщення іконки в каталозі сайту, то формат Favicona може бути відмінним від [.ico].

Вважається, що деякі сучасні браузери можуть самостійно знаходити картинку у форматі favicon.ico в кореневій папці сайту або в каталозі шаблону і використовувати її як іконку сайту.

Для виготовлення «фавікона» існує маса online інструментів. Запропоную два з них. Я користуюся ними давно, вони елементарні в своєму виконанні.

FAVICON GENERATOR

www.favicon-generator.org

Dynamicdrive

tools.dynamicdrive.com/favicon

Щоб зробити Favicon, потрібно спочатку вказати потрібний розмір Favicona, завантажити в генератор будь-яке зображення зі свого комп'ютера і натиснути виготовлення favicon. Favicon генерується за секунди, після чого його можна завантажити знову на комп'ютер. Генеруються іконки з ім'ям Favicon.ico.

Favicon готовий можна завантажувати його на сайт WordPress

Спочатку спробуємо знайти в кореневому каталозі сайту раніше встановлений Favicon. Favicon сайту може розташовуватися в двох основних місцях каталогу.

  • Перше місце розташування Favicon це корінь сайту, безпосередньо папка [httpdocs] або [publ_html].
  • При установці стороннього шаблону WordPress Favicon шаблону може розміщуватися в папці: / themes / НАЗВАНІЕ_ТЕМИ_WP / images.

Перевіряємо ці дві адреси. Якщо знаходимо старий Favicon його видаляємо або перейменовуємо.

Завантажуємо новий Favicon в каталог сайта

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

Перше місце це безпосередньо коренева папка сайту (папка [httpdocs] або [publ_html]). Друге місце це папка [image] в робочій темі вашого сайту. При другому розміщенні Favicon потрібно буде міняти кожен раз при зміні теми (шаблону) сайту.

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

<Link href = "http: //ваш-сайт.ru/favicon.ico" rel = "icon" type = "image / x-icon" /> <link href = "http: //ваш-сайт.ru/ favicon.ico "rel =" shortcut icon "type =" image / x-icon "/>

При розміщенні Favicona в корені сайту потрібен такий код:

<Link href = "http: //ваш-сайт.ru/favicon.ico" rel = "icon" type = "image / x-icon" /> <link href = "http: //ваш-сайт.ru/ favicon.ico "rel =" shortcut icon "type =" image / x-icon "/>

При розміщенні Favicona в темі сайту потрібен такий код:

<Link href = "http: //ваш-сайт.ru/путь_к_іконке/favicon.ico" rel = "icon" type = "image / x-icon" /> <link href = "http: // ваш-сайт. ru / путь_к_іконке / favicon.ico "rel =" shortcut icon "type =" image / x-icon "/>

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

<Link href = "http: //ваш-сайт.ru/путь_к_іконке/favicon.ico" rel = "icon" type = "image / x-icon" /> <link href = "http: // ваш-сайт. ru / путь_к_іконке / favicon.ico "rel =" shortcut icon "type =" image / x-icon "/>

У цих кодах можна змінити назву і формат favicon, який ви завантажили в каталог.

Залишається остання вставити прописаний код в шаблон сайту

Авторізуемся в адміністративній панелі сайту. В консолі, зліва, в вертикальному меню вибираємо: Зовнішній вигляд → Редактор.

У відкритому редакторі справа шукаємо і вибираємо шаблон header.php. На сторінці header.php вставляємо написані коди <link rel = "всередину елемента <head>, після всіх уже стоять кодів <link rel ="

Не забуваємо зберігатися. Відкриваємо сайт в браузері. Через кілька секунд з'являється ваш favicon поруч з назвою сайту. було:

стало:

Як видно на фото в адресному рядку іконка сайту не змінюється. Змінюється тільки іконка в закладках і в вікні вкладки. Робота по розміщенню свого favicon (favorites icon), іконки сайту завершені. У підсумках статті зазначу:

  • Слідкуйте за збігом назви і розширення favicon в коді і каталозі;
  • Вставляйте коди <link rel = "після всіх уже наявних кодів <link rel =";
  • Якщо іконка довго не з'являється, очистіть кеш вашого браузера (Ctrl + F5 в Chrom).

Ще один варіант додати однаковий Favicon на сам сайт і на адміністративну панель

  • Для цього видаліть всі старі коди з favicon (читати вище);
  • Зробіть в генераторі favicon вподобану вам іконку в форматі favicon.ico;
  • Іконку favicon.ico завантажте в кореневу папку вашого сайту [httpdocs] або [publ_html];
  • Вставте цей код в шаблон вашого сайту між тегами <heаd> і </ heаd>;
<Link href = "favicon.ico" rel = "shortcut icon" />
  • Для вставки коду увійдіть з консолі сайту WP в редактор: Консоль → Зовнішній вигляд → Редактор → header.php /;
  • Знайдіть тег <heаd> і до тега </ heаd> вставте код;
  • Не забудьте зберегтися.

Усе! Встановлено однаковий favicon для основної частини сайту і для консолі.

Примітка: анімірованнних іконка для сайту (формату .gif) читається тільки останніми версіями Firefox. Вставляється всередину елемента <head>, також як і коди для favicon:

<Link href = "/ ваш_анімірованний_GIF.gif" rel = "icon" type = "image / gif" /> <link href = "/ ваш_анімірованний_GIF.gif" rel = "shortcut icon" type = "image / gif" />

На цьому все!

© www.wordpress-abc.ru

Інші статті розділу: Модулі


Статті пов'язані з теми: