Add favicon and PWA manifest (#1137)

* Fix favicon/add web manifest * improve manifest * Add screenshot
WesternFriend · Nov 20, 2024 · 4d2d3e3 · 4d2d3e3
1 parent 9f860b2
commit 4d2d3e3
Show file tree

Hide file tree

Showing 12 changed files with 91 additions and 3 deletions.
diff --git a/core/static/favicon.ico b/core/static/favicon.ico
diff --git a/core/static/img/apple-touch-icon.png b/core/static/img/apple-touch-icon.png
diff --git a/core/static/img/favicon-16x16.png b/core/static/img/favicon-16x16.png
diff --git a/core/static/img/favicon-32x32.png b/core/static/img/favicon-32x32.png
diff --git a/core/static/img/favicon.ico b/core/static/img/favicon.ico
diff --git a/core/static/img/icon-1024x1024.png b/core/static/img/icon-1024x1024.png
diff --git a/core/static/img/icon-192x192.png b/core/static/img/icon-192x192.png
diff --git a/core/static/img/icon-512x512.png b/core/static/img/icon-512x512.png
diff --git a/core/static/img/screenshot.jpg b/core/static/img/screenshot.jpg
diff --git a/core/static/img/western-friend-icon.png b/core/static/img/western-friend-icon.png
diff --git a/core/static/manifest.json b/core/static/manifest.json
@@ -0,0 +1,79 @@
+{
+  "name": "Western Friend",
+  "short_name": "Western Friend",
+  "description": "Western Friend is a Quaker publication that provides resources and support for Quaker communities and individuals seeking to live out their faith in the world. Western Friend is part of the Religious Society of Friends.",
+  "icons": [
+    {
+      "src": "/static/img/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/img/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/img/icon-1024x1024.png",
+      "sizes": "1024x1024",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "display_override": ["standalone", "minimal-ui"],
+  "start_url": "/",
+  "scope": "/",
+  "orientation": "any",
+  "lang": "en-US",
+  "categories": [
+    "social",
+    "networking",
+    "community",
+    "news",
+    "magazines",
+    "education",
+    "religion",
+    "books"
+  ],
+  "apple-mobile-web-app-capable": "yes",
+  "apple-mobile-web-app-status-bar-style": "black-translucent",
+  "apple-mobile-web-app-title": "Western Friend",
+  "edge_side_panel": {
+    "preferred_width": 400
+  },
+  "screenshots": [
+    {
+      "src": "/static/img/screenshot.jpg",
+      "sizes": "1280x720",
+      "type": "image/jpeg",
+      "form_factor": "wide"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Latest Magazine",
+      "url": "/magazine/",
+      "description": "View the latest magazine issue"
+    },
+    {
+      "name": "Subscribe",
+      "url": "/subscribe/",
+      "description": "Subscribe to Western Friend"
+    },
+    {
+      "name": "Donate",
+      "url": "/donate/",
+      "description": "Support Western Friend"
+    },
+    {
+      "name": "About",
+      "url": "/about/",
+      "description": "Learn more about Western Friend"
+    }
+  ]
+}
diff --git a/core/templates/base.html b/core/templates/base.html
@@ -20,6 +20,18 @@
         {% endif %}
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+        <!-- Favicons -->
+        <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon-32x32.png' %}">
+        <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon-16x16.png' %}">
+        <link rel="icon" href="{% static 'img/favicon.ico' %}">
+
+        <!-- PWA/Mobile -->
+        <link rel="manifest" href="{% static 'manifest.json' %}">
+        <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-icon.png' %}">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+
         {# Force all links in the live preview panel to be opened in a new tab #}
         {% if request.in_preview_panel %}
             <base target="_blank">
@@ -47,9 +59,6 @@
         {% block extra_css %}
             {# Override this in templates to add extra stylesheets #}
         {% endblock %}
-
-        {# Favicon #}
-        <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
     </head>
 
     <body class="{% block body_class %}{% endblock %} d-flex flex-column h-100">