Існує кілька способів створити фавікон. Найкращий спосіб для вас залежить від різних факторів:
- Час, який ви можете витратити на це завдання. Для багатьох людей це "якомога швидше".
- Зусилля, які ви готові докласти. Мовляв, малюйте значок 16х16 вручну для кращих результатів.
- Конкретні обмеження, як-от підтримка певного браузера з непарними специфікаціями.
Перший спосіб: Використовуйте генератор фавікону
Якщо ви хочете добре і швидко виконати роботу, можете скористатися генератором фавікону . Цей створює зображення та HTML-код для всіх основних браузерів настільних та мобільних пристроїв. Повне розкриття: я автор цього сайту.
Переваги такого рішення: це швидко, і всі міркування щодо сумісності вже були вирішені для вас.
Другий метод: Створіть favicon.ico (лише для веб-переглядачів)
Як ви пропонуєте, ви можете створити favicon.icoфайл, який містить зображення 16х16 та 32х32 (зауважте, що Microsoft рекомендує 16х16, 32х32 та 48х48 ).
Потім оголосіть це у своєму HTML-коді:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
Цей метод працюватиме з усіма настільними браузерами, старими та новими. Але більшість мобільних браузерів ігнорують фавікон.
Про вашу пропозицію розмістити favicon.icoфайл у корені та не оголосити його: будьте обережні, хоча ця методика працює у більшості браузерів, вона не є на 100% надійною. Наприклад, Windows Safari не може його знайти (надано: цей веб-переглядач якось застарів у Windows, але ви розумієте). Цей прийом корисний у поєднанні з піктограмами PNG (для сучасних браузерів).
Третій спосіб: Створіть favicon.ico, значок PNG та піктограму Apple Touch (усі браузери)
У своєму запитанні ви не згадуєте мобільні браузери. Більшість із них ігнорує favicon.icoфайл. Хоча ваш сайт може бути присвячений браузерам настільних комп’ютерів, є ймовірність, що ви не хочете ігнорувати мобільні браузери взагалі.
Ви можете досягти хорошої сумісності з:
favicon.ico, Дивись вище.- Піктограма PNG 192x192 для Android Chrome
- Значок Apple Touch 180х180 (для iPhone 6 Plus; інші пристрої зменшують його за необхідності).
Оголосити їх с
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
Це не повний сюжет, але він досить хороший у більшості випадків.