Keskin bir favicon için PNG'yi ICO'ya dönüştürün
Favicon, bir web sitesine görsel kimlik kazandıran küçük görüntüdür. Onu tarayıcı sekmesinde sayfa başlığının yanında, yer imleri listenizde, tarama geçmişinizin adres çubuğu açılır listesinde ve bazen arama sonuçlarının yanında görürsünüz. Küçüktür ama çok iş yapar: tanınabilir bir favicon, kullanıcıların düzinelerce sekme arasında sizinkini bulmasına yardımcı olur ve sitenin özenle hazırlandığının göstergesidir. Bu küçük simge için klasik biçim ICO'dur ve oluşturmanın en kolay yolu temiz, kare bir PNG'den başlayıp dönüştürmektir.
Bu araç, bir PNG görüntüsünü alır ve doğrudan tarayıcınızın içinde bir ICO favicon'a dönüştürür. Dönüşüm, kendi cihazınız kullanılarak yerel olarak gerçekleşir; bu nedenle seçtiğiniz resim hiçbir zaman sunucuya yüklenmez. Bu, simgeniz bir logo veya üçüncü tarafa vermekten kaçınmak istediğiniz marka varlığı olduğunda önem taşır. Dosya hazır olduğunda yalnızca indirirsiniz.
ICO biçimi nedir ve neden birden fazla boyut barındırır
ICO, Microsoft Windows'ta ortaya çıkan ve programlar, kısayollar ve klasörler için kullanılan simgeleri depolayan bir simge kapsayıcı biçimidir. Tanımlayıcı özelliği — ve web favicon'larının standardı haline gelmesinin nedeni — tek bir ICO dosyasının aynı görüntüyü birden fazla çözünürlükte aynı anda barındırabilmesidir. Tek bir sabit bit eşlem yerine dosya, küçük kare görüntüler paketi içerir ve tarayıcının ya da işletim sisteminin simgeyi çizmesi gereken yere en uygun boyutu seçmesine izin verir.
Bu gerçekten işlevseldir. Tarayıcı sekmesi küçük bir simgeye ihtiyaç duyar, yer imi çubuğu biraz daha büyük birini kullanabilir ve masaüstündeki sabitlenmiş kısayol daha büyük bir şey isteyebilir. Çok boyutlu bir ICO ile her bağlam kendine uyan sürümü alır; böylece simgeniz tek küçük bir bit eşlemden büyütülerek bulanıklaşmak yerine keskin kalır. ICO ayrıca saydamlığı korur; bu da yuvarlak veya düzensiz logonun köşelerini herhangi bir sekme rengi karşısında temiz tutar.
Önerilen favicon boyutları
Bir web sitesi favicon'u için dahil etmeye değer üç boyut 16x16, 32x32 ve 48x48 pikseldir. 16 piksellik sürüm, çoğu tarayıcının sekme ve adres çubuğunda gösterdiği sürümdür. 32 piksellik sürüm, yüksek çözünürlüklü ekranlarda ve bazı yer imi ile geçmiş görünümlerinde kullanılır; bu nedenle modern ekranlarda işleri keskin tutar. 48 piksellik sürüm, Windows site kısayolları gibi daha büyük bağlamları kapsar. Hepsinin tek bir ICO dosyasında barındırılması sayesinde tek bir varlık gönderirsiniz ve her yüzeyin ihtiyacı olanı seçmesine izin verirsiniz.
Hiçbir şeyin gerilmemesi için kare bir PNG ile başlayın. Kaynak görüntünüz dikdörtgen veya aşırı büyükse, önce görsel yeniden boyutlandırıcımızla temiz bir kareye kırpın veya ölçeklendirin, ardından dönüşümü çalıştırın. Basit, yüksek kontrastlı bir tasarım 16 piksel boyutunda ayrıntılı bir çizimden çok daha iyi okunur; bu nedenle ince metin yerine kalın şekilleri tercih edin.
Favicon'u sitenize nasıl eklersiniz
ICO dosyanız hazır olduğunda web sitenize yükleyin; geleneksel olarak favicon.ico adıyla site kök dizinine koyulur. Pek çok tarayıcı onu orada otomatik olarak bulur, ancak tahmin yürütme olmadan açıkça bildirmek en iyi uygulamadır. Bunu yapmak için HTML'nizin head bölümüne şu şekilde bir link etiketi ekleyin:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Bu satırı sayfalarınızın <head> bölümüne yerleştirin. rel="icon" niteliği, tarayıcıya bu kaynağın sayfa simgesi olduğunu söyler; href ise dosyayı sakladığınız yere işaret eder. Yukarıdaki gibi kök göreli bir yol kullanırsanız aynı bildirim sitenizin her sayfasında çalışır. Dağıtımdan sonra, tarayıcılar favicon'ları agresif biçimde önbelleklediğinden yeni simge görünmeden önce sabit yenileme yapmanız veya önbelleği temizlemeniz gerekebilir.
Tarayıcınızda özel dönüşüm
Her şey cihazınızda gerçekleşir. Seçtiğiniz PNG, yerel olarak okunur, çözümlenir ve ICO olarak yeniden kodlanır; işlem sırasında hiçbir şey makinenizi terk etmez. Hesap yok, kuyruk yok ve sunucu tarafında depolama yok; bu da yayınlanmamış logolar veya anlaşma kapsamındaki müşteri çalışmaları için bile pratik kılar. Grafikleri hazırlayıp düzenlemek için daha fazla yol için görsel araçlar sayfamıza göz atın.
Sıkça sorulan sorular
Görüntüm herhangi bir yere yükleniyor mu?
Hayır. PNG, kendi cihazınızda tamamen tarayıcınızda ICO'ya dönüştürülür. Sunucuya hiçbir şey gönderilmez ve hiçbir şey depolanmaz; görüntünüz gizli kalır.
Favicon'um hangi boyutları içermeli?
En kullanışlı boyutlar 16x16, 32x32 ve 48x48 pikseldir. 16 piksellik görüntü tarayıcı sekmelerinde gösterilirken, büyükleri simgeyi yüksek çözünürlüklü ekranlarda ve masaüstü kısayollarında keskin tutar.
Yalnızca PNG yerine neden ICO kullanayım?
ICO, uzun süredir kullanılan favicon biçimidir ve tek bir dosya içinde birden fazla boyut depolayabilir. Tarayıcılar ve işletim sistemi, her bağlam için uygun çözünürlüğü seçer; böylece simge tek bir bit eşlemden ölçeklendirilmek yerine keskin kalır.
ICO, PNG'deki saydamlığı korur mu?
Evet. ICO biçimi saydamlığı destekler; bu nedenle PNG'nizin saydam alanları korunur ve simge herhangi bir sekme ya da arka plan rengiyle temizce bütünleşir.
Favicon'u web siteme nasıl eklerim?
ICO dosyasını sitenize yükleyin; genellikle kök dizinde favicon.ico olarak, ve HTML'nizin head bölümüne link rel icon type image x-icon href slash favicon.ico gibi bir link etiketi ekleyin. Ardından görmek için tarayıcı önbelleğinizi temizleyin.
Kaynak görüntüm kare değil. Ne yapmalıyım?
Önce gerilmemesi için kareye kırpın veya ölçeklendirin. Temiz bir kare oluşturmak için görsel yeniden boyutlandırıcımızı kullanabilir, ardından en iyi görünümlü favicon için bunu ICO'ya dönüştürebilirsiniz.