Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке favicon?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Favicon** (скорочення від «favorite icon») - це маленька іконка сайту, яка відображається на вкладці браузера поруч із назвою сторінки, у закладках, у списку історії, у результатах пошуку та на екрані смартфона, якщо сайт додано як ярлик. **Ключове:** Favicon підключається за допомогою тегу `<link rel="icon">` усередині `<head>` і покращує впізнаваність бренду та довіру до сайту.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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**, це **«міні-логотип» сайту**, який робить вкладку впізнаваною та професійною. Без нього сайт виглядає «порожнім» і менш надійним.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.