Improve docs for base url for public assets

Current docs seem to be very vague. The only thing they mention is this comment:
```
// if base is set, use /base/favicon.ico
```

I had know idea if this meant that I need to manually add the base prefix and how I would do it, or whether I have to specifically create a `/base` directory within my `/docs` folder

Since there are many issues where people are confused about this (https://github.com/vuejs/vitepress/issues/1500, https://github.com/vuejs/vitepress/issues/3869, https://github.com/vuejs/vitepress/issues/1815, https://github.com/vuejs/vitepress/issues/827), I think this explanation belongs to the docs

docs/en/reference/site-config.md

@@ -229,6 +229,24 @@ export default {
 */
 ```
 
+If you're using [base](./site-config#base), the file will be built to `/your-base-url/favicon.ico`, but the rendered link tag will still point to `/favicon.icon`.
+Currently, you have to handle this manually. Your site config needs to explicitly specify the base url:
+
+```ts
+export default {
+  head: [['link', { rel: 'icon', href: '/your-base-url/favicon.ico' }]]
+}
+```
+
+If, for example, you don't know your base prefix ahead of time (for example, you're passing the `--base` option [during build](./cli#options-1)), one way to access it would be to also pass
+it as an env variable and use it in the config file:
+
+```ts
+export default {
+  head: [['link', { rel: 'icon', href: `${process.env.BASE}/favicon.ico` }]]
+}
+```
+
 #### Example: Adding Google Fonts
 
 ```ts