Favicon สำหรับ Vue.js
Les applications Vue expédient des ressources statiques depuis /public (Vite) ou /public (Vue CLI). Placez-y favicon.ico et référencez-le dans index.html — le serveur de développement et la version de production le servent à la racine du site.
Vite : mettez favicon.ico dans /public/favicon.ico. Ajoutez <link rel="icon" href="/favicon.ico"> dans index.html à l'intérieur de <head>.
Pour les versions hachées, /favicon.ico au niveau racine n’obtient pas de hachage de contenu – idéal pour les requêtes stables du navigateur.
Vue CLI utilise la même convention public/. Remplacez le public/favicon.ico par défaut par votre fichier multi-taille.
Ajoutez PNG et des liens avec des icônes Apple-Touch pour mobile. Gardez les chemins absolus (/apple-touch-icon.png) afin que le mode historique de vue-router ne rompe pas les routes imbriquées.
Lors du déploiement sur Netlify ou Vercel, assurez-vous que les fichiers favicon sont inclus dans la sortie dist – ils sont copiés automatiquement depuis public/.
Pour vite-plugin-pwa, déclarez les icônes dans la section manifeste des entrées vite.config.ts — 192×192 et 512×512 PNG.
วิธีการทำงาน
- 1
Copier les icônes dans public/
favicon.ico, apple-touch-icon.png, favicon.svg en option.
- 2
Modifier index.html
Ajoutez les balises <link rel="icon"> et apple-touch-icon.
- 3
Construire et déployer
Confirmez que /favicon.ico renvoie 200 en production.
ลองเลย
Générer des éléments de favicon Vue
เครื่องมือสร้าง Faviconคำถามที่พบบ่อย
Pourquoi le serveur de développement Vue affiche-t-il le logo Vite ?+
Remplacez public/favicon.ico et redémarrez le serveur de développement.
Où vont les favicons SVG dans Vue ?+
public/favicon.svg plus <link rel="icon" type="image/svg+xml" href="/favicon.svg"> dans index.html.
Vue-router affecte-t-il les chemins des favicon ?+
Uniquement si vous utilisez des hrefs relatifs – utilisez toujours des chemins / relatifs à la racine.