thumb

Из 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 перед тегом який закриває.

Якщо ця стаття допомогла вам, будь ласка, залиште коментар :smiley:

Дякую за прочитання!