Як додати favicon (фавікон) на сайт
Last updated: 21.02.2026
Views: 88
Favicon (фавікон) – це значок веб-сайту. Найпростіший спосіб додати його на сторінку – розмістити в корені сайту іконку з назвою favicon.ico 16×16 пікселів. Або встановіть шлях, написавши один рядок у розділі <head>
HTML
<link rel="shortcut icon" href="/images/favicon.ico">
У сучасних реаліях однієї іконки недостатньо. Але встановлювати всі можливі параметри для фавіконки, я вважаю, теж занадто. Достатньо декілька варіантів
- звичайний .ico 16×16
- для сучасних браузерів .png 32×32
- для apple .png 180×180
HTML
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png"> <link rel="shortcut icon" href="/images/favicons/favicon.ico">
Код потрібно додати між тегами <head>.
Зазвичай я додаю фавікон сайту, як написано вище. Для створення іконок я використовую сервіс: https://realfavicongenerator.net/
Автор: Ігор Рибалко
Працюю фронтенд розробником з 2014 року. Основний стек технологій - Vue.js і WordPress
Схожі записи:
-
Як центрувати елемент по вертикалі за допомогою CSS (вертикальне вирівнювання)
Існує декілька способів вертикального вирівнювання. У різних ситуаціях підходять різні способи. Розглянемо деякі з них. 1. Використання Flexbox Найпростіший і поширений...
-
Як створити випадаюче меню, використовуючи лише HTML та CSS
В одній з попередніх статей ми розглядали створення випадаючого меню за допомогою JavaScript (jQuery). У цій статті ми розглянемо, як створити випадаюче меню, використову...
-
Як сховати скроллбар за допомогою CSS
Існує декілька способів приховати скроллбар (смугу прокрутки) за допомогою CSS, залежно від того, чи хочете ви повністю видалити прокручування чи просто приховати візуаль...
Залишити відповідь