Use | for page separator in meta titles (#6953)

I generally prefer this style:

![Screenshot 2024-09-02 at 8 41
38 PM](https://github.com/user-attachments/assets/795dab85-b6c4-4278-913f-1d723379b225)

docs/.overrides/main.html

@@ -1,11 +1,21 @@
 {% extends "base.html" %}
 
+{% block htmltitle %}
+{% if page.meta and page.meta.title %}
+<title>{{ page.meta.title }} | {{ config.site_name }}</title>
+{% elif page.title and not page.is_homepage %}
+<title>{{ page.title | striptags }} | {{ config.site_name }}</title>
+{% else %}
+<title>{{ config.site_name }}</title>
+{% endif %}
+{% endblock %}
+
 {% block extrahead %}
-<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
-<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png"/>
-<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png"/>
-<link rel="manifest" href="/static/site.webmanifest"/>
-<link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#2e183d"/>
+<link rel="apple-touch-icon" sizes="180x180" href="https://docs.astral.sh/static/apple-touch-icon.png"/>
+<link rel="icon" type="image/png" sizes="32x32" href="https://docs.astral.sh/static/favicon-32x32.png"/>
+<link rel="icon" type="image/png" sizes="16x16" href="https://docs.astral.sh/static/favicon-16x16.png"/>
+<link rel="manifest" href="https://docs.astral.sh/static/site.webmanifest"/>
+<link rel="mask-icon" href="https://docs.astral.sh/static/safari-pinned-tab.svg" color="#2e183d"/>
 <meta name="msapplication-TileColor" content="#d7ff64"/>
 <meta name="theme-color" content="#ffffff"/>
 <meta name="robots" content="index,follow"/>