Що таке favicon?

HTMLJunior~2 хв читання

Favicon (скорочення від «favorite icon»), це маленька іконка сайту, яка відображається:

на вкладці браузера поруч із назвою сторінки,
у закладках (обраному),
у списку історії,
у результатах пошуку та на екрані смартфона, якщо сайт додано як ярлик.

1. Приклад favicon на вкладці

javascript

[іконка] Вікіпедія - Вільна енциклопедія

[іконка] ← ось це і є favicon, візуальний символ сайту.

2. Як підключається favicon

Favicon підключається за допомогою тегу <link> усередині <head>:

html

<link rel="icon" href="/favicon.ico" type="image/x-icon">

Основні параметри:

rel="icon": вказує, що це іконка сайту;
href: шлях до файлу (може бути .ico, .png, .svg тощо);
type: MIME-тип зображення (опціонально).

3. Сучасні формати favicon

Формат	Особливості	Приклад
`.ico`	Класичний формат, підтримується всіма браузерами	`favicon.ico`
`.png`	Сучасний формат із прозорістю	`favicon.png`
`.svg`	Векторна іконка, масштабується без втрати якості	`favicon.svg`
`.gif`	Можна використовувати анімований значок (рідко)	`favicon.gif`

4. Де використовується favicon

Місце	Приклад
Вкладка браузера	поруч із заголовком сторінки
Закладки (обране)	під час збереження сайту
Історія відвідувань	поруч із назвою сайту
На мобільних пристроях	під час додавання на головний екран
У пошуковій видачі Google	поруч із URL сайту (для довіри до бренду)

5. Розташування файлу

Типово браузери шукають favicon у корені сайту:

javascript

https://example.com/favicon.ico

Але краще завжди вказувати шлях явно через <link>, це надійніше.

6. Приклади підключення різних форматів

html

<link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/svg+xml" href="/icons/favicon.svg">

apple-touch-icon: іконка для iPhone / iPad під час додавання сайту на екран.
sizes: вказує розмір іконки для адаптивного вибору.

Підсумок:

Характеристика	Опис
Призначення	Іконка сайту для вкладок, закладок і пошуку
Тег підключення	`<link rel="icon" href="favicon.ico">`
Розташування	Усередині `<head>`
Формати	`.ico`, `.png`, `.svg`
Розмір	Зазвичай 16×16 або 32×32 пікселі
Важливість	Покращує впізнаваність бренду та довіру до сайту

Простими словами: favicon, це «міні-логотип» сайту, який робить вкладку впізнаваною та професійною. Без нього сайт виглядає «порожнім» і менш надійним.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Що таке favicon?

#1. Приклад favicon на вкладці

#2. Як підключається favicon

#3. Сучасні формати favicon

#4. Де використовується favicon

#5. Розташування файлу

#6. Приклади підключення різних форматів

#Підсумок: