diff --git a/routes/_components/Title.html b/routes/_components/Title.html
new file mode 100644
index 00000000..5d6104f0
--- /dev/null
+++ b/routes/_components/Title.html
@@ -0,0 +1,24 @@
+<svelte:head>
+  <title>{instanceIndicator} · {name}{notificationsIndicator}</title>
+</svelte:head>
+<script>
+  import { store } from '../_store/store'
+
+  export default {
+    data: () => ({
+      settingsPage: false
+    }),
+    store: () => store,
+    computed: {
+      instanceIndicator: ({ $isUserLoggedIn, $currentInstance, settingsPage }) => (
+        // If the user is not logged in, or if they're on a settings page (which
+        // is more general than instance-specific), of if this is server-rendered, then
+        // show "Pinafore". Otherwise show the instance name.
+        `${($isUserLoggedIn && !settingsPage && $currentInstance) ? $currentInstance : 'Pinafore'}`
+      ),
+      notificationsIndicator: ({ $hasNotifications, $numberOfNotifications }) => (
+        $hasNotifications ? ` (${$numberOfNotifications})` : ''
+      )
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/routes/accounts/[accountId].html b/routes/accounts/[accountId].html
index 4838ffc8..ac63c048 100644
--- a/routes/accounts/[accountId].html
+++ b/routes/accounts/[accountId].html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Profile</title>
-</svelte:head>
+<Title name="Profile" />
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/accounts/[accountId].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/accounts/[accountId]/followers.html b/routes/accounts/[accountId]/followers.html
index 7fd5dd29..2f8b3cb1 100644
--- a/routes/accounts/[accountId]/followers.html
+++ b/routes/accounts/[accountId]/followers.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Followers</title>
-</svelte:head>
+<Title name="Followers" />
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/accounts/[accountId]/followers.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/accounts/[accountId]/follows.html b/routes/accounts/[accountId]/follows.html
index 058040bc..a2189657 100644
--- a/routes/accounts/[accountId]/follows.html
+++ b/routes/accounts/[accountId]/follows.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Follows</title>
-</svelte:head>
+<Title name="Follows" />
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/accounts/[accountId]/follows.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/blocked.html b/routes/blocked.html
index b3094094..8e0d8ea7 100644
--- a/routes/blocked.html
+++ b/routes/blocked.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Blocked users</title>
-</svelte:head>
+<Title name="Blocked users" />
 <Layout page='blocked'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/blocked.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/community/index.html b/routes/community/index.html
index 44df7e50..c4dd49ee 100644
--- a/routes/community/index.html
+++ b/routes/community/index.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Community</title>
-</svelte:head>
+<Title name="Community" />
 <Layout page='community'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/community/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/favorites.html b/routes/favorites.html
index f0fceac2..d81220ce 100644
--- a/routes/favorites.html
+++ b/routes/favorites.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Favorites</title>
-</svelte:head>
+<Title name="Favorites" />
 <Layout page='favorites'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/favorites.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/federated.html b/routes/federated.html
index e2804651..efd2d819 100644
--- a/routes/federated.html
+++ b/routes/federated.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Federated</title>
-</svelte:head>
+<Title name="Federated" />
 <Layout page='federated'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/federated.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/index.html b/routes/index.html
index 2767b483..c5b5b251 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -1,17 +1,17 @@
-<svelte:head>
-	<title>Pinafore – Home</title>
-</svelte:head>
+<Title name="Home" />
 <Layout page='home'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/lists/[listId].html b/routes/lists/[listId].html
index 3511a931..28b371c3 100644
--- a/routes/lists/[listId].html
+++ b/routes/lists/[listId].html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – List</title>
-</svelte:head>
+<Title name="List" />
 <Layout page='lists/{params.listId}'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/lists/[listId].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/local.html b/routes/local.html
index 97c817ef..31fa3925 100644
--- a/routes/local.html
+++ b/routes/local.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Local</title>
-</svelte:head>
+<Title name="Local" />
 <Layout page='local'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/local.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/muted.html b/routes/muted.html
index 84a3f555..45f78f10 100644
--- a/routes/muted.html
+++ b/routes/muted.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Muted users</title>
-</svelte:head>
+<Title name="Muted users" />
 <Layout page='muted'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/muted.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/notifications.html b/routes/notifications.html
index ace67518..bed5cd0c 100644
--- a/routes/notifications.html
+++ b/routes/notifications.html
@@ -1,17 +1,17 @@
-<svelte:head>
-	<title>Pinafore – Notifications</title>
-</svelte:head>
+<Title name="Notifications" />
 <Layout page='notifications'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/notifications.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/pinned.html b/routes/pinned.html
index 20ddffa8..268e1a2a 100644
--- a/routes/pinned.html
+++ b/routes/pinned.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Pinned toots</title>
-</svelte:head>
+<Title name="Pinned toots" />
 <Layout page='pinned'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/pinned.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/requests.html b/routes/requests.html
index 0736dc5c..c4005883 100644
--- a/routes/requests.html
+++ b/routes/requests.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Follow requests</title>
-</svelte:head>
+<Title name="Follow requests" />
 <Layout page='muted'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/requests.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/search.html b/routes/search.html
index 843d7d1b..f17de71b 100644
--- a/routes/search.html
+++ b/routes/search.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Search</title>
-</svelte:head>
+<Title name="Search" />
 <Layout page='search'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from './_components/Layout.html'
+  import Title from './_components/Title.html'
   import LazyPage from './_components/LazyPage.html'
   import pageComponent from './_pages/search.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/settings/about.html b/routes/settings/about.html
index 6bef90b4..05248740 100644
--- a/routes/settings/about.html
+++ b/routes/settings/about.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – About</title>
-</svelte:head>
+<Title name="About" settingsPage={true} />
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/settings/about.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/settings/general.html b/routes/settings/general.html
index d2036e09..e75e0993 100644
--- a/routes/settings/general.html
+++ b/routes/settings/general.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – General Settings</title>
-</svelte:head>
+<Title name="General Settings" settingsPage={true} />
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/settings/general.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/settings/index.html b/routes/settings/index.html
index 4a9cc304..9cbdaa86 100644
--- a/routes/settings/index.html
+++ b/routes/settings/index.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Settings</title>
-</svelte:head>
+<Title name="Settings" settingsPage={true} />
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/settings/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/settings/instances/[instanceName].html b/routes/settings/instances/[instanceName].html
index 4207e1d3..ea9d035a 100644
--- a/routes/settings/instances/[instanceName].html
+++ b/routes/settings/instances/[instanceName].html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Instance</title>
-</svelte:head>
+<Title name="{params.instanceName}" settingsPage={true} />
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/settings/instances/[instanceName].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/settings/instances/add.html b/routes/settings/instances/add.html
index a786a15a..376b5e27 100644
--- a/routes/settings/instances/add.html
+++ b/routes/settings/instances/add.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Add instance</title>
-</svelte:head>
+<Title name="Add instance" settingsPage={true} />
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/settings/instances/add.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/settings/instances/index.html b/routes/settings/instances/index.html
index 15847452..ea8b5a32 100644
--- a/routes/settings/instances/index.html
+++ b/routes/settings/instances/index.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Instances</title>
-</svelte:head>
+<Title name="Instances" settingsPage={true} />
 <Layout page='settings'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/settings/instances/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/statuses/[statusId]/favorites.html b/routes/statuses/[statusId]/favorites.html
index 7ce3f412..7d717e24 100644
--- a/routes/statuses/[statusId]/favorites.html
+++ b/routes/statuses/[statusId]/favorites.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Favorites</title>
-</svelte:head>
+<Title name="Favorites" />
 <Layout page='favorites'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/statuses/[statusId]/favorites.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/statuses/[statusId]/index.html b/routes/statuses/[statusId]/index.html
index 28824f49..172e94ef 100644
--- a/routes/statuses/[statusId]/index.html
+++ b/routes/statuses/[statusId]/index.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Status</title>
-</svelte:head>
+<Title name="Status" />
 <Layout page='statuses' >
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/statuses/[statusId]/index.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/statuses/[statusId]/reblogs.html b/routes/statuses/[statusId]/reblogs.html
index 31f87b05..cae3729a 100644
--- a/routes/statuses/[statusId]/reblogs.html
+++ b/routes/statuses/[statusId]/reblogs.html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Reblogs</title>
-</svelte:head>
+<Title name="Reblogs" />
 <Layout page='reblogs'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../../_components/Layout.html'
+  import Title from '../../_components/Title.html'
   import LazyPage from '../../_components/LazyPage.html'
   import pageComponent from '../../_pages/statuses/[statusId]/reblogs.html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/routes/tags/[tagName].html b/routes/tags/[tagName].html
index bbecaf0a..10002dbf 100644
--- a/routes/tags/[tagName].html
+++ b/routes/tags/[tagName].html
@@ -1,17 +1,17 @@
-<svelte:head>
-  <title>Pinafore – Hashtag</title>
-</svelte:head>
+<Title name="Hashtag" />
 <Layout page='tags'>
   <LazyPage {pageComponent} {params} />
 </Layout>
 <script>
   import Layout from '../_components/Layout.html'
+  import Title from '../_components/Title.html'
   import LazyPage from '../_components/LazyPage.html'
   import pageComponent from '../_pages/tags/[tagName].html'
 
   export default {
     components: {
       Layout,
+      Title,
       LazyPage
     },
     data: () => ({
diff --git a/tests/spec/102-notifications.js b/tests/spec/102-notifications.js
index 29211359..18719c83 100644
--- a/tests/spec/102-notifications.js
+++ b/tests/spec/102-notifications.js
@@ -1,6 +1,6 @@
 import { loginAsFoobar } from '../roles'
 import {
-  getNthStatus, getUrl, homeNavButton, notificationsNavButton
+  getNthStatus, getTitleText, getUrl, homeNavButton, notificationsNavButton
 } from '../utils'
 import { favoriteStatusAs, postAs } from '../serverActions'
 
@@ -12,15 +12,19 @@ test('shows unread notifications', async t => {
   await loginAsFoobar(t)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
+    .expect(getTitleText()).eql('localhost:3000 · Home')
   await favoriteStatusAs('admin', id)
   await t
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (1)')
+    .expect(getTitleText()).eql('localhost:3000 · Home (1)')
     .click(notificationsNavButton)
     .expect(getUrl()).contains('/notifications')
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications (current page)')
+    .expect(getTitleText()).eql('localhost:3000 · Notifications')
     .expect(getNthStatus(0).innerText).contains('somebody please favorite this to validate me')
     .expect(getNthStatus(0).innerText).match(/admin\s+favorited your status/)
   await t
     .click(homeNavButton)
     .expect(notificationsNavButton.getAttribute('aria-label')).eql('Notifications')
+    .expect(getTitleText()).eql('localhost:3000 · Home')
 })
diff --git a/tests/utils.js b/tests/utils.js
index ef863cfd..dad58729 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -79,6 +79,8 @@ export const getActiveElementInsideNthStatus = exec(() => {
   return ''
 })
 
+export const getTitleText = exec(() => document.head.querySelector('title').innerHTML)
+
 export const goBack = exec(() => window.history.back())
 
 export const forceOffline = exec(() => window.__forceOnline(false))