Favicon untuk Vue.js
Aplikasi Vue mengirimkan aset statis dari /public (Vite) atau /public (Vue CLI). Tempatkan favicon.ico di sana dan referensikan di index.html — server pengembang dan produksi produksi menyajikannya di root situs.
Catatan: masukkan favicon.ico ke /public/favicon.ico. Tambahkan <link rel="icon" href="/favicon.ico"> di index.html di dalam <head>.
Untuk build yang di-hash, level root /favicon.ico tidak mendapatkan hash konten — ideal untuk permintaan browser yang stabil.
Vue CLI menggunakan publik/konvensi yang sama. Ganti public/favicon.ico default dengan file multi-ukuran Anda.
Tambahkan tautan PNG dan ikon apple-touch untuk seluler. Pertahankan jalur tetap absolut (/apple-touch-icon.png) sehingga mode riwayat vue-router tidak merusak rute yang disarangkan.
Saat menerapkan ke Netlify atau Vercel, pastikan file favicon disertakan dalam output dist — file tersebut disalin dari publik/secara otomatis.
Untuk vite-plugin-pwa, deklarasikan ikon di bagian manifes entri vite.config.ts — 192×192 dan 512×512 PNG.
Cara kerjanya
- 1
Salin ikon ke publik/
favicon.ico, apple-touch-icon.png, opsional favicon.svg.
- 2
Sunting index.html
Tambahkan tag <link rel="icon"> dan apple-touch-icon.
- 3
Bangun dan terapkan
Konfirmasikan /favicon.ico mengembalikan 200 pada produksi.
Coba sekarang
Hasilkan aset favicon Vue
Pembuat FaviconFAQ
Mengapa server pengembang Vue menampilkan logo Vite?+
Ganti public/favicon.ico dan mulai ulang server dev.
Ke mana perginya favicon SVG di Vue?+
public/favicon.svg ditambah <link rel="icon" type="image/svg+xml" href="/favicon.svg"> di index.html.
Apakah vue-router memengaruhi jalur favicon?+
Hanya jika Anda menggunakan href relatif — selalu gunakan akar-relatif / jalur.