Bir PNG'den kayıt olmadan nasıl bir favicon paketi yapabilirim?

İkon oluşturucumuzun bir PNG'den yazdığı yedi dosya, her birini neyin okuduğu, sunucunuzda nereye gittiği ve neden şeffaf kısımların katı çıktığı.

August 9, 2026

Bir favicon bir dosya değildir. Bir dizi dosyadır, çünkü bir tarayıcı sekmesi, bir iOS ana ekranı ve bir Android kurulum istemi her biri farklı boyutta farklı bir resim ister. Bir PNG'yi ikon oluşturucumuza bırakın ve diğer taraftan yedi dosya çıksın. Her birinin ne için olduğunu, sunucunuzda nerede durması gerektiğini ve hangilerini atlayabileceğinizi burada bulabilirsiniz.

Tüm işlem sayfa içinde gerçekleşir. Bu uygulamada hiçbir API yolu ve sunucu eylemi yoktur, bu nedenle logonuz createImageBitmap ile okunur, OffscreenCanvas'a boyanır ve kendi tarayıcınız tarafından PNG'ye kodlanır. Hesap yok ve sanat eserinizin bir saat içinde silineceğine dair bir vaat yok.

Yedi dosya nedir ve her biri ne yapar?

Yedi dosya, bir kaynak görüntü. Aşağıdaki boyutlar, 942.4 KB boyutunda 900 x 606 şeffaf PNG olan alpha.png ile gerçek bir çalışmadan gelmektedir. Bayt sayılarınız, her boyutta ne kadar detayın hayatta kaldığına bağlı olarak farklılık gösterecektir, ancak dosya adları ve piksel boyutları araç tarafından sabitlenmiştir.

Yedi dosyanın hepsine ihtiyacınız yok. Masaüstü sekmeleri sizin için önemliyse, yalnızca favicon.ico işinizi görür. Apple dosyası, birisi sitenizi ana ekrana kaydettiği anda önem kazanmaya başlar ve iki Android PNG'si yalnızca manifesti gerçekten gönderirseniz yerlerini alır.

Dosyalar nereye gider ve başlıkta ne olmalı?

Yedi dosyanın hepsi web kökünde yer alır, böylece /favicon.ico, /apple-touch-icon.png vb. olarak çözülür. Next.js'de bu, public klasörüdür. Ardından başlığınıza dört etiket eklenir: 180x180 boyutunda bir apple-touch-icon bağlantısı, 32 ve 16 için iki rel=icon bağlantısı ve manifest için bir bağlantı. Araç, sonuçların yanına bu parçayı kopyalama düğmesi ile birlikte yazdırır.

site.webmanifest, ad, kısa_ad, iki Android simgesi, tema_rengi, arka_plan_rengi ve görüntüleme değerini standalone olarak tutan 371 baytlık bir JSON'dur. İçindeki simge yolları, /android-chrome-192x192.png gibi mutlak olarak yazılmıştır, bu nedenle paketi /assets/icons/ içine yerleştirmek onları sessizce kırar ve her iki src değerini de düzenlemeniz gerekir. Bir tuzak daha: panelde her iki ad kutusunu da boş bırakırsanız, manifest literal adı "My App" ile gelir, bu da telefonun simgenizin altında yazacağı şeydir.

Neden favicon.ico o parçanın içinde değil?

Çünkü tarayıcılar bunu söylenmeden ister. Hiçbir etikete gerek yok. HTML spesifikasyonunun rel=icon bölümü /favicon.ico geleneğini tanımlar: bir belge hiçbir simge bağlantısı bildirmediğinde, tarayıcı o kök yolunu kendisi dener. Bu nedenle .ico sıfır işaretleme ile çalışır ve dosyanın kök dizinde bulunması gerektiği de budur. /images/ içinde bulunan bir kopya asla talep edilmez. Gerçekten başka bir yerde gerekiyorsa, yolunuza işaret eden açık bir simge bağlantısı ekleyin ve tahmin durur.

favicon.ico'nun içinde gerçekten ne var?

.ico bir konteynerdir. Bizimki, 16, 32 ve 48 pikselde render edilen üç PNG'yi, 6 baytlık bir başlık ve her resim için bir 16 baytlık dizin girişi ile tutar; bu da resim verisinin etrafında sarılı 54 baytlık bir yapı demektir. Tek bir 4.6 KB dosyanın üç boyutu nasıl kapsadığı budur: tarayıcı dizini okur, ardından neyi çizdiğine uyan girişi alır. O dizinin bayt düzeni ve neden 256'dan büyük hiçbir şeyin ona sığmadığı kendi başına bir konudur. Windows, Vista'dan beri .ico içinde PNG yüklerini anlamıştır ve mevcut tarayıcılar bunları şikayet etmeden işler.

Neden şeffaf PNG'm katı bir arka plana sahip oldu?

Çünkü her simge tuvali, logonuz oraya inmeden önce doldurulur. Arka plan kontrolü bir input type=color olup alfa kanalı taşımaz, bu nedenle dolgu her zaman opaktır ve varsayılan #ffffff'tir. Kaynağınızın sahip olduğu herhangi bir şeffaflık o renge karşı düzleştirilir. Burada şeffaf bir seçenek yoktur. Üretmeden önce işaretin oturacağı yüzeyle eşleşen rengi seçin.

Şekil de önemlidir. alpha.png 900 x 606'dır ve simgeler kare olduğundan, sanat eseri kare içine tam genişlikte uzun ekseni ile yerleştirilir ve arka plan rengi yukarıda ve aşağıda bantları doldurur. Bu bantlar sizi rahatsız ediyorsa, resmi önce kesici ile kare yapın; bu, bir dosyayı 10 MB'a kadar alır ve sekiz en boy oranı arasında 1:1 ön ayar sunar. İkon panelindeki kenar boşluğu kaydırıcısı 0'dan 30% kadar uzanır ve sanatı dört tarafta eşit olarak içe alır.

196 KB bir simge dosyası için fazla mı?

android-chrome-512x512.png için 196 KB, 521 baytlık 16px dosyasının yanında korkutucu görünüyor. İki şey baskıyı azaltır. O simge, sıradan bir sayfa görüntülemesinde alınmaz, çünkü sekme yalnızca küçük olanı ister ve bir tuval kodlayıcısından çıkan PNG optimize edilmemiştir: convertToBlob geçerli bir dosya yazar, ancak özel bir optimizatörün yaptığı filtre ve palet işini yapmaz. Bu, dosya boyutlarını JPG'den PDF'ye ölçümlerimizde şekillendiren aynı tarayıcı kodlayıcısıdır.

Bunu sıkıştırıcı ile PNG'yi tekrar çalıştırarak küçültebilirsiniz. Aynı 942.4 KB alpha.png'de, kayıpsız mod (oxipng seviye 3) 383.9 KB'de, piksel değişmeden %59 azalmıştı. Daha küçük dosya modu (imagequant) 98.3 KB'ye, %90 azalarak, resmi bir palete indirerek ulaştı. Birkaç renkten oluşan düz bir logo, paletin size görünür hiçbir şey kaybettirmediği tam yerdir. İkonunuz fotoğrafikse kayıpsız tutun.

Kayıt olmam gerekiyor mu ve logom yükleniyor mu?

Kayıt yok ve yükleyecek hiçbir şey yok. Bu kod tabanında hiçbir API yolu ve sunucu eylemi yoktur ve sayfanın yaptığı tek istek, kendi varlıkları için aynı kökenli alımlardır. Üretim sırasında ağ panelinizi açın ve sessiz kaldığını izleyin. Gizlilik sayfamız, bunu bu paragraftan daha az kelimeyle ifade eder.

Sınırlar bir seferde bir dosya ve 10 MB'dır ve dropzone PNG, JPEG, WebP, AVIF, GIF ve SVG'yi kabul eder. Bir SVG, kendi boyutlarının ya da 512 pikselin daha büyük olanında önce rasterleştirilir, bu nedenle 64px kaynağı bile temiz bir 512 simgesi verir. O render, dosyayı bir <img> öğesine yükler; bu, SVG'den dış fontları ve bağlantılı bitmapleri düşüren aynı kısıtlı yoldur. Her şey, yedi dosyayı içeren bir favicon-package.zip olarak indirilir. Logonuz aşırı boyutlu bir dışa aktarma olarak geldiyse, önce yeniden boyutlandırın böylece 20 megapiksellik bir pankartı 16 piksel kareye beslemiyorsunuz.

Bunu sonraki adım olarak yapın: ikon oluşturucuyu açın, logonuzu bırakın, arka plan rengini simgenin oturacağı yere eşleştirin, üretin, web kökünüze çıkarın, başlığınıza dört etiketi yapıştırın ve site.webmanifest'e "start_url": "/" ekleyin. Ardından siteyi zorla yeniden yükleyin ve sekmeye bakın. 16px versiyonu bir bulanıklık olarak görünüyorsa, başka bir şeyi değiştirmeden önce işareti basitleştirmek için geri dönün. Apple'ın Web Uygulamalarını Yapılandırma notları, iOS ana ekranı önceliğinizse okunmaya değer.