Додаємо favicon на сайт: проста інструкція для новачків

Favicon — це маленька іконка сайту, яка відображається у вкладці браузера біля назви сторінки. Вона здається дрібницею, але допомагає зробити сайт охайнішим, впізнаванішим і більш схожим на справжній завершений проєкт.

У цьому матеріалі показано практичний спосіб додати favicon до звичайного HTML-сайту: від вибору картинки до підключення готових файлів у тегу head. Для генерації потрібного набору іконок у відео використовується сервіс RealFaviconGenerator.

Що буде у відео

• що таке favicon і де він відображається в браузері;
• як вибрати картинку або іконку для favicon;
• як скористатися сервісом RealFaviconGenerator;
• як завантажити готовий набір файлів;
• куди покласти файли favicon у структурі проєкту;
• як підключити favicon через HTML-теги link;
• як не заплутатися зі шляхами до файлів.

Для кого цей матеріал

Цей матеріал підійде новачкам, які вже мають просту HTML-сторінку і хочуть поступово доводити її до більш акуратного вигляду. Особливо корисно подивитися відео тим, хто тільки починає працювати з файлами проєкту, папками, шляхами та підключенням ресурсів у HTML.

Що зробити після перегляду

• Обери картинку або іконку, яку хочеш використати для favicon.
• Відкрий RealFaviconGenerator і завантаж туди вибране зображення.
• Згенеруй набір favicon-файлів.
• Створи окрему папку для favicon у своєму проєкті.
• Розпакуй згенеровані файли в потрібне місце.
• Скопіюй HTML-код із генератора.
• Встав цей код у тег head свого HTML-файлу.
• Перевір шляхи до файлів і відкрий сайт у браузері.

Наступний крок

Після додавання favicon можна продовжувати оформлення сторінки: працювати зі стилями, акуратною структурою HTML, зображеннями та іншими деталями, які поступово роблять простий навчальний сайт більш завершеним.