Où dois-je mettre ma favicon avec Hugo

Question

J'utilise Hugo pour générer un site statique. Où dois-je placer mon favicon.ico fichier ?

Answer 1

Placez le favicon dans le répertoire statique. Le répertoire statique se trouve à la racine de votre site hugo. Lorsque vous générez votre site, la favicon sera copiée dans le répertoire statique. public la racine du site généré.

Answer 2

Quand tu utilises ce code dans ta tête :

<link rel="shortcut icon" type="image/png" href="http://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="http://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="http://stackoverflow.com/img/icon-192x192.png">

... vous pouvez mettre votre unique icon-192x192.png dans le dossier 'img' du répertoire statique (ou à tout autre endroit de votre choix, à condition de spécifier correctement le chemin).

Answer 3

Placez vos favicons dans statique Le dossier a raison. Il sera publié sur public une fois que la page est construite.

Cependant, l'utilisation de services CDN absolus (par exemple : Dropbox) pourrait être meilleure pour les performances des pages.

Answer 4

Les fichiers statiques (comme l'image du logo ou le favicon) vont dans le dossier "static". Si vous utilisez :

• un modèle téléchargé, mettez-le dans /static/* de votre projet hugo (pour éviter qu'il ne soit effacé lors de sa mise à jour)
• votre propre tempalte, mettez-le dans /themes/themeName/static/*

Les deux seront accessibles avec un chemin comme : /*

Exemple : "/static/ico/myico.ico" et "/themes/themeName/static/ico/myico.ico" seront accessibles par "/ico/myico.ico".

Answer 5

Je viens de tomber sur ce sujet et j'ai découvert que le commentaire de @mathtick "ça dépend" était la réponse la plus précise ici, donc j'ai décidé de faire ce post.

La réponse semble dépendre du thème que vous utilisez. , J'ai essayé de généraliser mon explication afin qu'elle reste utile pour que d'autres puissent trouver comment la faire fonctionner dans leur scénario, même si celui-ci n'est pas exactement le même que le mien.

C'est ce qui a fonctionné pour moi lorsque j'ai créé un site de démonstration en utilisant Hugo avec le thème docsy :

Identifiez vos 3 ressources les plus précieuses :
1. Le Repo Git du site d'exemple de votre thème :
Exemple :
https://github.com/google/docsy-example

2. Le Repo Git de votre thème :
Exemple :
https://github.com/google/docsy

3. La page de documentation de votre thème :
Exemple :
https://www.docsy.dev/docs/

Voici le processus logique que j'ai suivi pour le faire fonctionner :

1. On m'a dit de regarder dans le dossier /static/. J'ai regardé le site docsy-example et j'ai vu qu'il n'y avait pas de dossier nommé static. (ma base de code avait un dossier /static/ vide créé par la logique d'init de la cli hugo).
2. C'est alors que je me suis rappelé qu'il y a une relation d'héritage parentale quand il s'agit de thèmes, puisque docsy-example n'a pas de dossier /static/, il doit utiliser le dossier /static/ de son parent, le dépôt de thèmes docsy.
   https://github.com/google/docsy/tree/main/static/favicons
3. Puis j'ai créé /static/favicons/ dans ma base de code
   https://myrepo.com/my_hugo_site_that_uses_docsy_theme/static/favicons
   En sachant que si je crée dans ce dossier des fichiers dont le nom correspond à celui des fichiers du dossier /static/favicons/ correspondant du thème docsy, ma copie du dossier fusionnera avec la copie du dossier du thème, et ma copie remplacera celle du thème.
4. Puis je me suis dit qu'il y avait 15 fichiers ici, alors j'ai cherché et j'ai trouvé cette page :
   https://www.docsy.dev/docs/adding-content/iconsimages/#add-your-favicons
   Qui avait un conseil sur la façon d'utiliser http://cthedot.de/icongen pour générer ces fichiers.

J'ai ensuite découvert quelque chose qui n'était pas écrit dans la documentation, tout en effectuant des tests à l'aide de la boucle de rétroaction rapide du développement local d'Hugo et en vérifiant que le changement avait l'effet désiré. Si vous mettez à jour le favicon, il arrive que l'utilisation du mode incognito seul ne suffise pas à refléter le changement mis à jour. J'ai dû télécharger un autre navigateur, et l'utiliser en mode incognito, pour constater que le changement avait bien eu lieu. Ensuite, dans mon navigateur normal, j'ai dû vider le cache et les cookies, quitter complètement tous les processus du navigateur et rouvrir le navigateur, puis utiliser le mode incognito pour que le changement se reflète correctement dans le navigateur que j'utilise normalement.