Як користуватися

Виберіть «Літери» й введіть один або два символи та задайте кольори або виберіть «Зображення» й додайте логотип (бажано квадратний, розміром щонайменше 512 px).
Перегляньте іконки всіх розмірів, особливо 16 і 32 px, які відображаються у вкладках браузера.
Завантажте ZIP і розмістіть файли в кореневій папці сайту.
Вставте теги HTML у секцію head своїх сторінок і за потреби змініть назву в site.webmanifest.

Як це працює

Браузери й пристрої шукають іконки в різних місцях. Тут створюється набір для найпоширеніших випадків: favicon.ico із зображеннями розміром 16, 32 і 48 px для вкладок браузера, закладок і старих програм, які автоматично запитують /favicon.ico; PNG-файли розміром 16 і 32 px, на які посилаються теги link; apple-touch-icon розміром 180 × 180 для додавання сайту на головний екран iPhone або iPad; а також іконки розміром 192 і 512 px, на які посилається site.webmanifest, для головних екранів Android і вебзастосунків, які можна встановити.

У файлі favicon.ico іконки зберігаються як зображення PNG у контейнері ICO, який підтримують усі сучасні браузери та Windows Vista і новіші версії. Файли ICO і ZIP створюються кодом на цій сторінці; нічого не надсилається на сервер.

Для малих розмірів потрібен простий дизайн: за розміру 16 × 16 пікселів тонкі лінії й дрібний текст зникають, тому краще підійде виразна літера або спрощений знак логотипа, а не повний логотип зі словами. Зображення зменшується в кілька етапів із високою якістю. Для apple-touch-icon завжди використовується суцільний колір тла, оскільки iOS заповнює прозорі ділянки чорним, а заокруглює кути самостійно.

Після завантаження нових іконок браузери можуть деякий час показувати старий favicon, оскільки кешують його надовго. Зазвичай допомагає жорстке оновлення сторінки або пряме відкриття /favicon.ico.

Приклади

Іконка з літерами для нового проєкту

Введіть «TG» білими літерами на темно-зеленому заокругленому квадраті — так ви отримаєте чітку іконку, яка добре читається в розмірі 16 × 16 px у вкладці браузера, навіть без готового логотипа.

Іконка з наявного логотипа

Якщо завантажити логотип PNG розміром 1024 × 1024 із прозорим тлом і вибрати «Вписати все зображення», іконки вкладок залишаться прозорими, а apple-touch-icon матиме колір вашого бренду.

Широкий логотип

Якщо логотип із назвою має розмір 1200 × 300, варіант «Обрізати по центру» збереже лише літери посередині. Варіант «Вписати все зображення» збереже його повністю, але зробить дуже дрібним; зазвичай краще використовувати окремий квадратний знак логотипа.

Поширені запитання

Чи потрібен мені favicon.ico?

Так, він досі потрібен. Деякі браузери, програми для читання стрічок та інші інструменти запитують /favicon.ico у кореневій папці сайту, навіть якщо тегу link немає. Сучасні браузери також використовують PNG-іконки, на які посилається HTML.

Куди завантажити файли?

Завантажте їх у кореневу папку сайту, поруч із головною сторінкою, щоб працювали /favicon.ico та інші шляхи в HTML. Якщо використовуєте підпапку, змініть шляхи в тегах link і файлі site.webmanifest.

Чому досі відображається старий favicon?

Браузери кешують фавікони окремо й надовго. Спробуйте жорстке оновлення сторінки, відкрийте /favicon.ico в новій вкладці або перевірте в приватному вікні. Також можна перейменувати файли, наприклад на favicon-v2.ico, щоб примусово перезавантажити їх.

Чи створює цей інструмент favicon у SVG?

Ні. Інструмент створює файли PNG та ICO, які працюють усюди. Якщо у вас уже є логотип у SVG, можете додати його самостійно тегом link з типом image/svg+xml на додачу до цих файлів.

Конфіденційність

Іконки, файл ICO та ZIP створюються у вашому браузері. Ваші зображення й текст не завантажуються на сервер, не зберігаються та не передаються в аналітику.