Перед початком
Підготуйте квадратний майстер із простою формою. Перевірте світлу й темну вкладку. Не переносіть фото та дрібний підпис в іконку лише тому, що вони є в основному логотипі.
Текстове пояснення схеми
Майстер → 16 / 32 px → Перевірка вкладки. Літера W у квадраті впізнавана на 16 px. Повний напис Web Article на такому полотні не читається. Порівняйте обидва варіанти в реальному маленькому розмірі.
Як зробити
- Намалюйте знак у векторі або великому растровому файлі. Залиште безпечний відступ, щоб край літери чи кола не обрізався.
- Підготуйте favicon.ico для сумісності та SVG або PNG для сучасних браузерів. Для домашнього екрана окремо створіть відповідний квадратний PNG.
- Додайте link у head. Відкрийте файли напряму: потрібні відповідь 200, правильний тип та іконка. Браузери довго кешують favicon, тому заміні давайте нову назву.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">Розгляньмо приклад
Літера W у квадраті впізнавана на 16 px. Повний напис Web Article на такому полотні не читається. Порівняйте обидва варіанти в реальному маленькому розмірі.
Перевірте результат
Перевірте вкладку, закладку й темну тему. Іконка не повинна бути порожньою, обрізаною чи схожою на знак іншого проєкту.
Де легко помилитися
Перейменування PNG на .ico не змінює формату. Потрібен справжній експорт або перевірений конвертер.
Джерела й продовження
- MDN — link rel=icon
- Как сделать иконку favicon.ico для своего сайта — 2008-12-25 (RU)
Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.