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

Повідомити про помилку
Якщо ви виявили помилку або щось працює не так, опишіть проблему. Поки що це демо-форма, пізніше ми підключимо її до API.
0 / 1000
Допомога по email

Вадим Гук · технічний партнер

Пиши код разом зі мною

Я допоможу пройти шлях від ідеї до готового проєкту.

Написати в Telegram

Перше заняття — 30 хвилин, безкоштовно

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

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

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

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

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

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

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

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

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

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

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