diff --git a/exampleSite/content/docs/guide/configuration.md b/exampleSite/content/docs/guide/configuration.md index 3b1da2aa..ef3f015d 100644 --- a/exampleSite/content/docs/guide/configuration.md +++ b/exampleSite/content/docs/guide/configuration.md @@ -160,17 +160,23 @@ For your reference, an example [`i18n/en.yaml`](https://github.com/imfing/hextra ### Favicon -To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site, place icon files under the `static` folder to override the default favicons from the theme: - -``` -static -├── android-chrome-192x192.png -├── android-chrome-512x512.png -├── apple-touch-icon.png -├── favicon-16x16.png -├── favicon-32x32.png -├── favicon-dark.svg -├── favicon.ico -├── favicon.svg -└── site.webmanifest -``` +To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site, place icon files under the `static` folder to override the [default favicons from the theme](https://github.com/imfing/hextra/tree/main/static): + +{{< filetree/container >}} + {{< filetree/folder name="static" >}} + {{< filetree/file name="android-chrome-192x192.png" >}} + {{< filetree/file name="android-chrome-512x512.png" >}} + {{< filetree/file name="apple-touch-icon.png" >}} + {{< filetree/file name="favicon-16x16.png" >}} + {{< filetree/file name="favicon-32x32.png" >}} + {{< filetree/file name="favicon-dark.svg" >}} + {{< filetree/file name="favicon.ico" >}} + {{< filetree/file name="favicon.svg" >}} + {{< filetree/file name="site.webmanifest" >}} + {{< /filetree/folder >}} +{{< /filetree/container >}} + +Include both `favicon.ico` and `favicon.svg` files in your project to ensure your site's favicons display correctly. + +While `favicon.ico` is generally for older browsers, `favicon.svg` is supported by modern ones. The optional `favicon-dark.svg` can be included for a tailored experience in dark mode. +Feel free to use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate these icons.