Next.js için site simgesi
Next.js 14+ App Router, dosya tabanlı simge kurallarını tanıttı: favicon.ico veya icon.png'yi /app dizinine bırakın; Next.js, doğru `<link>` etiketlerini otomatik olarak yayar; manuel Head bileşenine gerek yoktur. Pages Router projeleri için favicon.ico'i /public'e yerleştirin ve _document.tsx'ten bağlayın. favicon generator, tek bir kaynak görüntüden dosya setinin tamamını üretir ve best favicon size guide, her bağlam için hangi boyutların önemli olduğunu kapsar.
Next.js 13+ ve App Router, /app dizinindeki özel dosya adlarını meta veri kuralları olarak ele alır. favicon.ico, icon.png, icon.svg ve apple-icon.png adlı dosyalar, Next.js meta veri sistemi tarafından otomatik olarak tanınır ve düzen.tsx'te veya meta veri dışa aktarımlarında herhangi bir yapılandırmaya gerek kalmadan doğru yanıt başlıkları ve `<link>` etiketleriyle sunulur.
Dosya kuralını kullanmak için favicon.ico dosyanızı /app dizinine (/public değil) yerleştirin. Next.js bunu /favicon.ico yolunda sunar ve bağlantı etiketini bu düzeni paylaşan her sayfaya enjekte eder. Simge dosyasının genel olarak uygulanabilmesi için kök düzeniniz.tsx dosyasıyla aynı seviyede olması gerekir.
App Router kullanan yüksek DPI simgeler için, /app'in içine bir icon.png yerleştirin. Next.js, boyutlarını okur ve uygun "<link rel='icon' sizes='...' href='...'>" etiketini oluşturur. Birden fazla boyut sunmak için, farklı sayısal son eklere sahip birden fazla simge dosyasını dışa aktarın: icon.png (32×32), icon@2x.png (64×64) veya sonsuz ölçeklenebilir tek bir dosya için icon.svg kullanın.
App Router ayrıca iOS ana ekran simgesi için özel bir apple-icon.png dosyasını da destekler. apple-icon.png'yi (180×180) /app'in içine yerleştirin; Next.js otomatik olarak `<link rel='apple-touch-icon' href='...'>` yayınlar. Bu en temiz yaklaşımdır; manuel meta veri aktarımı gerekmez.
Sık kullanılan simgeleri dosya kuralları yerine kodla bildirmeyi tercih ederseniz, bir meta veri nesnesini Layout.tsx dosyasından dışa aktarın. Icons özelliği kısayol, simge, elma ve diğer alanlara sahip bir nesneyi kabul eder. Örnek: `const meta verilerini dışa aktar: Meta veriler = { simgeler: { icon: '/favicon.ico', apple: '/apple-touch-icon.png' } }`. Bu yöntem, yerel ayara veya ortama bağlı olarak dinamik simge yollarına ihtiyaç duyduğunuzda kullanışlıdır.
Pages Router projeleri (Next.js 12 ve altı ya da App Router'e taşınmamış projeler) için favicon işleme farklı şekilde çalışır. favicon.ico'i /public dizinine yerleştirin — Next.js, kök URL'de /public'e hizmet eder. Bağlantı etiketini, `<Head>` bileşeninin içindeki sayfalar/_document.tsx'e ekleyin: `<link rel='icon' href='/favicon.ico' />`. Bu `<Head>`, sayfa başına sonraki/başlık içe aktarımı değil, belge düzeyindeki başlıktır.
next/head bileşeni ('next/head'den Head'i içe aktar), Pages Router'teki sayfa başına simge geçersiz kılmaları için çalışır. Belirli bir sayfada farklı bir site simgesi istiyorsanız o sayfa bileşenindeki `<Head>`'in içine bir "<link rel='icon'>" ekleyin. Sayfa başına etiketi, belge düzeyindeki etiketi geçersiz kılar. Bu, tek bir Next.js dağıtımından sunulan çok markalı siteler için kullanışlıdır.
SVG site simgeleri, Next.js App Router kuralları tarafından tamamen desteklenir. Dosyayı icon.svg olarak adlandırın ve /app içine yerleştirin. Next.js, '<link rel='icon' type='image/svg+xml' href='/_next/static/media/icon.svg...'>' yayar. Next.js, önbellek bozma için statik dosya adlarını karma hale getirdiğinden, favicon önbelleğinin geçersiz kılınması konusunda endişelenmenize gerek yoktur; dosyayı değiştirmek karma değerini değiştirir ve tarayıcıları yeniden getirmeye zorlar.
Next.js App Router'deki web manifesti, /app'deki manifest.ts dosyası aracılığıyla yapılandırılır. Simge boyutlarınızı içeren bir MetadataRoute.Manifest nesnesi döndüren varsayılan bir işlevi dışa aktarın. Next.js bunu /manifest.webmanifest'te application/manifest+json olarak işler. Manifest'te atıfta bulunulan 192×192 ve 512×512 PNG'ler /public'e yerleştirilmelidir.
Turbopack (Next.js 14+ sürümündeki deneysel paketleyici), /public'teki statik varlıkları webpack ile aynı şekilde işler. /public'teki favicon dosyaları paketlenmeden sunulur. /app'teki (simge kuralı) dosyalar için, Turbopack bunları meta veri varlıkları olarak işler; Turbopack ile webpack arasında geçiş yaparken herhangi bir yapılandırma değişikliği gerekmez.
Next.js ISR (Artımlı Statik Yenileme) ve uç dağıtımları favicon sunumunu etkilemez. Favicon dosyaları, ISR önbelleğinden değil, CDN kenarından sunulan statik varlıklardır. Bu, favicon güncellemelerinin dağıtımdan sonra sayfanın yeniden doğrulanmasını beklemeden hemen yayıldığı anlamına gelir.
Çok yerel ayarlı Next.js uygulamaları genellikle yerel ayarlara duyarlı simgelere ihtiyaç duyar. Params nesnesine dayalı olarak yerel ayara özgü simge yollarını döndürmek için Layout.tsx'teki createdMetadata işlevini kullanın. Bu, yalnızca App Router'e özgü bir özelliktir; Pages Router sitelerinin, yerel favicon'lara ulaşmak için özel _document.tsx mantığına veya özel bir sunucuya ihtiyacı vardır.
Dağıtımdan sonra, favicon tester'i kullanarak Next.js favori simgelerinizi doğrulayın. /favicon.ico, /icon.svg ve /apple-touch-icon.png dosyalarının hepsinin doğru içerik türü başlıklarıyla 200 yanıt döndürdüğünü kontrol edin. Ayrıca, Next.js'in beklenen tüm bağlantı etiketlerini yayınladığını doğrulamak için konuşlandırılan sitenizin "<head>" HTML dosyasını da inceleyin.
Nasıl çalışır
- 1
Favicon paketinizi oluşturun
[favicon generator](tool:favicon-generator)'e 512×512 PNG veya SVG yükleyin. favicon.ico, icon.svg, apple-touch-icon.png (180×180) ve manifest PNG'leri indirin.
- 2
favicon.ico'i /app'e (App Router) yerleştirin
favicon.ico dosyasını, Layout.tsx ile birlikte projenizin /app dizinine kopyalayın. Next.js bunu otomatik olarak sunar ve bağlantı etiketini enjekte eder. Pages Router için bunun yerine /public'e yerleştirin.
- 3
Keskin görüntü oluşturma için icon.svg ekleyin
SVG dosyanızı icon.svg olarak yeniden adlandırın ve /app (App Router) içine yerleştirin. Next.js otomatik olarak bir SVG bağlantı etiketi yayar. Pages Router için /public'e yerleştirin ve bağlantı etiketini _document.tsx'e ekleyin.
- 4
iOS yüklemeleri için apple-icon.png ekleyin
180×180 PNG dosyanızı apple-icon.png olarak yeniden adlandırın ve /app (App Router) içine yerleştirin. Pages Router için, apple-touch-icon.png'yi /public'e yerleştirin ve bağlantı etiketini _document.tsx'e ekleyin.
- 5
Web bildirimini yapılandırma
App Router için /app/manifest.ts oluşturun ve 192×192 ve 512×512 simge girişleri dahil Manifest meta verilerini dışa aktarın. PNG'leri /public'e yerleştirin. Pages Router için, site.webmanifest'i /public'e yerleştirin ve manifest bağlantı etiketini _document.tsx'e ekleyin.
- 6
Üretimde doğrula
Dağıtımdan sonra, canlı URL'nizdeki kaynağı görüntüleyin ve tüm bağlantı etiketlerinin mevcut olduğunu onaylayın. Her simge URL'sinin doğru içerik türüyle 200 döndürdüğünü kontrol etmek için [favicon tester](utility:favicon-tester)'i kullanın.
Hemen deneyin
Next.js'e hazır bir sık kullanılan simgesi oluşturun
Favicon OluşturucuSSS
Favori ikonlar Next.js App Router'te nereye gider?+
/app dizininin içinde. favicon.ico, icon.png, icon.svg ve apple-icon.png adlı dosyalar otomatik olarak tanınır ve bağlanır. /app'te genel bir favicon bulunur; düzene özgü bir tane ilgili düzen alt dizinine gider.
Favori simgeler Next.js Pages Router'te nereye gider?+
/public dizininde. Bağlantı etiketini `<Head>` bileşeninin içindeki sayfalar/_document.tsx'e ekleyin. Next.js, /public dosyalarını kök URL'de sunar — /public/favicon.ico'e https://alaniniz.com/favicon.ico adresinden erişilebilir.
App Router'e site simgesi eklemek için düzen.tsx dosyasını düzenlemem gerekir mi?+
Hayır, dosya kuralını kullanıyorsanız (/app'te favicon.ico). Kodu tercih ediyorsanız, simgeler özelliğiyle bir meta veri nesnesini dışa aktarın. Her iki yaklaşım da, oluşturulan HTML'te aynı `<link>` etiketlerini üretir.
Next.js, SVG site simgelerini destekliyor mu?+
Evet. App Router için icon.svg'yi /app'e yerleştirin veya Pages Router için _document.tsx'e `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` ekleyin. App Router, dosya kuralından otomatik olarak SVG bağlantı etiketini yayar.
Next.js'e apple-touch-icon'i nasıl eklerim?+
App Router için: apple-icon.png'yi (180×180) /app'e yerleştirin. Next.js, apple-touch-icon bağlantı etiketini otomatik olarak yayar. Pages Router için: apple-touch-icon.png'yi /public'e yerleştirin ve bağlantı etiketini _document.tsx'e ekleyin.
Next.js favicon'ları otomatik olarak önbelleğe alır mı?+
/app içindeki dosyalar için evet — Next.js, sunulan dosya adına bir içerik karması ekler, böylece her dosya değişikliği yeni bir getirme işlemini tetikler. /public'teki dosyalar için otomatik önbellek bozma yoktur; gerekirse bir sorgu dizesini manuel olarak ekleyin.
Next.js'te sayfa başına farklı bir site simgesi kullanabilir miyim?+
Evet. App Router'te, belirli bir rotanın page.tsx dosyasındaki bir createdMetadata işlevini özel simgeler değeriyle dışa aktarın. Pages Router'te, sayfa başına `<Head>` bileşeninin içine bir "<link rel='icon'>" ekleyin; bu, belge düzeyindeki varsayılanı geçersiz kılar.