UltKit

Konwerter SVG na ICO

SVG to najlepszy punkt wyjścia dla favicony: każdy rozmiar ikony jest rysowany od nowa z wektora, a nie zmniejszany z dużej bitmapy, więc wersja 16 px pozostaje tak ostra, jak pozwala na to siatka pikseli.

Konwerter obrazów

lub upuść Pliki JPG, JPEG, JPE … tutaj ·

Maks. 95 MB na plik· Do 20 plików· Usuwane po 30 min

Plik wynikowy

Pliki są przetwarzane na naszych serwerach i usuwane po 30 min.

Jak korzystać z narzędzia

  1. 1

    Prześlij logo w SVG

    Użyj znaku graficznego lub monogramu, a nie pełnego logotypu z napisem. Najczystszy efekt daje kwadratowy viewBox.

  2. 2

    Zachowaj wszystkie rozmiary ikony

    Opcja Rozmiary ikon domyślnie ma wartość Wszystkie rozmiary (16–256), która zapisuje wszystkie rozdzielczości w jednym pliku .ico. Pojedynczy rozmiar wybierz tylko wtedy, gdy program wymaga dokładnie jednego.

  3. 3

    Kliknij Konwertuj na ICO

    Zapisz plik jako favicon.ico w głównym folderze witryny albo wskaż go jako ikonę skrótu w Windows.

Odpowiedź

Jak przekonwertować SVG na ICO do favicony?

Prześlij plik SVG, pozostaw Rozmiary ikon na Wszystkie rozmiary (16–256) i kliknij Konwertuj na ICO. Otrzymasz jeden plik .ico z każdą rozdzielczością wyrenderowaną z wektora, z zachowaną przezroczystością.

Konwerter SVG na ICO: dlaczego wektor to najlepsze źródło

Format .ico pochodzi z wczesnych wersji Windows, a konwencja favicon.ico z Internet Explorera 5 z 1999 roku, który szukał pliku o tej nazwie w katalogu głównym każdej zakładkowanej witryny. ICO to mały kontener: katalog wpisów, z których każdy jest osobną kwadratową bitmapą, więc jeden plik może zawierać ikonę karty 16 px i ikonę pulpitu 256 px. Windows Vista podniósł maksimum do 256 × 256 i pozwolił zapisywać te duże wpisy jako PNG.

Ponieważ każdy wpis to osobna bitmapa, jakość ikony zależy od tego, jak powstał każdy rozmiar. Z PNG każdy rozmiar to pomniejszenie tych samych pikseli. Z SVG każdy rozmiar to nowy rendering ścieżek, z wygładzaniem obliczonym dla dokładnie tej siatki. Przy 16 × 16 px, gdzie logo ma do dyspozycji 256 pikseli, ta różnica jest widoczna.

1:1

16 × 16 px

16 × 16

Karty przeglądarki, zakładki i listy historii.

1:1

32 × 32 px

32 × 32

Karty na ekranach o wysokiej gęstości, skróty na pasku zadań Windows.

1:1

64 × 64 px

64 × 64

Skalowane widoki pulpitu i przypięte elementy.

1:1

128 × 128 px

128 × 128

Duże podglądy w menedżerach plików.

1:1

256 × 256 px

256 × 256

Największy wpis ICO; bardzo duże ikony Eksploratora.

SVG

Scalable Vector Graphics

SVG to format wektorowy oparty na XML, ustandaryzowany przez W3C w 2001 roku. Zamiast pikseli opisuje kształty, ścieżki i tekst, dzięki czemu pozostaje ostry w każdym rozmiarze i zwykle jest malutki w przypadku logo i ikon. Obsługuje przezroczystość, style CSS, skrypty i animacje, a każda przeglądarka renderuje go natywnie. SVG nie nadaje się do zdjęć, a złożone ilustracje mogą się wolno renderować. Otwierają i edytują go Illustrator, Inkscape, Figma i przeglądarki.

Kompresja
–
Przezroczystość
Tak
Animacja
Tak
Rok powstania
2001 · W3C
Konwerter SVG

ICO

Ikona Windows

ICO to format ikon Microsoftu używany dla ikon programów w Windows i favicon witryn. Jeden plik .ico może zawierać kilka obrazów w różnych rozmiarach, takich jak 16×16, 32×32, 48×48 i 256×256 pikseli, dzięki czemu system wybiera najlepiej pasujący. Każdy obraz może być zapisany jako bitmapa lub dane PNG i obsługuje pełną przezroczystość alfa. ICO nie jest przeznaczony do zdjęć ani dużych grafik. Odczytują go przeglądarki, Windows i większość edytorów ikon.

Kompresja
Bezstratna
Przezroczystość
Tak
Animacja
Nie
Rok powstania
Microsoft
Konwerter ICO

SVG na ICO konwertuje się, ponieważ logo istnieje jako wektor, a katalog główny strony, skrót w Windows lub aplikacja desktopowa nadal oczekują jednego pliku .ico z kilkoma rozmiarami bitmap.

Przygotuj plik SVG przed konwersją SVG na ICO

ZróbNie rób
Ustaw viewBox na kwadrat, na przykład 0 0 512 512.Nie polegaj na bardzo cienkich liniach, które znikają poniżej 32 px.
Zostaw niewielki margines, aby znak nie dotykał krawędzi ikony.Nie zostawiaj szerokiego logotypu, który zmienia się w cienką smugę.
Zamień tekst na krzywe, aby czcionka się nie zmieniła.Nie odwołuj się w SVG do zewnętrznych obrazów ani czcionek internetowych.
Użyj symbolu lub inicjałów, a nie pełnej nazwy.Nie dodawaj białego prostokąta za logo, chyba że ma być widoczny także na ciemnych kartach.

Konwerter renderuje wyłącznie to, co opisuje SVG, więc połączone zasoby i niewbudowane czcionki nie zostaną pobrane. Programy takie jak Figma, Illustrator i Inkscape potrafią wyeksportować tekst jako ścieżki; zrób to, a litery będą wszędzie zgodne z Twoją marką.

Gdy plik .ico jest gotowy, dodaj PNG 180 px dla ikon Apple touch oraz sam plik SVG dla przeglądarek obsługujących faviconę wektorową; SVG na PNG utworzy PNG w dowolnym rozmiarze. Jeśli Twoim źródłem jest logo w bitmapie, to samo zadanie wykona PNG do ICO.

Konwersja SVG na ICO: pytania

Dlaczego warto użyć konwertera SVG na ICO zamiast zaczynać od PNG?

PNG trzeba pomniejszać do każdego rozmiaru ikony, a pomniejszanie rozmywa krawędzie. SVG jest renderowany bezpośrednio w rozmiarach 16, 32, 64, 128 i 256 px, więc każdy rozmiar ma ostre krawędzie dopasowane do własnej siatki pikseli.

Czy przeglądarki nadal potrzebują favicon.ico, jeśli strona ma ikonę SVG?

Chrome i Firefox odczytują favicon SVG zadeklarowany znacznikiem link, ale wiele przeglądarek, czytników kanałów i robotów nadal domyślnie żąda /favicon.ico z katalogu głównego witryny. Dodanie obu plików obejmuje wszystkie przypadki.

Co się stanie, jeśli mój plik SVG nie jest kwadratowy?

Miejsca na ikony są kwadratowe, więc szerokie logo albo dostaje puste marginesy, albo wygląda na maleńkie. Najpierw ustaw w viewBox równą szerokość i wysokość albo po wyeksportowaniu PNG przytnij kwadratową wersję narzędziem przytnij zdjęcie.

Czy przezroczyste tło zostaje zachowane w ICO?

Tak. ICO przechowuje kanał alfa, więc miejsca bez wypełnienia w SVG pozostają przezroczyste, a ikona dobrze wygląda zarówno na jasnych, jak i ciemnych kartach przeglądarki.

Czy mogę zamienić SVG na ICO dla programu lub folderu w Windows?

Tak, ten sam plik działa. Windows używa obrazu 256 px w widokach dużych i bardzo dużych ikon Eksploratora, a mniejszych wpisów na listach i na pasku zadań.

Dlaczego moja ikona wygląda na pustą przy 16 px?

Cienkie linie i mały tekst przy takim rozmiarze znikają. Linia o grubości 2 jednostek na obszarze roboczym 512 jednostek ma w ikonie 16 px znacznie mniej niż jeden piksel. Pogrub linie albo użyj prostszego znaku do favicony.