SVG у favicon

Перетворіть SVG-логотип на повний набір favicon — favicon.ico, apple-touch-icon і піктограми вебзастосунку — з чіткою растеризацією просто у вашому браузері. Нічого не завантажується.

Конфіденційність понад усе: кожне зображення обробляється локально у вашому браузері. Нічого не завантажується, не зберігається й не передається на жоден сервер.

Вектор на вході — усі растрові розміри на виході

SVG — ідеальне джерело для favicon: він не залежить від роздільності, тож кожен розмір піктограми можна растеризувати з оригінальної геометрії, а не ресемплити з уже маленького растру. Перетягніть свій SVG — і кожен вихідний файл (16, 32, 48, 180, 192 і 512 пікселів) буде намальовано з вектора у власному розмірі, що зберігає краї чіткими, а не каламутними. Саме в цьому різниця між піктограмою, яка у вкладці виглядає продуманою, і тією, що виглядає як пляма.

Чому .ico усе ще потрібен

Сучасні браузери охоче використовують SVG-favicon напряму, але старіші й чимало інструментів — читалки стрічок, розгортачі посилань у чатах, ярлики на робочому столі — досі шукають favicon.ico. Генерація обох з одного SVG покриває все. Додайте відступи, виберіть квадратну, заокруглену чи круглу маску й тло, а потім завантажте повний набір разом із готовим до вставляння HTML-фрагментом.

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

Чи надсилається моє зображення на сервер для створення фавікона?
Ні. favicon.ico, іконки PNG і маніфест генеруються локально у вашому браузері за допомогою Canvas API. Ваше зображення ніколи не залишає пристрій.
Які розміри та файли я отримаю?
Багатороздільний favicon.ico (16, 32 і 48px), іконки PNG розміром 16, 32, 48, 180 (apple-touch-icon), 192 і 512px, site.webmanifest та фрагмент HTML для вставлення у ваш <head>.
Чи можна конвертувати PNG або SVG в ICO?
Так. Додайте PNG, JPG, SVG або WebP і завантажте справжній favicon.ico. Логотипи SVG спершу растеризуються локально у високій роздільній здатності.
Яке зображення підходить найкраще?
Квадратне зображення з простим контрастним логотипом. Неквадратні зображення обрізаються по центру; використовуйте налаштування відступу та форми, щоб скадрувати його так, як вам потрібно.
Як встановити фавікон?
Розпакуйте пакет у кореневу теку свого сайту та вставте наданий фрагмент HTML у <head> ваших сторінок. favicon.ico більшість браузерів підхоплюють автоматично.