Vue.js için Favicon
Vue uygulamaları statik varlıkları /public (Vite) veya /public'ten (Vue CLI) gönderir. favicon.ico'i oraya yerleştirin ve index.html'te referans verin; geliştirme sunucusu ve üretim yapısı, site kökünde ona hizmet eder.
Vite: favicon.ico'i /public/favicon.ico'e koyun. <head> içindeki index.html'e <link rel="icon" href="/favicon.ico"> ekleyin.
Hashing uygulanmış derlemeler için, kök düzeyindeki /favicon.ico bir içerik karması almaz; kararlı tarayıcı istekleri için idealdir.
Vue CLI aynı genel/kuralları kullanır. Varsayılan public/favicon.ico'i çok boyutlu dosyanızla değiştirin.
Mobil cihazlar için PNG ve apple-touch-simge bağlantılarını ekleyin. Yolları mutlak tutun (/apple-touch-icon.png), böylece vue-router geçmiş modu iç içe geçmiş rotaları bozmaz.
Netlify veya Vercel'e dağıtım yaparken favicon dosyalarının dağıtım çıktısına dahil edildiğinden emin olun; bunlar genelden/otomatik olarak kopyalanır.
vite-plugin-pwa için, vite.config.ts — 192×192 ve 512×512 PNG girişlerinin bildirim bölümündeki simgeleri belirtin.
Nasıl çalışır
- 1
Simgeleri genele kopyala/
favicon.ico, apple-touch-icon.png, isteğe bağlı favicon.svg.
- 2
index.html'i düzenleyin
<link rel="icon"> ve apple-touch-icon etiketlerini ekleyin.
- 3
Derleyin ve dağıtın
/favicon.ico'in üretimde 200 değerini döndürdüğünü onaylayın.
Hemen deneyin
Vue site simgesi varlıkları oluşturun
Favicon OluşturucuSSS
Vue geliştirici sunucusu neden Vite logosunu gösteriyor?+
public/favicon.ico'i değiştirin ve geliştirme sunucusunu yeniden başlatın.
SVG favori ikonları Vue'te nereye gider?+
public/favicon.svg artı index.html'te <link rel="icon" type="image/svg+xml" href="/favicon.svg">.
Vue-router favicon yollarını etkiler mi?+
Yalnızca göreceli hrefler kullanıyorsanız her zaman köke bağlı / yolları kullanın.