Як додати favicon (фавікон) на сайт
Favicon (скорочення від «favorite icon») — це невелика графічна піктограма, пов’язана з веб-сайтом. Вона відображається у вкладках браузера, закладках, списках історії, а іноді й у результатах пошуку, допомагаючи користувачам швидко розпізнавати та ідентифікувати сайт. Фавіконки виконують як функціональну, так і брендингову мету, покращуючи навігацію та роблячи веб-сайт візуально відмінним від інших сайтів.
У минулому для фавіконок зазвичай використовувався формат .ico. Сьогодні він вважається застарілим і в більшості випадків більше не потрібен. Сучасні браузери повністю підтримують формати .PNG та .SVG, якими легше керувати та які забезпечують кращу якість, особливо на екранах з високою роздільною здатністю.
SVG особливо корисний, оскільки він векторний та ідеально масштабується на будь-якому екрані. На відміну від .PNG, він не вимагає кількох розмірів. Немає фіксованого «розміру» для фавіконки у форматі SVG, але рекомендується використовувати viewBox, наприклад, 0 0 32 32 або 0 0 64 64, та дотримуватися простого дизайну, щоб він залишався чітким навіть при малих розмірах.
Рекомендоване налаштування
Нижче наведено практичне налаштування, яке охоплює сучасні браузери та пристрої Apple:
HTML
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Ця комбінація забезпечує:
- SVG для сучасних браузерів (найкраща якість та масштабованість)
- PNG-версії для сумісності
- Іконка Apple для головного екрана iOS
Де розмістити файли
Розмістіть файли іконок у кореневому каталозі вашого веб-сайту або у спеціальній папці /icons/. Потім додайте теги <link> у розділ <head> вашого HTML-документа.
Застарілий метод додавання фавікона веб-сайту. Він більше не рекомендується, але все ще часто зустрічається на веб-сайтах.
<link rel="shortcut icon" href="/favicon.ico">
Додаткові примітки
Після додавання або оновлення фавікона вам може знадобитися очистити кеш браузера, щоб побачити зміни. Також деякі платформи CMS можуть пропонувати вбудовані налаштування іконки веб-сторінки.
Зазвичай я додаю фавікон, як описано вище. Для створення іконок я використовую сервіс: https://realfavicongenerator.net/
Підсумовуючи, використання SVG як основного формату разом із резервними PNG-файлами та іконкою Apple touch забезпечує сучасне, чисте та надійне налаштування фавікону без використання застарілих файлів .ico.
Схожі записи:
-
Як центрувати елемент по вертикалі за допомогою CSS (вертикальне вирівнювання)
Існує декілька способів вертикального вирівнювання. У різних ситуаціях підходять різні способи. Розглянемо деякі з них. 1. Використання Flexbox Найпростіший і поширений...
-
Як створити випадаюче меню, використовуючи лише HTML та CSS
В одній з попередніх статей ми розглядали створення випадаючого меню за допомогою JavaScript (jQuery). У цій статті ми розглянемо, як створити випадаюче меню, використову...
-
Проблема масштабування зображень у Outlook
HTML верстка електронних листів – це досить складний і не завжди приємний процес. Це головним чином пов'язано з тим, що багато поштових клієнтів не підтримують сучасні ве...
Залишити відповідь