Nuxt için site simgesi
Nuxt 3, site kökündeki /public konumundan statik dosyalar sunar. Merkezi, SSR dostu bir favicon kurulumu için nuxt.config.ts'te app.head.link altında <link> etiketlerini yapılandırın.
favicon.ico'i public/favicon.ico'e yerleştirin — Nuxt, ekstra yapılandırmaya gerek kalmadan bunu otomatik olarak sunar.
nuxt.config.ts'te, app.head.link'i simge girişleriyle genişletin: { rel: 'icon', type: 'image/png',sizes: '32x32', href: '/favicon-32x32.png' }.
UseHead() işlevini yalnızca simgeler rotaya göre değiştiğinde bir düzende kullanın; çoğu site genel simgeleri nuxt.config'te bir kez ayarlar.
@nuxtjs/seo veya site yapılandırma modülleri için, varsa favicon alanlarını takip edin; aynı bağlantı etiketlerini sarar.
Nuxt Resim favori simgelerini işlemez; son boyutları public/'e yükleyin.
Nitro ön ayarlı statik barındırmayı kullanırken, nuxi oluşturulduktan sonra .output/public dosyasında favicon yollarının mevcut olduğunu doğrulayın.
Nasıl çalışır
- 1
Dosyaları herkese açık/
favicon.ico, PNG boyutları, isteğe bağlı SVG.
- 2
app.head.link'i yapılandırın
Simge bağlantılarını nuxt.config.ts'te merkezileştirin.
- 3
HTML'i oluşturun ve inceleyin
Doğru etiketler için, dağıtılan sayfadaki kaynağı görüntüleyin.
Hemen deneyin
Nuxt simge paketinizi oluşturun
Favicon paketi oluşturucuSSS
Nuxt hâlâ varsayılan simgeyi gösteriyor; neden?+
.nuxt önbelleğini temizleyin, public/favicon.ico'i değiştirin ve geliştirme sunucusunu yeniden başlatın.
Nuxt 3'e apple-touch simgesini nasıl eklerim?+
app.head.link'e { rel: 'apple-touch-icon',sizes: '180x180', href: '/apple-touch-icon.png' } ekleyin.
SSR favicon etiketlerini kopyalıyor mu?+
Aynı bağlantıyı hem nuxt.config hem de sayfa düzeyinde useHead çağrısında tanımlamaktan kaçının.