Le favicon est plus qu'une simple icône

Le concept de favicon

La traduction chinoise de favicon est l'icône préférée. Elle n'est pas seulement l'avatar du site web, mais permet également aux favoris du navigateur d'afficher non seulement le titre correspondant, mais également de distinguer. différentes icônes.

Prise en charge du navigateur

Le navigateur FF prend également en charge le favicon dynamique, rendant votre site Web plus personnalisé

Une petite anecdote

le favicon doit être Pour réduire la bande passante du trafic du serveur utilisation dans une certaine mesure, généralement afin d'améliorer la convivialité du site Web, nous créerons un fichier d'erreur 404 personnalisé pour notre site Web. Dans ce cas, si le site Web n'a pas de fichier favicon.ico correspondant, chaque fois qu'il y en a. un utilisateur met en favoris un site Web/une page Web, le serveur Web appellera ce fichier 404 personnalisé et l'enregistrera dans le journal des erreurs du site Web. Cela doit évidemment être évité.

Parfois, j'ai défini le favicon et j'ai constaté qu'il n'était pas affiché

• Vérifiez d'abord si le format est correct :

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Maintenant, le format a disparu. Tellement strict, ça va sans type

• Si le format est correct, ctrl F5 efface de force le cache, et vous pouvez voir l'icône de l'onglet.

Comment Webpack emballe-t-il le favicon ?

Si vous utilisez html-webpack-plugins pour traiter le HTML, ce plug-in fournit déjà un favicon. Il vous suffit d'écrire le chemin où se trouve le favicon, tel que :

const htmlPlugin = new HtmlWebpackPlugin({
    favicon: path.resolve(publicDir, './imgs/favicon.ico')
});
pluginsConfig.push(htmlPlugin);

Le plug-in l'emballera automatiquement dans l'en-tête du HTML pour vous ;

Sinon, vous devez traiter l'icône vous-même, puis citer

Pour plus de favicon, ce n'est pas seulement une icône. .Pour les articles connexes, veuillez faire attention au site Web PHP chinois !