Генератор фавіконівУсі розміри і готовий блок для head.
Додайте логотип і отримайте справжній багаторозмірний favicon.ico, PNG-розміри, які запитують браузери, apple touch icon, масковану іконку Android і заповнений site.webmanifest. Усе генерується в цій вкладці, ваше зображення ніколи не завантажується на сервер.
Перетягніть сюди логотип
Або торкніться, щоб вибрати файл. Найкраще підходить квадратне зображення від 512px.
PNG, JPG, WebP, SVG, ICO або GIF
Ваше зображення читається, масштабується і пакується в цій вкладці. Воно ніколи не завантажується на сервер, і жоден сервер у процесі не задіяний.
Які розміри фавікона справді потрібні у 2026 році?
Значно менше, ніж набори з двадцяти файлів, які досі видає більшість генераторів. П’ять поверхонь покривають усі важливі браузери й операційні системи, а все інше лише обтяжує ваш <head> без жодної користі.
favicon.ico, 16, 32 і 48
Це досі файл, який браузер шукає в корені домену ще до того, як розбере хоч рядок HTML. Один контейнер вміщує всі три розміри, тому цей конвертер фавіконів створює справжній .ico, а не перейменовує PNG. 16px для вкладки, 32px для retina-вкладки і панелі закладок, 48px для ярликів Windows.
favicon.svg, якщо у вас є вектор
Векторний фавікон чіткий у будь-якому розмірі й навіть може реагувати на темний режим системи через media query всередині файлу. Браузери, які його розуміють, віддають йому перевагу над .ico. Якщо ви завантажите тут SVG, він лишиться вектором: його ніколи не растеризують і не віддають назад як підробку.
apple-touch-icon.png, 180×180
Іконка, яку iOS використовує, коли хтось додає ваш сайт на головний екран. Достатньо одного файлу: з iOS 8 система сама зменшує одну іконку 180px, тож стара купа apple-touch-icon від 57x57 до 152x152 лише зайва вага. Цей генератор apple touch icon створює один файл і робить його непрозорим.
android-chrome 192 і 512, плюс maskable
На них посилається site.webmanifest, а не тег link. 192px для головного екрана, 512px для заставки і запиту на встановлення. Маскований варіант Android обрізає до форми, яку використовує лаунчер, тож зображенню потрібне справжнє поле.
mstile-150x150.png, недорого зберегти
Закріплені сайти Windows досі його читають. Він коштує один маленький PNG і два мета-теги, тому його включено, але нічого не зламається, якщо його видалити. Це чесна відповідь, і саме тому він останній у списку, а не поданий як обов’язковий.
Чому файл .ico містить кілька зображень?
Бо .ico це формат-контейнер, а не формат зображення. Розуміння цього відрізняє фавікон, що відображається всюди, від того, що тихо ламається у Windows і RSS-читачах.
Спочатку каталог, потім зображення
Файл починається з шестибайтового заголовка, який каже, скільки зображень далі, потім іде по одному шістнадцятибайтовому запису на кожне зображення з шириною, висотою, довжиною в байтах і зміщенням у файлі, і лише потім самі дані зображень. Усе в порядку little-endian. Саме через цю структуру PNG, перейменований на .ico, не є .ico.
Споживач сам вибирає потрібний розмір
Браузер, що малює вкладку 16px, читає каталог, знаходить запис 16px і декодує лише його. Дайте йому одне зображення 512px, і він зменшить його під час відмальовки дешевим алгоритмом з розмитим результатом. Дайте спеціально підготовлене зображення 16px, і він використає його.
Усередині може бути PNG
Оригінальний формат вбудовував BMP з перевернутим порядком пікселів і окремою однобітовою маскою прозорості. Усі браузери і всі версії Windows, починаючи з Vista, також приймають PNG усередині контейнера, і саме так пише цей конвертер ico: менші файли, справжній альфа-канал, жодного застарілого кодувальника.
Якість видно саме на 16px
Якщо зменшити логотип 1024px одразу до 16px, береться надто мало вихідних пікселів, і виходить сіра пляма. Цей інструмент зменшує зображення вдвічі на проміжних canvas, з 1024 до 512, до 256 і так далі, тож кожен піксель робить свій внесок. Саме тому маленький фавікон лишається розбірливим.
Чи потрібен ще apple-touch-icon?
Так, і це єдиний файл, для якого правила інші, ніж для решти іконок у наборі. Дві речі, які варто знати, і обидві вже враховано вище.
iOS викидає вашу прозорість
Safari накладає іконку головного екрана на чорне, а не на шпалери, тож логотип, який ви старанно експортували з прозорим фоном, перетворюється на фігуру на чорній плитці. Тому цей інструмент завжди створює apple-touch-icon з непрозорим фоном, білим за замовчуванням, навіть якщо для всього іншого ви вибрали прозорий. З iOS 7 система також більше не додає власного глянцю, тож люди бачать саме те, що ви надали.
Android обрізає, а не додає поля
Лаунчер Android бере масковану іконку і вирізає її у власну форму: коло, сквіркл чи заокруглений квадрат залежно від телефона. Гарантовано зберігаються лише центральні 80%, тож логотип, що заповнює полотно від краю до краю, втрачає свої краї. Маскований файл тут зберігає поле 20% незалежно від повзунка полів, а кругле прев’ю точно показує, що залишить лаунчер.
Як додати фавікон на сайт?
Два кроки, і саме на другому трапляється більшість помилок. Скопіюйте блок, який створює інструмент, а не пишіть його з пам’яті.
Покладіть файли в корінь
Розмістіть favicon.ico та інші файли поруч з index.html, щоб вони відкривалися за адресою yoursite.com/favicon.ico. Браузери самі запитують саме цей шлях, без жодних вказівок, тому розташування в корені важливіше за тег link.
Вставте блок head на кожну сторінку
Не лише на головну. Відвідувач, який потрапив на глибоку сторінку й додав її в закладки, має отримати правильну іконку. Якщо сайт побудовано на шаблоні чи фреймворку, блок належить до спільного макета.
Оголошуйте .ico без розміру
Використовуйте rel="icon" href="/favicon.ico" sizes="any". Розміри вже є всередині контейнера, а жорстко прописаний у розмітці розмір не дає браузеру взяти інші. Рядок SVG іде першим, щоб браузери, які розуміють вектор, обрали його.
Потім жорстко оновіть сторінку, двічі
Фавікони агресивно кешуються окремо від сторінки, тож стара іконка може пережити звичайне оновлення на кілька днів. Відкрийте файл напряму за адресою yoursite.com/favicon.ico, щоб переконатися, що віддається новий, перш ніж робити висновок, що щось зламалося.
Хочете перевірити, куди насправді веде наявний QR-код чи коротке посилання? Розшифруйте його за допомогою QR-декодера
Потрібне коротке посилання для нового сайту? Створіть його в безкоштовному скорочувачі посилань
Іконка лише менша половина першого враження.
Фавікон люди бачать, коли вже потрапили на ваш сайт. Посилання, яке їх туди привело, виконує складнішу роботу, і зазвичай саме його ніхто не вимірює. Якщо це для вас корисно, LinkScale це те, що ми створюємо.
Бачте, звідки прийшов візит
Кліки, країни, пристрої і що сталося далі, для кожного посилання, яке ви поширюєте, а не цифра в чужому дашборді.
Змінюйте адресу призначення пізніше
Спрямуйте надруковане чи опубліковане посилання деінде вже після публікації, не просячи нікого оновити збережене.
Одна сторінка для всього
Сторінка link in bio, на якій є магазин, форма бронювання і соцмережі, щоб єдине дозволене посилання працювало на повну.
Запитання про генератор фавіконів
Залишилися питання?
ОнлайнЖиві люди, зазвичай відповідаємо за кілька хвилин.
Він безкоштовний, без облікового запису, без водяного знака і без обмеження на кількість файлів. Ваше зображення ніколи не завантажується: його читає власний FileReader браузера, малює на canvas і пакує в Blob, усе всередині сторінки. За цим інструментом немає жодного endpoint, тож надсилати його нікуди. Ви можете переконатися в цьому, відкривши вкладку мережі в браузері під час роботи або відключившись від інтернету після завантаження сторінки.
Більше можливостей з LinkScale
Фавікон готовий. Друга половина: посилання, що приводить людей.
LinkScale це платформа посилань для тих, хто хоче знати, що відбувається після кліку, і змінювати адресу призначення без жодного передруку.
Free 14-day trial on every plan