Favicon Yaratma – ICO, PNG və Manifest

Logonu seç; brauzer tabı, telefonun əsas ekranı və Android üçün lazım olan bütün ikonlar və site.webmanifest bir ZIP-də hazırlanır. Şəklin cihazından çıxmır.

PNG daxil olur, ICO çıxır
Maksimum ⁦10 MB⁩
Qeydiyyatsız
Cihazında işləyir

36 Favicon Yaratma

01 Seç
02 Emal et
03 Endir

Cihazınızda emal edilir · yükləmə yoxdur

PNG

Seçilmiş fayl

Həcm: Hazır

Canlı status

Fayl oxunur

Nəticə

Hazırdır.

0fayl ZIP-də

0 BServerə göndərilən məlumatınız: 0 bayt · emal cihazınızda aparıldıNiyə 0: bu səhifənin təhlükəsizlik qaydası brauzer səviyyəsində məlumat göndərməyə imkan vermir; emal bu vərəqdə aparılır. CSP · connect-src 'none' · form-action 'none'

Çevirmək alınmadı.

Arxa fon

Şəffaf Rəng

Forma

Kvadrat Yumru künc Dairə

Kənar boşluğu Tətbiq adı (manifest)

Çox incə detallar 16 pikseldə itə bilər; sadə işarə kiçik ölçüdə daha yaxşı oxunur.

Əməliyyat bu vərəqdə, cihazınızda aparılır.
ICO, PNG-lər, manifest və HTML sətirləri bir ZIP-də gəlir.
Heç bir fayl serverimizə göndərilmir; vərəqi bağladıqda hər şey silinir.

Əvvəlcə loqo seç

Mərhələlər

Fayl oxunur
İkonlar çəkilir
Fayl hazırlanır

Növbəti addım

Şəkli kiçilt

Faylınız cihazınızdan çıxmır
Serverə yükləmə yoxdur
Pulsuz, qeydiyyatsız

Saytın hansı favicon fayllarına ehtiyacı var?

Favicon brauzer tabında, əlfəcinlərdə və axtarış nəticələrində saytın adının yanında görünən kiçik ikondur. Bir fayl kifayət etmir: köhnə və yeni brauzerlər favicon.ico-nu, iPhone və iPad əsas ekrana əlavə olunan saytlar üçün 180 piksellik apple-touch-icon-u, Android və quraşdırıla bilən veb tətbiqlər isə 192 və 512 piksellik ikonları və site.webmanifest faylını axtarır.

Kiçik ölçülər ən çətinidir: 16 pikselə kiçildilən loqo bulanıqlaşa və ya incə detallarını itirə bilər. iPhone əsas ekranında şəffaf sahələr qara görünür; ona görə apple-touch-icon-un düz arxa fonu olmalıdır.

Bu alət logonu (PNG, SVG, JPG və ya WEBP) bir dəfə 1024 pikseldə çəkir və hər ölçüyə yarıya enərək kiçildir, belə ki, kiçik ikonlar kəskin qalır. Arxa fon rəngini, kənar boşluğunu və kvadrat, yumru künc və ya dairə formasını seçə, nəticəni brauzer tabı və telefonun əsas ekranı önizləməsində görə bilərsən. favicon.ico, PNG-lər, site.webmanifest və səhifənə əlavə edəcəyin HTML sətirləri bir ZIP-də gəlir. Şəkil brauzerində işlənir.

3 addımda favicon dəstini hazırlamaq

Logonu seç: Kvadrat və ya kvadrata yaxın PNG, SVG, JPG və ya WEBP faylı seç (ən çox 10 MB). Ən yaxşı nəticəni SVG və ya ən azı 512 piksellik PNG verir.
Görünüşü tənzimlə: Arxa fonu şəffaf saxla və ya rəng seç; kənar boşluğunu və kvadrat, yumru künc və ya dairə formasını təyin et. Tab, əsas ekran və böyük ikon önizləməsi dərhal yenilənir.
ZIP-i yüklə: “Favicon dəstini yarat” bütün faylları bir ZIP kimi verir. Faylları saytın kök qovluğuna qoy və HTML sətirlərini səhifənin <head> bölməsinə yapışdır.

Kimin işinə yarayır?

Veb saytlar və bloqlar: Yeni sayt üçün tabda və əlfəcinlərdə görünən ikonu hazırlamaq.
Onlayn mağazalar: Mağaza loqosunu brauzer tabı, axtarış nəticəsi və telefonun əsas ekranı üçün uyğun ölçülərə gətirmək.
Veb tətbiqlər: Quraşdırıla bilən veb tətbiq (PWA) üçün 192 və 512 piksellik ikonları və manifest faylını yaratmaq.
Agentliklər və dizaynerlər: Müştəri loqosundan tam favicon dəstini dəqiqələr içində təhvil vermək.
Proqramçılar: Layihəyə əlavə ediləcək faylları və <head> sətirlərini hazır almaq.
Şəxsi səhifələr: Portfolio və ya CV saytına baş hərflərdən ibarət ikon əlavə etmək.

Ölçülər, keyfiyyət və limitlər

Yaradılan fayllar: favicon.ico (16, 32 və 48 piksel), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 piksel), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest və HTML sətirləri. SVG vermisənsə favicon.svg də əlavə olunur.
Kəskinlik: Şəkil əvvəlcə 1024 pikseldə çəkilir, sonra hər addımda yarıya enərək kiçildilir; bu üsul birdəfəlik kiçiltmədən daha kəskin kiçik ikonlar verir. Çox incə xətlər 16 pikseldə yenə itə bilər; o ölçü üçün sadə işarə daha yaxşı oxunur.
Şəffaflıq: PNG və ICO şəffaflığı saxlayır. apple-touch-icon iPhone-da qara görünməsin deyə həmişə qeyri-şəffafdır: arxa fon seçməmisənsə ağ işlədilir.
Mənbə şəkil: Kvadrat olmayan şəkillər kəsilmədən mərkəzləşdirilir. 256 pikseldən kiçik şəkillərdə böyük ikonlar bulanıq ola bilər; alət bunu sənə deyir.
ICO formatı: ICO içindəki şəkillər PNG kimi saxlanılır; bütün müasir brauzerlər və Vista-dan bəri Windows bu formatı oxuyur.
Məxfilik və limitlər: Şəkil ən çox 10 MB ola bilər. Loqon yüklənmir, saxlanmır; bütün fayllar brauzerində yaradılır.

Məxfilik və avtomatik silinmə

Bu alət faylınızı serverimizə göndərmir: bütün əməliyyat brauzerinizdə, cihazınızda aparılır. Səhifə faylın məzmununun kənara göndərilməsinin texniki cəhətdən qarşısını alan təhlükəsizlik siyasəti (Content-Security-Policy) ilə təqdim olunur; bu səhifədə analitika və ya reklam skripti işləmir.

Nəticə faylı da cihazınızda yaradılır və onu yalnız siz endirirsiniz. Vərəqi bağladıqda və ya “Yeni fayl” düyməsinə basdıqda fayl brauzerin yaddaşından silinir. Serverimizdə bu əməliyyatla bağlı fayl adı və ya məzmun qeydi saxlanılmır.

Ətraflı məlumat üçün Məxfilik siyasətini oxuyun

Tez-tez verilən suallar

Favicon hansı ölçülərdə olmalıdır?

Tab və əlfəcinlər üçün 16 və 32 piksel (favicon.ico içində 48 də), iPhone əsas ekranı üçün 180 piksellik apple-touch-icon, Android və quraşdırıla bilən veb tətbiqlər üçün 192 və 512 piksel. Alət hamısını bir dəfəyə yaradır.

Favicon-u sayta necə əlavə edim?

ZIP-dəki faylları saytın kök qovluğuna (domenin bilavasitə altına) yüklə və alətdəki HTML sətirlərini səhifənin <head> bölməsinə yapışdır. WordPress kimi sistemlərdə “Sayt ikonu” sahəsinə 512 piksellik PNG-ni yükləmək də kifayətdir.

SVG loqodan favicon olurmu?

Bəli, ən yaxşı nəticəni SVG verir: hər ölçü vektordan çəkilir. Alət favicon.svg faylını da əlavə edir; bunu dəstəkləyən brauzerlər ikonu hər ekranda kəskin göstərir.

iPhone-da ikonum niyə qara fonlu görünür?

iOS əsas ekran ikonlarında şəffaflığı dəstəkləmir və şəffaf sahələri qara göstərir. Ona görə alət apple-touch-icon-u həmişə qeyri-şəffaf yaradır; arxa fon seçməmisənsə ağ işlədir. İstəsən brendinə uyğun rəng seç.

Dəyişdim, amma brauzerdə köhnə ikon görünür, niyə?

Brauzerlər favicon-u uzun müddət keşdə saxlayır. Səhifəni məcburi yenilə (Ctrl+F5, Mac-da ⌘+Shift+R), gizli pəncərədə aç və ya HTML sətrindəki fayl adına ?v=2 kimi əlavə qoy.

Loqom serverə yüklənirmi?

Xeyr. Şəkil brauzerində çəkilir, bütün fayllar orada yaradılır; səhifə xaricə qoşulmanı texniki olaraq bağlayan təhlükəsizlik qaydası ilə gəlir. Hələ açıqlanmamış brend üçün də rahat işlədə bilərsən.