Çalıştırılabilir HTML Dokümanları: Favicon ekleme

Q: HTML'de favicon nasıl eklenir?

İkon dosyasını sitene koy ve içine (ya da bir PNG veya SVG yolu) ekle. Tarayıcılar bu durumda onu sekmede, yer imlerinde ve geçmiş listesinde gösterir.

Q: Bir favicon hangi boyutta olmalı?

Sekmeler için 32×32 bir favicon.ico (ya da PNG), her boyuta ölçeklenen bir SVG ve iPhone ana ekranları için 180×180 PNG bir apple-touch-icon hazırla. Manifest'i olan web uygulamaları ayrıca 192×192 ve 512×512 PNG'ler listeler.

Q: Favicon'um neden görünmüyor?

Olağan nedenler href içindeki yanlış bir yol, dışında duran ya da tarayıcının hâlâ önbellekteki eski bir ikonu göstermesidir. Yolu kontrol etmek için ikon URL'sini doğrudan aç, sonra önbelleği temizleyerek yeniden yükle ya da URL'ye ?v=2 gibi bir sürüm ekle.

Q: Favicon olarak SVG ya da PNG kullanabilir miyim?

Evet. ya da kullan. SVG Chrome, Edge ve Firefox'ta çalışır; onu desteklemeyen tarayıcılar için bir ICO ya da PNG de tut.

Q: rel="shortcut icon" gerekli mi?

Hayır. rel="icon" standart değerdir. shortcut kelimesi eski Internet Explorer'dan kalmadır ve güncel tarayıcılarda hiçbir şey yapmaz.

Q: Favicon olarak emoji kullanabilir miyim?

Evet, onu bir SVG ile sararak: emojiyi içeren bir elementi bulunan bir SVG data URI. Prototipler için kullanışlıdır, ama emoji her işletim sisteminde farklı görünür.

Favicon nasıl eklenir

İkonunu sitene kaydet ve <head> içindeki bir <link rel="icon"> etiketinden onu göster:

<link rel="icon" href="/favicon.ico">

Basit bir site için cevabın tamamı bu. href bir .ico, .png ya da .svg dosyasını gösterebilir. Aşağıdaki örnek, href içine doğrudan data URI olarak yazılmış bir SVG kullanır, bu yüzden ayrı bir dosyaya ihtiyaç duymaz. Başka bir sayfanın içindeki bir önizleme tarayıcı sekmeni değiştiremez, bu yüzden script aynı ikonu sahte bir sekmede ve üç boyutta çizer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bake Club</title>
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='23' font-size='20' font-family='Arial' font-weight='700' fill='white' text-anchor='middle'%3EB%3C/text%3E%3C/svg%3E">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    .sizes { display: flex; align-items: end; gap: 16px; margin-top: 16px; font-size: 12px; color: #6b7280; }
    .sizes div { text-align: center; }
  </style>
</head>
<body>
  <div class="bar"><div class="tab"><img id="tab-icon" width="16" height="16" alt=""><span id="tab-title"></span></div></div>
  <div class="sizes" id="sizes"></div>
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('tab-icon').src = href;
    document.getElementById('tab-title').textContent = document.title;
    for (const size of [16, 32, 64]) {
      const box = document.createElement('div');
      box.innerHTML = '<img width="' + size + '" height="' + size + '" alt=""><br>' + size + 'px';
      box.querySelector('img').src = href;
      document.getElementById('sizes').append(box);
    }
  </script>
</body>
</html>

16 pikselde tek bir kalın harf ya da basit bir şekil için yer vardır ve ince ayrıntılar kaybolur. İkonu önce en küçük boyut için tasarla. fill='%232563eb' değerini başka bir renge çevir (%23, URL kodlanmış # işaretidir), her kopya güncellenir.

Hangi dosyalar gerekli

Tarayıcılar, telefonlar ve uygulama başlatıcılar farklı ikonlar arar. Küçük bir set hepsini karşılar:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Dosya	Boyut	Kullanıldığı yer
`favicon.ico`	32×32	Tarayıcı sekmeleri ve yalnızca `/favicon.ico` arayan araçlar
`icon.svg`	Her boyut (vektör)	Chrome, Edge ve Firefox'ta her ekran yoğunluğunda keskin sekmeler
`apple-touch-icon.png`	180×180	Biri siteni iPhone ya da iPad ana ekranına eklediğinde görünen ikon
Manifest ikonları	192×192 ve 512×512 PNG	Android ana ekranı ve yüklenmiş web uygulamaları

Çoğu tarayıcı, bir sayfada ikon linki olmadığında sitenin kökünden kendiliğinden /favicon.ico da ister, bu yüzden oraya bir favicon.ico koymak kullanışlı bir varsayılandır. sizes özelliği tarayıcıya her dosyanın hangi boyutta olduğunu söyler, böylece en uygun olanı seçebilir. rel="icon" kullan; eski rel="shortcut icon" yalnızca tarayıcılar fazladan kelimeyi yok saydığı için çalışır.

Emoji favicon

Bir prototip ya da kişisel bir sayfa için emoji hızlı bir favicon olur. Onu bir SVG <text> elementinin içine koy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Emoji favicon</title>
  <link rel="icon"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8D%AA%3C/text%3E%3C/svg%3E">
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>The icon at tab size and larger:</p>
  <img id="a" width="16" height="16" alt="">
  <img id="b" width="48" height="48" alt="">
  <script>
    const href = document.querySelector('link[rel="icon"]').href;
    document.getElementById('a').src = href;
    document.getElementById('b').src = href;
  </script>
</body>
</html>

%F0%9F%8D%AA, URL kodlanmış kurabiye emojisidir. Emoji işletim sisteminin emoji yazı tipiyle çizilir, bu yüzden Windows, macOS ve Android'de farklı görünür; gerçek bir ürün için tasarlanmış bir ikon daha iyi bir seçimdir.

Karanlık modu izleyen bir ikon

Bir SVG favicon, prefers-color-scheme media query'si dahil kendi CSS'ini taşıyabilir, böylece tarayıcı koyu tema kullandığında koyu bir ikon açık renge dönebilir:

<!-- icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    circle { fill: #111827; }
    @media (prefers-color-scheme: dark) { circle { fill: #f9fafb; } }
  </style>
  <circle cx="16" cy="16" r="14"/>
</svg>

Favicon'u JavaScript ile değiştirmek

Siteler bir bildirim noktası ya da durum rengi için değişen bir favicon kullanır. Yeni ikonu bir <canvas> üzerine çiz ve linkin href değerini canvas resmine ayarla:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dynamic favicon</title>
  <link rel="icon" id="icon" href="data:,">
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 6px 12px; margin-inline-end: 6px; }
    img { vertical-align: middle; margin-inline-start: 8px; }
  </style>
</head>
<body>
  <button id="on">New message</button>
  <button id="off">Clear</button>
  Current icon: <img id="preview" width="32" height="32" alt="">
  <script>
    function draw(withDot) {
      const canvas = document.createElement('canvas');
      canvas.width = canvas.height = 32;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = '#2563eb';
      ctx.fillRect(2, 2, 28, 28);
      if (withDot) {
        ctx.fillStyle = '#dc2626';
        ctx.beginPath();
        ctx.arc(24, 8, 7, 0, Math.PI * 2);
        ctx.fill();
      }
      const url = canvas.toDataURL('image/png');
      document.getElementById('icon').href = url;
      document.getElementById('preview').src = url;
    }
    document.getElementById('on').onclick = () => draw(true);
    document.getElementById('off').onclick = () => draw(false);
    draw(false);
  </script>
</body>
</html>

Chrome ya da Firefox'taki gerçek bir sayfada, href her ayarlandığında sekme ikonu değişir; tam buradaki önizleme resminin değiştiği anda.

Sık yapılan hatalar

Yanlış bir yol. href="favicon.ico" geçerli sayfaya göredir, bu yüzden /blog/post sayfasında bozulur. Kök yolu kullan: href="/favicon.ico".
Bir güncellemenin hemen görünmesini beklemek. Tarayıcılar favicon'ları sıkı şekilde önbelleğe alır. İkonu değiştirdiğinde önbelleği temizleyerek yeniden yükle ya da URL'yi değiştir (/favicon.ico?v=2).
16 piksele küçültülmüş ayrıntılı bir logo. Onu sadeleştir: güçlü kontrastlı tek bir harf ya da tek bir şekil.
Yalnızca bir SVG. SVG favicon desteği olmayan tarayıcılar için bir ICO ya da PNG de tut ve iOS için apple-touch-icon ekle.
Linki <body> içine koymak. Onu title etiketi ve diğer meta verilerle birlikte <head> içinde tut.

Sıkça Sorulan Sorular

HTML'de favicon nasıl eklenir?

İkon dosyasını sitene koy ve <head> içine <link rel="icon" href="/favicon.ico"> (ya da bir PNG veya SVG yolu) ekle. Tarayıcılar bu durumda onu sekmede, yer imlerinde ve geçmiş listesinde gösterir.

Bir favicon hangi boyutta olmalı?

Sekmeler için 32×32 bir favicon.ico (ya da PNG), her boyuta ölçeklenen bir SVG ve iPhone ana ekranları için 180×180 PNG bir apple-touch-icon hazırla. Manifest'i olan web uygulamaları ayrıca 192×192 ve 512×512 PNG'ler listeler.

Favicon'um neden görünmüyor?

Olağan nedenler href içindeki yanlış bir yol, <head> dışında duran <link> ya da tarayıcının hâlâ önbellekteki eski bir ikonu göstermesidir. Yolu kontrol etmek için ikon URL'sini doğrudan aç, sonra önbelleği temizleyerek yeniden yükle ya da URL'ye ?v=2 gibi bir sürüm ekle.

Favicon olarak SVG ya da PNG kullanabilir miyim?

Evet. <link rel="icon" href="/icon.svg" type="image/svg+xml"> ya da <link rel="icon" href="/icon.png" type="image/png"> kullan. SVG Chrome, Edge ve Firefox'ta çalışır; onu desteklemeyen tarayıcılar için bir ICO ya da PNG de tut.

rel="shortcut icon" gerekli mi?

Hayır. rel="icon" standart değerdir. shortcut kelimesi eski Internet Explorer'dan kalmadır ve güncel tarayıcılarda hiçbir şey yapmaz.

Favicon olarak emoji kullanabilir miyim?

Evet, onu bir SVG ile sararak: emojiyi içeren bir <text> elementi bulunan bir SVG data URI. Prototipler için kullanışlıdır, ama emoji her işletim sisteminde farklı görünür.

İlgili kavramlar