HTML'e Favicon Nasıl Eklenir?
Üç etiket çoğu siteyi kapsar; beş etiket size PWA dereceli bir kurulum sağlar. Bu eğitimde her bir özellik açıklanır, ortak yığınlar için kopyala-yapıştır parçacıkları gösterilir, SSS yanıtları verilir ve simgelerin takılıp kalmasına neden olan önbellekleme sorunları giderilir.
Asgari etiket
Geçerli en küçük bildirim <head>'te tek bir satırdır:
<link rel="icon" href="/favicon.ico">
Tarayıcılar rel='icon'u, sekmede görüntülenmek üzere bu URL'yi getirmek için bir ipucu olarak görür. / ile başlayan köke bağlı yollar, geçerli sayfa yolundan bağımsız olarak varlığını sürdürür.
Bu etiketle bile birçok istemci /favicon.ico'i otomatik olarak araştırmaya devam ediyor. Örtük istekler için dosyayı site kökünde tutun. Simge kümenizi oluşturmak ve doğrulamak için favicon oluşturucumuzu, PNG - ICO dönüştürücü, SVG - ICO dönüştürücü ve canlı favicon test cihazımızı kullanın ve [tamamlayıcıyı okuyun] özet bir açıklama için kılavuz](kılavuz:how-to-add-favicon-html).
Modern önerilen set
Masaüstü, iOS ve karanlık mod sekmelerinde net görüntü oluşturmak için şunu kullanın:
<link rel = "icon" href = "/favicon.ico" size = "herhangi biri">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Düzen, bütünlükten daha az önemlidir. Tarayıcılar desteklenen en iyi türü seçer: Varsa SVG, aksi takdirde eşleşen bir PNG veya ICO çerçevesi.
MIME koklamanın dosyayı asla yanlış etiketlememesi için SVG satırına type="image/svg+xml" ekleyin.
PWA yükleme istemleri
Bildirinizi bağlayın: <link rel="manifest" href="/site.webmanifest">.
site.webmanifest'in içinde simgeleri kaynak, boyut, tür ve amaç ile birlikte bildirin. Minimum yararlı girişler 192×192 ve 512×512 PNG dosyalarıdır.
İsteğe bağlı tema cilası: <meta name="theme-color" content="#0f172a">, yükleme akışları sırasında Android durum çubuğunu markanızla hizalar.
Kopyala-yapıştır örnekleri
Düz HTML sitesi — <head>'in içine yapıştırın:
<link rel = "icon" href = "/favicon.ico" size = "herhangi biri">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Next.js Uygulama Yönlendiricisi — aynı satırları meta veriler veya manuel <head> bloğu içindeki app/layout.tsx'e ekleyin. Dosyalar /public konumunda bulunur.
Create React App — simgeleri /public içine yerleştirin ve public/index.html'yi düzenleyin. CRA, üretim yapılarında etki alanı kökünde /public olarak hizmet verir.
Her özelliği anlama
rel="icon" bir favicon adayını işaret eder. rel='apple-touch-icon', iOS'e özel ana ekran simgesidir. rel = "manifest", PWA meta verileriyle JSON'u işaret eder.
boyutlar tarayıcıya PNG'in hangi çözünürlüğü temsil ettiğini belirtir. Birden fazla boyutu açıkça bildirdiğinizde PNG simgeleri için gereklidir.
href'in üretimde erişilebilir olması gerekir. favicon'ler için üçüncü taraf CDN'lere hızlı bağlantı vermekten kaçının; yeniden markalama sırasında tam kontrol istiyorsunuz.
Sık sorulan sorular
Href'te mutlak URL'leri kullanabilir miyim? Evet, ancak köke bağlı /favicon.ico, hazırlama ve üretim alanlarında daha basittir.
Hem rel="shortcut icon" hem de rel="icon"'a ihtiyacım var mı? Hayır. rel='icon' standarttır; kısayol geçerliliğini yitirdi.
<head> tam olarak nerede? <html> öğesinin doğrudan alt öğesi, <body> öğesinden önce. Bazı çerçeveler bunu düzen bileşenleri aracılığıyla enjekte eder.
favicon'ler bir CDN'de mi yaşamalı? Bunu yapabilirler, ancak taşıma sırasında tüm <link> URL'lerini birlikte güncelleyebilirler. Kök-göreli yollar bu sorunu önler.
Sorun giderme
Simge ana sayfada çalışıyor ancak /blog/slug çalışmıyor: başında eğik çizgi olmadan favicon.ico gibi göreceli bir href kullandınız. Bunun yerine /favicon.ico'i kullanın.
Safari eski simgeyi gösterir: web sitesi verilerini temizleyin veya dosyayı bir kez yeniden adlandırın. Safari, HTML'ten daha uzun olan favicon'leri önbelleğe alır.
Geçerli HTML ancak Ağ sekmesinde 404: dosya sunucu köküne dağıtılmadı veya yanlış durum (Linux'ta Favicon.ico ve favicon.ico).
SVG göz ardı edildi: eksik type="image/svg+xml" veya sunucu yanlış İçerik Türü gönderiyor. Nginx veya Apache'de MIME eşlemesini düzeltin.
Çerçeveye özgü yerleşim
Vite / Vue / React SPA: simgeleri /public içine yerleştirin ve index.html'de /favicon.ico'e referans verin. Geliştirme sunucusu ve üretim yapısı, etki alanı kökünde /public olarak hizmet verir.
Next.js Uygulama Yönlendiricisi: meta veri API'si aracılığıyla /app'e simgeler ekleyin veya statik dosyaları /public'e yerleştirin. Etiketleri her iki yerde de kopyalamaktan kaçının.
Nuxt: rotalar arasında merkezi etiket yönetimi için /public kullanın veya nuxt.config.ts dosyasındaki app.head.link'i yapılandırın.
SvelteKit: statik/klasördeki statik varlıklar / ile eşlenir. Uygulamanın tamamı için app.html <head> dosyasını bir kez güncelleyin.
Astro: public/ dizin artı mizanpajınızdaki paylaşılan Head bileşeni, her sayfanın kopyala-yapıştır kayması olmadan aynı simge etiketlerini içermesini sağlar.
WordPress ve diğer CMS kullanıcılarının manuel etiketlere hiç ihtiyacı olmayabilir; çekirdek sizin için Site Icon işaretlemesi oluşturuyorsa WordPress eğitimimize bakın.
HTML kurulumunuz doğrulanıyor
Dağıtılan HTML'in deponuzla eşleştiğini doğrulamak için üretimdeki sayfa kaynağını localhost'ta değil görüntüleyin. CI işlem hatları bazen ortam başına farklı düzenler enjekte eder.
<link href>'te döndürülen her simge URL'sini getirmek için curl'u kullanın. Doğru İçerik Uzunluğuna sahip 200 durumu, yolun yalnızca bildirilmiş değil, gerçek olduğu anlamına gelir.
W3C işaretleme doğrulaması favicon'ler için isteğe bağlıdır, ancak geçersiz <head> iç içe yerleştirme (<body> içindeki etiketler) tarayıcıların simgelerinizi tamamen yok saymasına neden olabilir.
Yüklemelerin önemli olması durumunda Lighthouse PWA denetimini çalıştırın; sekmeler iyi görünse bile eksik bildirim simgelerini işaretler.
Sayfaya yer işareti koyun, tarayıcıyı tamamen kapatın, yeniden açın ve yer işareti çubuğunun hâlâ işaretinizi gösterdiğini doğrulayın. Bu, kalıcı favicon önbellek davranışını test eder.
Güvenlik başlıkları ve simge yolları
Content-Security-Policy default-src, aynı kaynaktan gelen favicon yüklemelerini engellemez. Çapraz kaynak simge URL'leri açık img-src veya default-src izinlerine ihtiyaç duyar.
Alt Kaynak Bütünlüğü favicon'lere nadiren uygulanır. Aynı kökenli barındırma, en basit güvenli varsayılan olmaya devam ediyor.
Simgeler bir CDN alt etki alanında bulunuyorsa href'te mutlak https:// URL'leri kullanın ve CORS'un alakasız olduğundan emin olun; favicon'ler getirme değil resim olarak yüklenir.
Verilerden kaçının: HTML üretimindeki URI favicon'ler. HTML önbelleğini şişiriyorlar, CDN önbelleğe almayı atlıyorlar ve CSP'yi karmaşık hale getiriyorlar.
Etiket sırası ve kopyalar
Aynı href atık baytlarına sahip rel=icon etiketlerini çoğaltın ancak oluşturmayı nadiren bozun. Yinelenen çakışan href'ler hata ayıklamayı karıştırır; eski etiketleri kaldırın.
Bazı WordPress temaları Site Icon etiketleri yazdırırken eklentiler başka bir set ekler. Eklenti yüklendikten sonra kopyaları tespit etmek için Kaynağı Görüntüle'yi kullanın.
Simge bağlantılarını kafadaki büyük komut dosyası bloklarının önüne yerleştirin. Erken keşif, simgeler düşük öncelikli indirmeler olsa bile ilk boyamaya yardımcı olur.
HTML5, geçersiz öğelerde eğik çizgilerin kapatılmasını gerektirmez. Hem <link ...> hem de <link ... /> doğrulanır.
Eski ve uç vakalar
IE koşullu yorumlar öldü. Eski tarayıcıların simge etiketlerini kaydırmayın.
Kafadaki temel etiket göreceli href çözünürlüğünü değiştirir. / ile başlayan simge yolları bağışıktır; Baz ayarlandığında göreceli favicon.ico iç içe rotalarda kesilir.
Gölge DOM ve web bileşenleri, favicon sayfasını gölge köklere devralmaz; belge düzeyindeki simge sekme için hâlâ geçerlidir.
iframe yerleştirmeleri üst belgeyi değil, gömülü favicon belgesini gösterir. Her ikisini de kontrol ediyorsanız her karenin kendi etiketlerine ihtiyacı vardır.
Yerel file:// testi /favicon.ico'i çözemeyebilir. Gerçekçi simge davranışı için yerel bir geliştirici sunucusu kullanın.
Yer imleri ve tarayıcı uzantıları, favicon sitenizi diğer kullanıcılar için değiştiremez; yalnızca yerel kromunuzu değiştirebilir. Sunucu tarafında doğru etiketleri gönderin.