Tarayıcınızın sekme çubuğunda bir web sitesinin adının yanında bir HTML favicon görünür. Favicon, bir kullanıcının ziyaret ettiği web sitesini tanımlayan küçük bir resimdir. Faviconlar, bir web sayfasının <head> etiketinde bildirilir.
Tarayıcı sekmelerinizin tamamının veya %99’unun yan tarafında kendi ayırt edici logosu olduğunu fark ettiniz mi? Internet Explorer ilk kez desteklediğinde bu en havalı şeydi (1999’da).
Bu küçük resim veya simge, favori simgesi anlamına gelen favicon’dur. Favicons gerekli değildir, ancak çoğu web sitesinde yaygındır. Ayrıca birden fazla cihazda kısayollar için kullanılırlar. Bu nedenle, tüm web siteleri ve web uygulamaları, kendilerini ayırt etmek için favicon(lar) uygulamalıdır.
HTML Favicon nedir?
HTML favicon, tarayıcı sekmeleri listenizde görünen bir resimdir. Bir siteye ve bağlantı yerleştirmenize izin veren bazı sitelere yer işareti koyarsanız favicon’unuzu görürsünüz. Favicon, kullanıcının sekme listesinde, yer imlerinde ve gömülü bağlantı listelerinde bir siteyi tanımlamasını kolaylaştırır.
Bir web sayfasının <head> etiketine bir favicon eklenir. <head> etiketi, tüm sözde “meta” bilgilerinin gittiği yerdir. Meta bilgi, sayfanın başlığı gibi web sayfasının kendisiyle ilgili ayrıntılardır.
Favicon HTML: Favicon Eklemenin Geleneksel Yolu
Diyelim ki en son teknolojiyi kullanarak harika uygulamanızı bitirdiniz. Biraz parlama eklemek istiyorsun. Birisi web sitenizin URL’sini ziyaret ettiğinde, tarayıcı çubuğunda uygulamanızı tanımlayan bir simge görmelidir. Tasarımınız hazır ve favicon’unuzu sayfaya eklemek istiyorsunuz.
Öncelikle, resminizin bir ICO dosyası olduğundan emin olmanız veya (şeffaflığı korumak için) PNG olarak kaydetmeniz gerekir. Dosya en az 16×16 boyutunda olmalıdır. Ardından, görüntüyü ICO formatına dönüştürün.
Neden ICO’ya geçiyoruz? Bunu yapıyoruz çünkü tarayıcıların birçok çözünürlüğü var ve favori simgeler kısayol simgeleri olarak kullanılıyor. Bir ICO dosyası, farklı çözünürlükleri ve kısayolları desteklemek için içinde birçok PNG görüntüsü içerecektir. Ancak, birazdan tartışacağımız gibi, ICO’nun dezavantajları vardır.
Bir ICO’yu PNG görüntüsünden dönüştürmek için birçok çevrimiçi araçtan birini kullanabilirsiniz.
Tarayıcınız, dosyayı kök dizine bırakarak favori simgenizi seçecektir. Pratik olarak favicon.ico’yu etiketinin arasına index.html’ye ekleyelim. etiketinize aşağıdaki kodu ekleyin:
1 2 3 | <link rel="icon" href="/favicon.ico" type="image/x-icon"> |
Yenileyin ve sekmedeki simge açılır penceresini kontrol edin! Esinti.
Görsel konumumuz /favicon.ico’dur. Bu, web sitemizin kök klasöründeki favicon.ico dosyasını ifade eder. Kök klasör, genellikle bir index.html dosyasının yerleştirildiği ana klasördür.
Not: “favicon.ico Bulunamadı” hatası alırsanız, simgenin favicon.ico olarak adlandırıldığından emin olun. Ardından, simgenizin sitenizin ana klasöründe olduğundan emin olun. Son olarak, index.html’nizin web sayfanızda talep ettiğiniz dosyaya yerleştirildiğini kontrol edin.
Favicon HTML: Favicon Eklemenin Daha Uyumlu Bir Yolu
Favicon’un tüm sistemlerde çalışmadığını fark edebilirsiniz. Bunun nedeni, ICO formatının artık eskisi kadar güvenilir olmamasıdır. Bunu düzeltmek için HTML5, size doğrudan PNG dosyalarına güvenebilmemiz için size özniteliğini tanıttı. Bugün bir PNG’yi bir ICO’ya sıkıştırmak zorunda değiliz!
PNG resmimizi favicon.ico (16×16), görev çubuğu (32×32) ve kısayol simgeleri (96×96) ile eşleşecek şekilde üç boyutta kaydedebiliriz. Ardından HTML kodumuz etiketi şu şekilde değiştirilebilir:
1 2 3 4 5 | <link rel="icon" type="image/png" href="/favicon16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon96x96.png" sizes="96x96"> |
Bu, web sitemizi veya uygulamamızı modern standartlarla daha tutarlı hale getirmelidir!
HTML Favicon Ekleme: Daha Karmaşık Olma
Web tarayıcısı mobil desteği veya daha büyük ekranlar söz konusu olduğunda, potansiyel favicon listemiz genişlemeye devam ediyor.
Örneğin, bir iOS cihazında ana ekrana eklediğinizde temel olarak simge olan elma dokunma simgesini ele alalım. Pekala, iOS cihazları için optimizasyon yapmak istiyorsanız, evet bunun için belirli bir favicon’a ihtiyacınız olacak.
Bakın, favori ikon listemiz büyüyor:
1 2 3 4 5 | <link rel="apple-touch-icon" sizes="72x72" href="touch-ipad.png" > <link rel="apple-touch-icon" sizes="114x114" href="touch-iphone.png" > <link rel="apple-touch-icon" sizes="152x152" href="touch-ipad-ret.png" > |
Favicon Boyutları
Favicon icon eklerken dosya boyutuna dikkat etmelisiniz. Iconların iyi görünmesi için 16×16, 32×32, 64×64 ebatlarında tercih edin.
128 x 128 ölçülerinin üzerinde olmamasına dikkat edin. Daha yüksek boyutlar görselin yüklenmesini uzatacaktır.
Favicon dosya uzantıları
En çok kullanılan ve önerdiğim favicon dosya uzantısı .ico‘dur.
Önerilen dosya formatı .ico‘dur. (Buradan ico formatına çevirebilirsiniz. )
Animasyon favicon ekleme istiyorsanız .gif uzantılı resim dosyaları da kullanabilirsiniz.
Ayrıca .png, .jpg ve .jpeg dosya formatlarını da desteklemektedir.
Add Comment