Generate and add proper favicons

Use https://realfavicongenerator.net to support iOS, Android, Windows, MacOS, and standard desktop browsers
tjcsl · Mar 31, 2024 · 92c3258 · 92c3258
1 parent 7013f72
commit 92c3258
Show file tree

Hide file tree

Showing 13 changed files with 134 additions and 1 deletion.
diff --git a/tin/static/img/favicon.ico b/tin/static/img/favicon.ico
@@ -1 +1 @@
-logos/logo-mark-black-50.ico
+favicon/favicon.ico
diff --git a/tin/static/img/favicon/android-chrome-192x192.png b/tin/static/img/favicon/android-chrome-192x192.png
diff --git a/tin/static/img/favicon/android-chrome-512x512.png b/tin/static/img/favicon/android-chrome-512x512.png
diff --git a/tin/static/img/favicon/apple-touch-icon.png b/tin/static/img/favicon/apple-touch-icon.png
diff --git a/tin/static/img/favicon/browserconfig.xml b/tin/static/img/favicon/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/img/favicon/mstile-150x150.png"/>
+            <TileColor>#4fab4f</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/tin/static/img/favicon/favicon-16x16.png b/tin/static/img/favicon/favicon-16x16.png
diff --git a/tin/static/img/favicon/favicon-32x32.png b/tin/static/img/favicon/favicon-32x32.png
diff --git a/tin/static/img/favicon/favicon.ico b/tin/static/img/favicon/favicon.ico
diff --git a/tin/static/img/favicon/mstile-150x150.png b/tin/static/img/favicon/mstile-150x150.png
diff --git a/tin/static/img/favicon/safari-pinned-tab.svg b/tin/static/img/favicon/safari-pinned-tab.svg
diff --git a/tin/static/img/favicon/site.webmanifest b/tin/static/img/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "Turn-In",
+    "short_name": "Turn-In",
+    "icons": [
+        {
+            "src": "/static/img/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/static/img/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#4fab4f",
+    "background_color": "#4fab4f",
+    "display": "standalone"
+}
diff --git a/tin/templates/base.html b/tin/templates/base.html
@@ -5,11 +5,26 @@
 <head>
   <meta charset="utf-8">
   <title>{% block title %}Turn-In{% endblock %}</title>
+
+  <!-- Favicon Tags (https://realfavicongenerator.net/) -->
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicon/apple-touch-icon.png' %}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon/favicon-32x32.png' %}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon/favicon-16x16.png' %}">
+  <link rel="manifest" href="{% static 'img/favicon/site.webmanifest' %}">
+  <link rel="mask-icon" href="{% static 'img/favicon/safari-pinned-tab.svg' %}" color="#4fab4f">
+  <link rel="shortcut icon" href="{% static 'img/favicon/favicon.ico' %}">
+  <meta name="msapplication-TileColor" content="#4fab4f">
+  <meta name="msapplication-config" content="{% static 'img/favicon/browserconfig.xml' %}">
+  <meta name="theme-color" content="#4fab4f">
+
+  {% comment "Old Favicon Tags" %}
   <link rel="icon" href="{% static 'img/logos/logo-mark-black.svg' %}" type="image/svg+xml" sizes="any">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-50.png' %}" type="image/png" sizes="50x50">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-25.png' %}" type="image/png" sizes="25x25">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-50.ico' %}" type="image/x-icon" sizes="50x50">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-25.ico' %}" type="image/x-icon" sizes="25x25">
+  {% endcomment %}
+
   <link rel="stylesheet" href="{% static 'css/base.css' %}">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
   <link rel="stylesheet" type="text/css"

diff --git a/tin/templates/base_wo_head.html b/tin/templates/base_wo_head.html
@@ -5,11 +5,26 @@
 <head>
   <meta charset="utf-8">
   <title>{% block title %}Turn-In{% endblock %}</title>
+
+  <!-- Favicon Tags (https://realfavicongenerator.net/) -->
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicon/apple-touch-icon.png' %}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon/favicon-32x32.png' %}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/favicon/favicon-16x16.png' %}">
+  <link rel="manifest" href="{% static 'img/favicon/site.webmanifest' %}">
+  <link rel="mask-icon" href="{% static 'img/favicon/safari-pinned-tab.svg' %}" color="#4fab4f">
+  <link rel="shortcut icon" href="{% static 'img/favicon/favicon.ico' %}">
+  <meta name="msapplication-TileColor" content="#4fab4f">
+  <meta name="msapplication-config" content="{% static 'img/favicon/browserconfig.xml' %}">
+  <meta name="theme-color" content="#4fab4f">
+
+  {% comment "Old Favicon Tags" %}
   <link rel="icon" href="{% static 'img/logos/logo-mark-black.svg' %}" type="image/svg+xml" sizes="any">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-50.png' %}" type="image/png" sizes="50x50">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-25.png' %}" type="image/png" sizes="25x25">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-50.ico' %}" type="image/x-icon" sizes="50x50">
   <link rel="icon" href="{% static 'img/logos/logo-mark-black-25.ico' %}" type="image/x-icon" sizes="25x25">
+  {% endcomment %}
+
   <link rel="stylesheet" href="{% static 'css/base.css' %}">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
   <link rel="stylesheet" type="text/css"