- вступ
- Що в статті
- Як зробити Favicon для сайту WordPress
- FAVICON GENERATOR
- Dynamicdrive
- Favicon готовий можна завантажувати його на сайт WordPress
- Завантажуємо новий Favicon в каталог сайта
- Залишається остання вставити прописаний код в шаблон сайту
- Ще один варіант додати однаковий 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>;
- Для вставки коду увійдіть з консолі сайту 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
