Tek görselden PNG favicon ve çok boyutlu ICO
Favicon generator, sitenizi sekmelerde ve yer işaretlerinde temsil edecek küçük ikon dosyalarını hazırlar. Bu favicon oluşturucu, yüklediğiniz JPEG, PNG veya WebP görselin ortasını kareye kırpar. Seçtiğiniz boyutta bir PNG ve içinde dört farklı boyut bulunan bir favicon.ico dosyası üretir. Dosyalar cihazınızda hazırlanır; kaynak görselin içeriği sunucuya gönderilmez.
PNG to favicon generator arayanlar, mevcut logolarını PNG olarak seçip doğrudan dönüştürebilir. Görseldeki saydam alanlar korunur. Beyaz veya renkli bir zemin, saydam alan değildir: araç arka planı silmez. Çok ince çizgileri ve küçük yazıları olan bir logonun 16 pikselde seçilmesi zorlaşabilir; indirmeden önce küçük boyut önizlemesini kontrol edin.
Merkezden kare kırpma logoyu nasıl etkiler?
Kare alanın kenarı, kaynak görselin kısa kenarı kadar olur. Örneğin 800 × 400 piksellik yatay bir görselde ortadaki 400 × 400 piksellik bölüm alınır. Soldan ve sağdan 200 piksel dışarıda kalır. Görsel 32 × 32 piksele küçültülürken oranı korunur; logo kareye sığdırılmak için yataydan sıkıştırılmaz.
İşaretiniz kenardaysa otomatik kırpma bir bölümünü kesebilir. Önce resim kırpma aracında istediğiniz bölümü kare olarak hazırlayıp tekrar yükleyin. Bu sayfada çerçeveyi elle kaydırma veya etrafına boşluk ekleme ayarı yoktur. Kaynak karenin kenarı seçilen çıktıdan küçükse büyütme uyarısı görünür; daha fazla piksel üretmek çizgilerin kaybolmuş ayrıntısını geri getirmez.
Hangi PNG boyutunu indirmelisiniz?
Boyut seçimi hem PNG indirme düğmesini hem de oluşturulan HTML kodunu değiştirir. Birden çok dosya gerekiyorsa boyutları sırayla seçip indirin. ICO içindeki dört boyut bu seçimden bağımsız kalır.
| PNG seçeneği | Bu araçta ne elde edilir? |
|---|---|
| 16 × 16 | Çok küçük görünümde çizgileri kontrol etmek için 16 piksel kare. |
| 32 × 32 | Varsayılan PNG. Favicon generator 32x32 ihtiyacını karşılar. |
| 48 × 48 | Favicon generator 48x48 için 48 piksel kare çıktı. |
| 180 × 180 | HTML koduna ayrıca apple-touch-icon satırı eklenen PNG. |
| 192 × 192 | 192 piksel kare. Uygulama ikon dosyası isteyen yapılandırmalarda kullanılabilir. |
| 512 × 512 | En büyük PNG seçeneği. Küçük kaynaktan üretildiğinde ayrıntı artışı sağlamaz. |
Bu boyutlar kullanım seçenekleridir; her sitenin hepsini eklemesi gerekmez. Apple için eklenen satır, görselin ana ekranda kullanılmasını tanımlar. 192 ve 512 piksel dosyalar ise tek başına sitenizi kurulabilir uygulamaya dönüştürmez.
ICO dosyasında gerçekten dört görüntü bulunur
Favicon ICO generator çıktısı, 16 × 16, 32 × 32, 48 × 48 ve 256 × 256 piksel görüntülerden oluşur. MDN görsel biçimi belgelerinde açıklanan ICO yapısında önce görüntü kayıtları, ardından bu kayıtlara ait görüntü verileri bulunur. Araç her boyutu PNG olarak kodlayıp aynı ICO dosyasına yerleştirir. PNG dosyasının yalnızca uzantısını değiştirmez.
Buradaki dört kayıt için dosyanın başlangıç bölümü 70 bayttır: 6 baytlık ana başlık ve her görüntü için 16 baytlık dört kayıt. Görüntü verileri bunun ardından gelir. Saydamlık PNG verilerinde korunur. Bu yapı PNG içeren ICO okuyabilen yazılımlara yöneliktir; eski yazılımların tamamında açılma garantisi yoktur.
HTML kodunu siteye ekleme
Favicon code generator bölümü, seçtiğiniz PNG dosyası ve favicon.ico için hazır link etiketleri verir. İki dosyayı da indirin, sitenizin kök dizinine yükleyin ve Kopyala düğmesiyle aldığınız kodu HTML belgesinin <head> bölümüne ekleyin. Örneğin 32 piksel seçiliyken PNG yolu /favicon-32x32.png olur. Dosyayı başka bir klasöre koyarsanız koddaki yolu da değiştirin.
MDN bağlantı ilişkisi belgeleri, tarayıcının birden fazla ikon arasından tür ve boyut bilgileriyle seçim yapabildiğini açıklar. Bu nedenle PNG boyutunu değiştirdiğinizde eski indirme adıyla yeni HTML kodunu karıştırmayın. Araç dosyaları sitenize yüklemez veya mevcut favicon ayarlarını değiştirmez.
Favicon yüklendiği hâlde neden görünmez?
Önce HTML kodundaki dosya adresini doğrudan açın: yanlış klasör veya dosya adı varsa ikon bulunamaz. Dosya açılıyor ama sekmede eski ikon görünüyorsa tarayıcı önbelleği veya site tarafından eklenmiş başka ikon etiketleri etkili olabilir. Aynı sayfanın ürettiği tüm favicon etiketlerini birlikte kontrol edin.
Google Search Central, arama sonuçları için ikonun kare ve en az 8 × 8 piksel olmasını ister; farklı yüzeylerde daha iyi görünmesi için 48 × 48 pikselden büyük bir dosya önerir. Ana sayfa ve ikon dosyası ilgili Google tarayıcılarına açık olmalı, ikon adresi sık sık değiştirilmemelidir. Yeni ikonun işlenmesi zaman alabilir. Dosyanın doğru hazırlanması, Google arama sonuçlarında gösterileceği anlamına gelmez.
Sık sorulan sorular
64 × 64 piksel PNG üretebilir miyim?
Bu araçta 16, 32, 48, 180, 192 ve 512 piksel PNG seçenekleri bulunur. 64 piksel seçeneği yoktur. Tam 64 × 64 piksel gerekiyorsa görsel boyutlandırma aracıyla ayrıca hazırlayın.
Harf veya metinden favicon oluşturabilir miyim?
Harf ya da metin yazarak ikon çizme özelliği yoktur. Hazırladığınız harf görselini JPEG, PNG veya WebP olarak yükleyebilirsiniz. Araç yüklenen görselin ortasını kareye kırpar.
SVG logomu doğrudan yükleyebilir miyim?
SVG yüklemesi desteklenmez. Logoyu önce bir çizim uygulamasından PNG olarak dışa aktarın. Saydam arka plan gerekiyorsa bu saydamlığın dışa aktarılan PNG içinde korunduğunu kontrol edin.
ICO dosyam eski bir uygulamada neden açılmıyor?
Üretilen ICO, PNG olarak kodlanmış dört görüntü içerir. Bazı eski uygulamalar ICO içinde yalnız BMP biçimindeki görüntüleri okuyabilir. Bu araç BMP tabanlı eski ICO çeşidini üretmez.
192 veya 512 piksel PNG indirmek PWA kurulumu için yeterli mi?
Tek başına yeterli değildir. Bu dosyalar bir manifest içinde ikon kaynağı olarak kullanılabilir, ancak araç manifest, service worker veya uygulama kurulum yapılandırması oluşturmaz. Platformunuzun istediği diğer koşulları ayrıca tamamlayın.
Sıfırla düğmesi indirdiğim favicon dosyalarını siler mi?
Hayır. Sıfırlama seçili görseli, önizlemeyi, HTML kodunu ve sayfadaki indirme bağlantılarını temizler. Daha önce cihazınıza indirdiğiniz dosyalar yerinde kalır.