HTML Favicon

Head oturumu charset, viewport, title ve bir stil sayfası bağlantısıyla başlangıç bir meta veri kutusu kurmuştu. Bir favicon, pratik bir head bağlantısı daha: sayfa başlığının yanında tarayıcı sekmesinde görünen küçük simge. Kalabalık sekmeler, yer imleri ve bazı geçmiş listeleri arasında sitenizi tanımayı kolaylaştırır. CSS metniyle çizmezsiniz — tarayıcıyı küçük bir görüntü dosyasına yönlendirirsiniz.

Favicon nedir

Favicon bir site simgesi kaynağıdır. Tarayıcılar onu alır çünkü HTML’iniz (veya /favicon.ico gibi varsayılan bir tahmin) nereye bakacaklarını söyler. Modern sayfalar yolu ve dosya türünü netleştirmek için genellikle bir link öğesiyle açıkça bildirir. Simge, çok küçük boyutlarda okunacak kadar basit ve kare kalmalıdır.

Doğrudan yanıt

Belge head’ine rel="icon" ve simge dosyanıza işaret eden bir href ile bir link ekleyin. Yaygın seçimler favicon.ico, images/favicon.png gibi bir PNG veya bir SVG simgedir. Yol, diğer göreli URL’lerle aynı şekilde çözülmelidir (bkz. File Paths). Dosyayı değiştirdikten sonra tarayıcı önbelleğini bekleyin — sert yenileme veya gizli pencere çoğu zaman yeni simgeyi normal yeniden yüklemeden daha hızlı gösterir.

Klasik .ico bağlantısı

Birçok eğitim hâlâ HTML dosyasıyla aynı klasördeki favicon.ico ile başlar. İsteğe bağlı type özniteliği tarayıcıların kaynağı anlamasına yardımcı olabilir.

Klasik örneği okumak

• link, title ve diğer meta verinin yanında head içinde yaşar
• rel="icon" kaynağı bir favicon olarak işaretler
• href="favicon.ico" simge dosyasının bu HTML sayfasının yanında olduğunu varsayar
• type="image/x-icon" .ico dosyaları için yaygın bir MIME ipucudur
• Doğru yol olmadan sekme varsayılan veya boş bir simge tutabilir

PNG ve SVG varyantları

PNG favicon’ları tasarım araçlarından kolayca dışa aktarılır. SVG favicon’ları tarayıcı desteklediğinde farklı ölçeklerde keskin kalır. Simgeyi bir images klasöründe tutup href’i oraya yönlendirebilirsiniz.

Başlangıç formatı seçmek

• .ico — geleneksel, eski araçlar tarafından genişçe tanınır
• .png — zaten PNG varlıkları dışa aktaran yeni başlayanlar için basit
• .svg — kitlenizin tarayıcıları desteklediğinde net vektör seçeneği
  İlk gün her formata ihtiyacınız yoktur. Doğru bağlantılı net bir simge yayınlayın; proje gerektirirse daha sonra apple-touch veya çok boyutlu paketler için genişletin.

Yollar işaretleme kadar önemlidir

href eksik bir dosyaya işaret ederse favicon isteği 404 döner ve sekme simgesi sessizce başarısız olur. Klasör adlarını, yazımı ve HTML dosyasının simge olmadan taşınıp taşınmadığını kontrol edin. Göreli yollar, dosyanın “nerede olması gerektiğine” dair hissinize değil, HTML belge URL’sine göredir.

Önbellek güncellemeleri gizleyebilir

Tarayıcılar favicon’ları sık sık agresifçe önbelleğe alır. favicon.png’yi değiştirir, yenilersiniz ve hâlâ dünkü işareti görürsünüz. Bu her zaman HTML’in yanlış olduğu anlamına gelmez. Sert yenileme, gizli/incognito pencere deneyin veya dosyayı geçici yeniden adlandırıp href’i güncelleyin ki tarayıcı taze bir URL alsın. Bu alışkanlığı erken öğretin ki öğrenenler panikle çalışan işaretlemeyi silmesin.

Simgeleri küçük ve net tutun

Sekmeye sıkıştırılmış kocaman bir fotoğraf okunaksız bir bulanıklığa dönüşür. Basit bir işaret, yüksek kontrast ve kare bir tuval tercih edin. Favicon bir tanıma yardımcısıdır, ikinci bir hero görsel değildir. Ayrıntılı markayı sayfa gövdesine saklayın.

Bağlantı nereye aittir

Favicon link öğelerini head içine koyun. Bunları body içine koymak belge düzeyi simgeler için yanlış yerdir. head’in meta veri ve kaynak bağlantıları için olduğunu zaten biliyorsunuz; favicon’lar aynı kuralı izler.

Editörünüzde pratik

1. Küçük kare bir simgeyi HTML dosyanızın yanına veya bir images klasörünün içine koyun.
2. Eşleşen bir yolla head içine <link rel="icon" href="..."> ekleyin.
3. Sayfayı açın ve başlık metninin yanındaki tarayıcı sekmesine bakın.
4. Yolu bilerek bozun, yenileyin ve simgenin kaybolduğunu veya eski haline döndüğünü fark edin — sonra düzeltin.
5. Simge dosyasını değiştirin ve eskisi yapışırsa yeni sanatı doğrulamak için gizli pencere açın veya sert yenileyin.

Kolay hatalar

• Favicon link’ini head yerine body içine koymak
• Yanlış href ile sayfa HTML’i hâlâ iyi görünürken simgenin 404 vermesi
• Eski bir favicon önbellekteyken anında görsel güncelleme beklemek
• Küçük, basit kare bir işaret yerine kocaman bir fotoğraf kullanmak
• Yalnızca HTML’i dağıtırken simge dosyasını yüklemeyi unutmak
• rel="stylesheet" ile rel="icon"’u karıştırıp CSS veya sekme simgesinin neden bozulduğunu merak etmek

Özet

• Favicon’lar head içinde rel="icon" ile bağlanır
• href’i gerçek bir .ico, .png veya .svg dosyasına yönlendirin
• Doğru yollar ve sakin önbellek kontrolleri çoğu “eksik simge” raporunu çözer
• Simgeleri sekme boyutunda küçük ve tanınır tutun
• Çalışan bir bağlantı, kullanılmayan simge formatları yığınından iyidir