Yakuza

Yakuza

WFN Üye
Konular
544
Mesajlar
544
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Artvin
Web Sitesi
Var
Alanı
SEO Danışmanı
1/1
Konu sahibi
Favicon, tarayıcı sekmesinde ve yer imlerinde görünen küçük site simgesidir. Eklemek için simge dosyanızı web sitenizin erişilebilen bir konumuna yükleyip HTML belgesinin <head> bölümüne <link rel="icon" href="/favicon.ico"> satırını ekleyin. Dosya yolu doğruysa sayfayı kaydettiğinizde tarayıcı simgeyi kullanır; görünmüyorsa önce yolu, dosya adını ve tarayıcı önbelleğini kontrol edin.

Favicon dosyasını hazırlama ve yerleştirme​


Favicon olarak genellikle kare biçimli bir PNG, ICO veya SVG dosyası kullanılır. Örneğin favicon.png dosyanızı sitenizin kök dizinine, yani ana HTML dosyanızın bulunduğu veya sunucunun web kökü olarak tanımladığı konuma yükleyebilirsiniz.

Örnek dosya yapısı şöyle olabilir:

Kod: 
proje/
├── index.html
└── favicon.png

Bu yapıda simge dosyasının yolu favicon.png olur. Dosyayı images klasörüne koyarsanız yol da images/favicon.png şeklinde değişir. Başında / bulunan /favicon.png yolu ise alan adının kökünden başlar; örneğin https://site.example/favicon.png dosyasını ifade eder.

HTML belgesine favicon bağlantısını ekleme​


<link> satırını <head> ile </head> etiketleri arasına yerleştirin. PNG dosyası için en küçük çalışan örnek şöyledir:

HTML: 
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Örnek sayfa</title>
    <link rel="icon" href="favicon.png" type="image/png">
</head>
<body>
    <h1>Merhaba</h1>
</body>
</html>

Burada rel="icon", dosyanın sayfa simgesi olarak kullanılacağını belirtir. href="favicon.png" tarayıcıya dosyanın konumunu bildirir. type="image/png" ise dosya biçimini açıklar. Modern tarayıcılar çoğu durumda type bilgisi olmadan da dosyayı tanıyabilir; yine de doğru MIME türünü belirtmek, kodun amacını daha açık hâle getirir.

Dosyanız ICO biçimindeyse şu kullanımı tercih edebilirsiniz:

HTML: 
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Dosya index.html ile aynı klasörde değilse, href değerini gerçek konuma göre değiştirin. Örneğin dosya assets/icons/favicon.png konumundaysa kod şu şekilde olmalıdır:

HTML: 
<link rel="icon" href="assets/icons/favicon.png" type="image/png">

Hangi dosya yolu kullanılmalı?​


Dosyanın HTML belgesine göre konumunu bilerek yol seçin. Aşağıdaki ayrım, favicon’un yüklenmemesindeki en yaygın nedeni bulmanıza yardımcı olur.


Dosyanın konumu | Kullanılacak href değeri | Açıklama

index.html ile aynı klasör | | Göreli yol kullanılır.

assets klasörünün içinde | assets/favicon.png | HTML dosyasının bulunduğu konumdan ilerlenir.

Alan adının kök dizininde | /favicon.png | Yol, geçerli sayfanın klasöründen değil alan adının kökünden başlar.

Bir üst klasörde |../favicon.png | HTML dosyasının bulunduğu klasörden bir üst konuma çıkılır.


Örneğin HTML dosyanız blog/index.html, simge dosyanız ise blog/assets/favicon.png konumundaysa href="assets/favicon.png" yazmalısınız. Simge dosyası blog klasörünün dışındaki kök dizindeyse href="../favicon.png" gerekir.

Değişik favicon biçimleri kullanma​


Tek bir PNG dosyası çoğu site için yeterlidir. Farklı ekran ve kullanım alanlarını desteklemek isterseniz birden fazla simge bağlantısı tanımlayabilirsiniz:

HTML: 
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

rel="icon" tarayıcı sekmesi ve benzeri tarayıcı arayüzleri için kullanılır. rel="apple-touch-icon" ise Apple cihazlarda ana ekrana eklenen site kısayolu için kullanılan ayrı bir simgeyi belirtir. Bu satırın eklenmesi, sitenin mobil uygulama gibi çalışacağı veya ana ekrana ekleme özelliğinin her cihazda aynı şekilde görüneceği anlamına gelmez.

SVG kullanmak isterseniz bağlantıyı şu şekilde yazabilirsiniz:

HTML: 
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

SVG dosyasının içeriği gerçekten geçerli bir SVG olmalı ve sunucu bu dosyayı istemciye erişilebilir biçimde göndermelidir. Eski veya kısıtlı tarayıcılarla uyumluluk önemliyse PNG ya da ICO dosyasını da ek seçenek olarak bulundurabilirsiniz.

Favicon’un çalıştığını kontrol etme​


Kodunuzu kaydedip sayfayı sunucuda açtıktan sonra tarayıcı sekmesindeki simgeye bakın. Simge görünüyorsa HTML bağlantısı ve dosyanın erişimi büyük olasılıkla doğrudur. Ancak simgenin görünmesi dosyanın her sayfada doğru yoldan çağrıldığı anlamına gelmez; farklı klasörlerdeki sayfalar göreli yolları farklı yorumlayabilir.

Simge görünmüyorsa tarayıcının geliştirici araçlarında ağ isteklerini açıp favicon dosyasına yapılan isteği inceleyin. İstek başarılıysa dosya sunucuya ulaşmış demektir; buna rağmen eski simge görünüyorsa tarayıcı önbelleği etkili olabilir. Sayfayı zorla yenileyin, gizli pencerede açın veya dosyanın adını değiştirerek bağlantıyı geçici olarak şu şekilde güncelleyin:

HTML: 
<link rel="icon" href="/favicon.png?v=2" type="image/png">

Buradaki ?v=2 bölümü dosyanın kendisini değiştirmez; tarayıcının yeni bir kaynak adresi görmesini sağlar. Sorun dosya yolundaysa bu yöntem çözüm getirmez. Geliştirici araçlarında dosya isteği 404 veya benzeri bir bulunamadı yanıtı veriyorsa önce href değerini, dosya adındaki büyük-küçük harfleri ve dosyanın gerçekten yüklenip yüklenmediğini düzeltin.

Dosya açılıyor fakat simge yine kullanılmıyorsa dosyanın geçerli bir PNG, ICO veya SVG olup olmadığını kontrol edin. HTML’de type="image/png" yazıp gerçekte ICO dosyası kullanmak gibi uyuşmazlıkları giderin. Sunucu dosyayı yanlış içerik türüyle gönderiyorsa sunucu yapılandırmasındaki MIME türü de incelenmelidir; bu durum yalnız HTML satırını değiştirmekle çözülmeyebilir.

Sık sorulan sorular​

Favicon dosyasını mutlaka adıyla mı kaydetmeliyim?​

Hayır. favicon.png veya favicon.svg gibi başka bir ad kullanabilirsiniz. Önemli olan, href değerinin gerçek dosya yolunu göstermesidir. favicon.ico adını kullanmak yalnızca yaygın bir tercih ve bazı eski yapılandırmalarla uyumluluk açısından pratik bir seçenektir.

Favicon’u body bölümüne ekleyebilir miyim?​

Favicon bağlantısını <head> bölümüne ekleyin. Tarayıcılar bazı hatalı yerleşimleri yine de yorumlayabilse de standart ve güvenilir kullanım, <link rel="icon"> öğesini belgenin başlık bilgileri içinde tutmaktır.

Kod doğru olduğu hâlde eski favicon görünüyorsa ne yapmalıyım?​

Önce dosya isteğinin başarılı olduğunu doğrulayın. İstek başarılıysa tarayıcı önbelleğini temizleyerek veya gizli pencerede açarak kontrol edin. Gerekirse href değerine ?v=2 gibi yeni bir sürüm sorgusu ekleyin. İstek bulunamayan dosya yanıtı veriyorsa önbellekle uğraşmadan dosya yolunu ve sunucudaki dosya konumunu düzeltin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)