Nuxt için site simgesi
Nuxt, site kökünüzde /public'ten statik dosyalar sunar; böylece /public/favicon.ico, otomatik olarak /favicon.ico olur. Çok boyutlu veya SVG simgeler için, app.vue'e nuxt.config.ts veya useHead() aracılığıyla bağlantı etiketleri ekleyin.
Quick answer
To add a favicon in Nuxt 3, place favicon.ico in /public (served at /favicon.ico), add link tags in nuxt.config.ts app.head if needed, deploy, and verify with the Favicon Checker — use the Favicon Generator to create the icon files first.
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Favicon Generator ile favicon paketinizi oluşturun — 512×512 kaynaktan favicon.ico, favicon.svg ve apple-touch-icon.png'yi dışa aktarın. Bunları Nuxt projenizin /public klasörüne bırakın.
Nuxt 3, /public'teki her şeyi, hiçbir ekstra yapılandırmaya gerek kalmadan etki alanı kökünde sunar. Tarayıcılar varsayılan olarak /favicon.ico talebinde bulunur, dolayısıyla dosyayı oraya yerleştirmek en yaygın durumu kapsar.
Her simge çeşidi üzerinde açık kontrol sağlamak için, app.head.link altındaki nuxt.config.ts'e bağlantı etiketleri ekleyin veya app.vue'te useHead({ link: [...] }) öğesini çağırın. Her iki yaklaşım da her sayfanın <head> kısmına etiketler enjekte eder.
Dağıtımdan sonra, üretim URL'nizi özel bir pencerede açın ve /favicon.ico'i onaylamak için Favicon Checker'i çalıştırın; <link rel="icon"> yollarınız 200 döndürür. Önbelleğe alınmış geliştirici simgeleri, dağıtımdan sonra bir Nuxt favicon'unun gösterilmemesinin yaygın bir nedenidir.
Sekme simgesi çalışıyor ancak Google Search hala boş bir sık kullanılan simgesi gösteriyorsa, canlı ana sayfanızın en az 48×48 boyutunda kare bir simgeye bağlantı verdiğini doğrulayın. Tarama ve boyut kuralları için Google site simgesi gereksinimleri kılavuzumuza bakın.
Nuxt, çok boyutlu .ico dosyalarını otomatik olarak oluşturmaz; bunları sizin sağlamanız gerekir. PWA yükleme istemleri ve yüksek DPI sekmeleri için app.head'te bağlantısı verilen PNG yedeklerini kullanın.
Nasıl çalışır
- 1
Generate favicon files
Use the Favicon Generator to export favicon.ico and PNG variants from a 512×512 logo.
- 2
/public'e ekle
favicon.ico'i (ve isteğe bağlı favicon.svg, apple-touch-icon.png'yi) Nuxt /public klasörünüze kopyalayın.
- 3
Yapılandırın ve doğrulayın
Gerekirse nuxt.config.ts'e app.head.link girişlerini ekleyin, dağıtın ve ardından Favicon Checker'i canlı URL'nizde çalıştırın.
Hemen deneyin
Generate a Nuxt-ready favicon
Favicon OluşturucuSSS
Nuxt 3'e nasıl sık kullanılan simgesi eklerim?+
favicon.ico'i /public'e yerleştirin, ardından isteğe bağlı olarak app.head.link altındaki nuxt.config.ts'e veya app.vue'deki useHead() aracılığıyla <link rel="icon"> etiketlerini ekleyin.
Bir Nuxt projesinde favicon nereye gider?+
/public dizini. Buradaki dosyalar alan adı kökünüzden sunulur — /public/favicon.ico, /favicon.ico adresinde mevcuttur.
Nuxt site simgem neden görünmüyor?+
Yaygın nedenler: /public'te olmayan dosya, app.head'te yanlış yol, geliştiriciden gelen tarayıcı önbelleği veya dağıtılan URL yerine localhost'un kontrol edilmesi. Gizli bir pencerede test edin.
Favori simgeler için nuxt.config.ts veya useHead() kullanmalı mıyım?+
Her ikisi de işe yarar. nuxt.config.ts, site genelindeki statik simgeler için en iyisidir; Simgeler çalışma zamanı durumuna veya rota başına mantığa bağlıysa app.vue'teki useHead().
Nuxt'te SVG favicon'unu kullanabilir miyim?+
Evet — favicon.svg'i /public'e yerleştirin ve app.head.link'e { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' } ekleyin.