docs: add more instruction for favicon (#44)

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.