UltKit
Зображення11
Конвертер зображеньСтиснути зображенняЗмінити розмір зображенняОбрізати зображенняЗображення в PDFФото на паспортЗображення в SVGУсі інструменти: Зображення →
PDF13
Стиснути PDFКонвертер PDFPDF у зображенняОб’єднати PDFРозділити PDFРозблокувати PDFЗахистити PDFУсі інструменти: PDF →
Документи й дані7
Конвертувати в PDFКонвертер документівЗображення в текст (OCR)Зображення в ExcelКонвертер данихКонвертер електронних книгУсі інструменти: Документи й дані →
Відео6
Конвертер відеоСтиснути відеоВідео в аудіоВідео в GIFОбрізати відеоАудіо у відеоУсі інструменти: Відео →
Аудіо4
АудіоконвертерСтиснути аудіоОбрізати аудіоАудіо в текстУсі інструменти: Аудіо →
Інші інструменти22
Генератор QR-кодівЗаархівувати в ZIPРозпакувати архів онлайнКонвертер часових поясівКонвертер одиницьГенератор паролівЛічильник слівВибір кольоруУсі інші інструменти →
БлогЯк це працює

Конвертер SVG в ICO

SVG — найкраща основа для фавікона: кожен розмір іконки малюється заново з вектора, а не зменшується з великого растрового зображення. Тому версія 16 px лишається такою чіткою, наскільки дозволяє піксельна сітка.

Конвертер зображень

або перетягніть Файли JPG, JPEG, JPE … сюди ·

До 95 МБ на файл· До 20 файлів· Видаляються через 30 хв

Результат

Файли обробляються на наших серверах і видаляються через 30 хв.

Як користуватися цим інструментом

  1. 1

    Виберіть логотип у форматі SVG

    Використовуйте знак або монограму, а не повний логотип із назвою. Найчистіший результат дає квадратний viewBox.

  2. 2

    Залиште всі розміри іконки

    Для параметра Розміри іконок за замовчуванням вибрано «Усі розміри (16–256)»: у один .ico буде додано всі роздільні здатності. Окремий розмір обирайте лише тоді, коли програма вимагає саме один.

  3. 3

    Натисніть «Конвертувати у ICO»

    Збережіть файл як favicon.ico у кореневій папці сайту або вкажіть його як значок для ярлика Windows.

Відповідь

Як конвертувати SVG в ICO для фавікона?

Завантажте SVG, залиште для параметра Розміри іконок значення «Усі розміри (16–256)» і натисніть Конвертувати в ICO. Ви отримаєте один .ico з усіма роздільними здатностями, намальованими з вектора, із збереженою прозорістю.

Конвертер SVG в ICO: чому вектор — найкраще джерело

Формат .ico походить із ранніх версій Windows, а угода про favicon.ico — з Internet Explorer 5 1999 року, який шукав файл із такою назвою в корені кожного сайту із закладок. ICO — це невеликий контейнер: каталог записів, кожен з яких є окремою квадратною растровою картинкою, тож в одному файлі можуть поруч бути іконка вкладки 16 px і іконка робочого стола 256 px. Windows Vista підняла максимум до 256 × 256 і дозволила зберігати такі великі записи як PNG.

Оскільки кожен запис є окремим растром, якість іконки залежить від того, як створено кожен розмір. Із PNG кожен розмір — це зменшення тих самих пікселів. З SVG кожен розмір — це новий рендер контурів зі згладжуванням, розрахованим саме для цієї сітки. У 16 × 16 px, де на логотип припадає 256 пікселів, різницю видно.

1:1

16 × 16 px

16 × 16

Вкладки браузера, закладки та історія.

1:1

32 × 32 px

32 × 32

Вкладки на екранах із високою щільністю, ярлики на панелі завдань Windows.

1:1

64 × 64 px

64 × 64

Масштабовані вигляди робочого стола та закріплені елементи.

1:1

128 × 128 px

128 × 128

Великі попередні перегляди у файлових менеджерах.

1:1

256 × 256 px

256 × 256

Найбільший запис ICO; дуже великі значки Провідника.

SVG

Масштабована векторна графіка (SVG)

SVG — векторний формат на основі XML, стандартизований W3C у 2001 році. Замість пікселів він описує фігури, контури та текст, тож залишається чітким за будь-якого розміру, а для логотипів і значків зазвичай дуже малий. Підтримує прозорість, стилі CSS, скрипти та анімацію, а кожен браузер відображає його нативно. SVG не підходить для фотографій, а складні ілюстрації можуть повільно відображатися. Відкрити й редагувати його можна в Illustrator, Inkscape, Figma та браузерах.

Стиснення
–
Прозорість
Так
Анімація
Так
Рік появи
2001 · W3C
Конвертер SVG

ICO

Піктограма Windows

ICO — формат піктограм Microsoft, який використовують для іконок програм Windows і фавіконів сайтів. Один файл .ico може містити кілька зображень різних розмірів, наприклад 16×16, 32×32, 48×48 і 256×256 пікселів, щоб система вибрала найкращий варіант. Кожне зображення може зберігатися як растр або дані PNG і підтримує повну альфа-прозорість. ICO не призначений для фото чи великих ілюстрацій. Його можуть читати браузери, Windows і більшість редакторів іконок.

Стиснення
Без втрат
Прозорість
Так
Анімація
Ні
Рік появи
Microsoft
Конвертер ICO

SVG конвертують в ICO, бо логотип є векторним, а корінь сайту, ярлик Windows або настільна програма досі очікують один файл .ico з кількома растровими розмірами.

Підготуйте SVG, перш ніж конвертувати SVG в ICO

РобітьНе робіть
Задайте квадратний viewBox, наприклад 0 0 512 512.Покладатися на надтонкі лінії, що зникають менше ніж на 32 px.
Залиште невеликі поля, щоб знак не торкався краю іконки.Залишати широкий логотип із назвою, який перетворюється на тонку пляму.
Перетворіть текст на контури, щоб шрифт не змінився.Посилатися всередині SVG на зовнішні зображення чи веб-шрифти.
Використовуйте символ або ініціали, а не повну назву.Додавати білий прямокутник за логотипом, якщо він не потрібен і на темних вкладках.

Конвертер відтворює лише те, що описує SVG, тому підключені ресурси та невбудовані шрифти завантажити неможливо. Figma, Illustrator та Inkscape вміють експортувати текст як контури; зробіть так, і літери скрізь відповідатимуть вашому бренду.

Коли .ico готовий, додайте PNG 180 px для іконок Apple touch і сам SVG для браузерів, що підтримують векторні фавікони; SVG у PNG створює PNG будь-якого розміру. Якщо ваш логотип растровий, те саме з пікселів зробить PNG у ICO.

Конвертувати SVG в ICO: запитання

Навіщо конвертер SVG в ICO, якщо можна почати з PNG?

PNG доводиться зменшувати для кожного розміру іконки, а під час зменшення краї розмиваються. SVG відтворюється одразу в 16, 32, 64, 128 і 256 px, тож кожен розмір має чіткі краї для власної піксельної сітки.

Чи потрібен браузерам favicon.ico, якщо на сайті вже є іконка SVG?

Chrome і Firefox читають SVG-фавікон, оголошений тегом link, але багато браузерів, агрегаторів стрічок і краулерів досі за замовчуванням запитують /favicon.ico з кореня сайту. Якщо додати обидва файли, працюватиме скрізь.

Що буде, якщо мій SVG не квадратний?

Слоти іконок квадратні, тому широкий логотип або матиме порожні поля, або виглядатиме крихітним. Спершу змініть viewBox так, щоб ширина дорівнювала висоті, або після експорту в PNG обріжте квадратну версію інструментом обрізати фото.

Чи зберігається прозорий фон в ICO?

Так. ICO зберігає альфа-канал, тож ділянки SVG без заливки залишаються прозорими, і іконка гарно виглядає на світлих і темних вкладках браузера.

Чи можна конвертувати SVG в ICO для іконки програми або папки Windows?

Так, той самий файл підійде. Windows бере зображення 256 px для великих і дуже великих значків у Провіднику, а менші розміри використовує для списків і панелі завдань.

Чому моя іконка в розмірі 16 px виглядає порожньою?

Тонкі лінії та дрібний текст за такого розміру зникають. Лінія завтовшки 2 одиниці на полотні 512 одиниць в іконці 16 px займає набагато менше одного пікселя. Потовщіть лінії або використайте для фавікона простіший знак.

Інші конвертери іконок