UltKit

SVG-ni ICO-ya çevirmək

Favikon üçün ən yaxşı mənbə SVG-dir: hər ikon ölçüsü böyük rastr şəkildən kiçildilmir, vektordan yenidən çəkilir. Buna görə 16 px versiya piksel torunun imkan verdiyi qədər aydın qalır.

Şəkil çevirici

və ya JPG, JPEG, JPE … faylları bura sürüşdürün ·

Hər fayl üçün maks. 95 MB· 20 fayla qədər· 30 dəqiqədən sonra silinir

Nəticə

Fayllar serverlərimizdə emal olunur və 30 dəqiqədən sonra silinir.

Bu alətdən necə istifadə etməli

  1. 1

    SVG loqonu yükləyin

    Tam loqotip yazısını deyil, işarəni və ya monoqramı istifadə edin. Kvadrat viewBox ən təmiz nəticə verir.

  2. 2

    Bütün ikon ölçülərini saxlayın

    İkon ölçüləri parametri Bütün ölçülər (16–256) variantından başlayır və bütün ölçüləri bir .ico faylına yığır. Yalnız proqram dəqiq bir ölçü tələb edəndə tək ölçü seçin.

  3. 3

    ICO formatına Çevir düyməsini basın

    Faylı favicon.ico adı ilə saytınızın kök qovluğunda saxlayın və ya Windows qısayolunu ona yönəldin.

Cavab

Favikon üçün SVG-ni ICO-ya necə çevirmək olar?

SVG-ni yükləyin, İkon ölçüləri parametrini Bütün ölçülər (16–256) vəziyyətində saxlayın və ICO formatına çevir düyməsini basın. Hər ölçüsü vektordan çəkilmiş, şəffaflığı qorunmuş bir .ico faylı alacaqsınız.

SVG-ni ICO-ya çevirmək: vektor niyə doğru mənbədir

.ico formatı Windows-un ilk versiyalarından qalıb, favicon.ico qaydası isə 1999-cu ildə Internet Explorer 5-dən gəlir; o, əlfəcinə əlavə etdiyiniz hər saytın kökündə həmin adlı faylı axtarırdı. ICO kiçik konteynerdir: hər biri ayrıca kvadrat bitmap olan qeydlər kataloqudur, ona görə bir fayl yanaşı 16 px vərəq ikonunu və 256 px masaüstü ikonunu saxlaya bilər. Windows Vista maksimum ölçünü 256 × 256-ya qaldırdı və bu böyük qeydlərin PNG kimi saxlanmasına icazə verdi.

Hər qeyd ayrıca bitmap olduğu üçün ikonun keyfiyyəti hər ölçünün necə hazırlanmasından asılıdır. PNG-dən hər ölçü eyni piksellərin kiçildilməsidir. SVG-dən isə hər ölçü konturların yenidən çəkilməsidir və hamarlama məhz həmin şəbəkə üçün hesablanır. Loqonun işləmək üçün cəmi 256 pikseli olduğu 16 × 16 px ölçüsündə bu fərq nəzərə çarpır.

1:1

16 × 16 px

16 × 16

Brauzer vərəqləri, əlfəcinlər və tarixçə siyahıları.

1:1

32 × 32 px

32 × 32

Yüksək sıxlıqlı ekranlarda vərəqlər, Windows tapşırıq panelinin qısayolları.

1:1

64 × 64 px

64 × 64

Miqyaslanmış masaüstü görünüşləri və sancaqlanmış elementlər.

1:1

128 × 128 px

128 × 128

Fayl menecerlərində böyük önizləmələr.

1:1

256 × 256 px

256 × 256

Ən böyük ICO qeydi; Explorer-də çox böyük ikonlar.

SVG

Scalable Vector Graphics

SVG 2001-ci ildə W3C tərəfindən standartlaşdırılmış XML əsaslı vektor formatdır. Piksellər əvəzinə formaları, yolları və mətni təsvir edir, ona görə istənilən ölçüdə kəskin qalır və loqo və ikonlar üçün adətən çox kiçik olur. Şəffaflığı, CSS üslubunu, skriptləri və animasiyanı dəstəkləyir, hər brauzer onu doğma göstərir. SVG fotolar üçün uyğun deyil, mürəkkəb illüstrasiyaların göstərilməsi isə yavaşlaya bilər. Illustrator, Inkscape, Figma və brauzerlər onu aça və redaktə edə bilir.

Sıxılma
–
Şəffaflıq
Bəli
Animasiya
Bəli
İlk dəfə təqdim edilib
2001 · W3C
SVG konvertoru

ICO

Windows ikonu

ICO Windows proqram ikonları və vebsayt favikonları üçün işlənən Microsoft ikon formatıdır. Tək .ico faylı 16×16, 32×32, 48×48 və 256×256 piksel kimi müxtəlif ölçülü bir neçə şəkil saxlaya bilir, sistem ən uyğununu seçir. Hər şəkil bitmap və ya PNG məlumatı kimi saxlana və tam alfa şəffaflığını dəstəkləyir. ICO fotolar və ya böyük qrafika üçün nəzərdə tutulmayıb. Brauzerlər, Windows və əksər ikon redaktorları onu oxuyur.

Sıxılma
İtkisiz
Şəffaflıq
Bəli
Animasiya
Xeyr
İlk dəfə təqdim edilib
Microsoft
ICO konvertoru

İnsanlar SVG-ni ICO-ya çevirir, çünki loqoları vektor formatındadır, amma saytın kökü, Windows qısayolu və ya masaüstü proqram hələ də bir neçə bitmap ölçüsü saxlayan bir .ico faylı gözləyir.

SVG-ni ICO-ya çevirməzdən əvvəl faylı hazırlayın

EdinEtməyin
viewBox-u kvadrat edin, məsələn 0 0 512 512.32 px-dən aşağıda itən çox nazik xətlərə güvənməyin.
İşarə ikonun kənarına toxunmasın deyə kiçik boşluq qoyun.Nazik ləkəyə çevrilən geniş yazı loqosunu saxlamayın.
Şrift dəyişməsin deyə mətni konturlara çevirin.SVG daxilində xarici şəkillərə və ya veb şriftlərə istinad etməyin.
Tam ad əvəzinə simvol və ya baş hərflərdən istifadə edin.Tünd vərəqlərdə də ağ rəngin görünməsini istəmirsinizsə, loqonun arxasına ağ düzbucaqlı əlavə etməyin.

Çevirici yalnız SVG-nin təsvir etdiyini render edir, ona görə əlaqələndirilmiş resurslar və daxil edilməmiş şriftlər yüklənə bilməz. Figma, Illustrator və Inkscape kimi dizayn alətləri mətni kontur kimi ixrac edə bilir; bunu etsəniz, hərflər hər yerdə brendinizə uyğun olacaq.

.ico hazır olduqdan sonra Apple touch ikonları üçün 180 px PNG, vektor favikonu dəstəkləyən brauzerlər üçün isə SVG-nin özünü əlavə edin; SVG-ni PNG-yə çevirmək alətilə PNG-ni istənilən ölçüdə əldə edə bilərsiniz. Mənbəyiniz bitmap loqodursa, eyni işi pikseldən PNG-ni ICO-ya çevirmək görür.

SVG-ni ICO-ya çevirmək: suallar

Nə üçün PNG əvəzinə SVG-ni ICO-ya çevirmək daha yaxşıdır?

PNG hər ikon ölçüsü üçün kiçildilməlidir, kiçiltmə isə kənarları bulanıqlaşdırır. SVG isə 16, 32, 64, 128 və 256 px ölçülərində birbaşa render olunur, ona görə hər ölçünün kənarları öz piksel şəbəkəsinə uyğun kəskin alınır.

Saytımda SVG ikon varsa, brauzerlərə favicon.ico yenə lazımdırmı?

Chrome və Firefox link teqi ilə elan edilmiş SVG favikonu oxuyur, lakin bir çox brauzer, xəbər oxuyucusu və axtarış robotu hələ də susmaya görə saytın kökündən /favicon.ico faylını istəyir. Hər ikisini yerləşdirsəniz, hər şey əhatə olunur.

SVG faylım kvadrat deyilsə, nə baş verir?

İkon yuvaları kvadratdır, ona görə geniş loqo ya boş kənar boşluqları ilə, ya da çox kiçik görünür. Əvvəlcə viewBox-u en və hündürlüyü bərabər edəcək şəkildə dəyişin və ya PNG ixrac etdikdən sonra şəkli kəsmək alətilə kvadrat variant kəsin.

ICO faylında şəffaf fon saxlanılırmı?

Bəli. ICO alfa kanalını saxlayır, ona görə SVG-də dolğusuz sahələr şəffaf qalır və ikon açıq və tünd brauzer vərəqlərində səliqəli görünür.

Windows proqramı və ya qovluq ikonu üçün SVG-ni ICO-ya çevirmək olarmı?

Bəli, eyni fayl işləyir. Windows böyük və çox böyük Explorer görünüşləri üçün 256 px şəkli, siyahılar və tapşırıq paneli üçün isə kiçik qeydləri oxuyur.

İkonum 16 px ölçüdə niyə boş görünür?

İncə xətlər və kiçik mətn bu ölçüdə itir. 512 vahidlik işçi sahədə 2 vahidlik xətt 16 px ikonda bir pikseldən xeyli azdır. Xətləri qalınlaşdırın və ya favikon üçün daha sadə işarə istifadə edin.