Установка на сайт Favicon
Из Wiki: “Favicon (скор. від англ. FAVorites ICON — «значок для обраного», від назви папки з закладками в MSIE) — значок веб-сайту або веб-сторінки. Відображається браузером в адресному рядку перед URL сторінки, а також в якості картинки поруч з закладкою, у вкладках і в інших елементах інтерфейсу.”
Для favicon необхідно зображення у форматі ico
, png
або gif
з розмірами 16x16
, 32x32
, 48x48
або 64x64
і з 8-бітної або 24-бітної глибиною кольору.
Тип image/x-icon
застарів в 2003 році після стандартизації типу для ico
. Правильний тип image/vnd.microsoft.icon
підтримується всіма браузерами. Важливо пам’ятати, що іконка не відображатиметься в браузері, якщо її Content-type
, повертається веб-сервером, що не співпаде з зазначеним в html-коді сторінки.
Можна вказати кілька зображень в різних форматах - наприклад, рядок з rel="shortcut icon"
і значком в форматі ico
для Internet Explorer, і рядок сrel="icon"
і значком в форматі gif
або png
для інших браузерів.
Створення Favicon
Favicon можна створити різними способами. Є спеціальні онлайн-сервіси, звані favicon-генераторами, в яких можна в пару кліків створити favicon з картинки або ж намалювати його в спеціальному простенькому редакторі. Можна створити якісний favicon в Gimp або Photoshop. Можна навіть зробити favicon анімованим.
Ось пара прикладів онлайн-сервісів по створенню favicon:
Мені сподобався онлайн-сервіс http://www.favicon.co.uk, так як він робить з картинки більш деталізовані favicon ніж попередні сервіси. Для цього потрібно вибрати “Favicon Size: 64x64”.
Установка Favicon на сайт
Встановити favicon на сайт я пропоную правкою одного з двох файлів теми, header.php
або functions.php
.
Виправлення header.php
Підключаємося до сайту по FTP.
Розміщуємо наш favicon в корінь сайту (поряд з папками wp-admin
, wp-content
i wp-includes
). Ім’я повинно бути favicon.ico
, favicon.png
або favicon.gif
в залежності від розширення. Воно може бути і будь-яким іншим але в такому випадку доведеться правити код вставлений в файл.
Відкриваємо для редагування header.php
і перед тегом який закриває пишемо:
Якщо favicon.ico
:
<!-- Favicon -->
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/favicon.ico" rel="icon" type="image/x-icon" />
<!-- Конец - Favicon -->
Якщо favicon.gif
:
<!-- Favicon -->
<link href="favicon.ico" rel="shortcut icon" type="image/gif" />
<link href="favicon.gif" rel="icon" type="image/gif" />
<!-- Конец - Favicon -->
А таким чином ви можете використовувати favicon розташований в іншому місці і з іншим ім’ям. У тому числі так можна вантажити favicon навіть з іншого сайту.
Якщо ico
:
<!-- Favicon -->
<link href="http://Ваш сайт/название картинки.ico" rel="shortcut icon" />
<link href="http://Ваш сайт/название картинки.ico" rel="icon" type="image/x-icon" />
<!-- Конец - Favicon -->
Якщо gif:
<!-- Favicon -->
<link href="http://Ваш сайт/название картинки.gif" rel="shortcut icon" />
<link href="http://Ваш сайт/название картинки.gif" rel="icon" type="image/gif" />
<!-- Конец - Favicon -->
Виправлення functions.php
Підключаємося до сайту по FTP.
Розміщуємо наш favicon в корінь сайту (поряд з папками wp-admin
, wp-content
і wp-includes
). Ім’я повинно бути favicon.ico
, favicon.png
або favicon.gif
в залежності від розширення. Воно може бути і будь-яким іншим але в такому випадку доведеться правити код який вставляється в файл.
Відкриваємо для редагування functions.php і в кінці, перед тегом який закриває ?>
пишемо:
Якщо favicon.ico
:
/* Favicon */
function my_favicon() {
echo '<link href="'.get_bloginfo('wpurl').'/favicon.ico" rel="shortcut Icon" type="image/x-icon" />';
}
add_action('wp_head', 'my_favicon');
add_action('admin_head', 'my_favicon');
add_action('login_head', 'my_favicon' );
/* Конец - Favicon*/
Якщо favicon.gif
:
/* Favicon */
function my_favicon() {
echo '<link href="'.get_bloginfo('wpurl').'/favicon.gif" rel="shortcut Icon" type="image/gif" />';
}
add_action('wp_head', 'my_favicon');
add_action('admin_head', 'my_favicon');
add_action('login_head', 'my_favicon' );
/* Конец - Favicon*/
Примітка: У вашій темі може не виявитися файлу
header.php
абоfunctions.php
. У такому випадку потрібно вставляти код в файлindex.php
перед тегом який закриває.
Якщо ця стаття допомогла вам, будь ласка, залиште коментар
Дякую за прочитання!
Arthur is a designer and full stack software engineer. He is the founder of Space X-Chimp and the blog My Cyber Universe. His personal website can be found at arthurgareginyan.com.