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

Що таке Favicon?

Думаю, кожен із вас помічав favicon, відвідуючи улюблені сайти. Виглядає це так (у браузері Google Chrome):

І для порівняння, відображення іконки у браузері Internet Explorer:

Малюємо Favicon за допомогою веб-сервісу

Найпростіший спосіб зробити фавікон – скористатися сервісом www.favicon.cc. Виглядає він так:

Favicon

Створюємо Favicon із готового зображення

Для того щоб конвертувати готову іконку у форматі .png (який, до речі, теж може використовуватися для завдання favicon), можна скористатися іншим веб-сервісом: favicon.ru.

Встановлюємо Favicon на сайт

Коли іконка буде готова, ви зможете завантажити її у форматі.ico. Щоб додати favicon на сайт, помістіть файл favicon.ico у кореневий каталог сайту та додайте між тегами рядок:

Також рекомендується додавати рядок:

(Для Internet Explorer).

Розмір фавікон може бути 16x16, 32x32.

Корисне зауваження

Файл іконки може мати не тільки розширення .ico, а й .png, причому рекомендується використовувати останній варіант. Це пов'язано з тим, що пристрої з високою роздільною здатністю (наприклад, iPhone, iPad, iPod) за замовчуванням мають розмір іконки 57x57. Для цього краще робити другий варіант іконки (у вищій роздільній здатності) і прописувати додатково рядок:

Але варто відзначити, що в такому випадку іконка буде заокруглена по кутах і на неї буде накладено відблиск (це робиться автоматично самим пристроєм). Щоб уникнути цього, замістьapple-touch-icon потрібно написатиapple-touch-icon-precomposed.