diff --git a/hypha/static_src/src/images/favicons/android-chrome-192x192.png b/hypha/static_src/src/images/favicons/android-chrome-192x192.png
new file mode 100644
index 0000000000000000000000000000000000000000..c75978f3cd025424d71e1e44e9f228bb0699be19
Binary files /dev/null and b/hypha/static_src/src/images/favicons/android-chrome-192x192.png differ
diff --git a/hypha/static_src/src/images/favicons/android-chrome-512x512.png b/hypha/static_src/src/images/favicons/android-chrome-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e9d36cce0d5ed1219483132ac70bc117370d886
Binary files /dev/null and b/hypha/static_src/src/images/favicons/android-chrome-512x512.png differ
diff --git a/hypha/static_src/src/images/favicons/apple-touch-icon-512x512.png b/hypha/static_src/src/images/favicons/apple-touch-icon-512x512.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e9d36cce0d5ed1219483132ac70bc117370d886
Binary files /dev/null and b/hypha/static_src/src/images/favicons/apple-touch-icon-512x512.png differ
diff --git a/hypha/static_src/src/images/favicons/apple-touch-icon.png b/hypha/static_src/src/images/favicons/apple-touch-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..95cef8d7ed55030f02384eb5f210f9abed3af173
Binary files /dev/null and b/hypha/static_src/src/images/favicons/apple-touch-icon.png differ
diff --git a/hypha/static_src/src/images/favicons/browserconfig.xml b/hypha/static_src/src/images/favicons/browserconfig.xml
index bfdea1144149a30b73db2a246d0d1d576cac94b7..83586caa4d2e399f268c3130c5762f4008c9b5b5 100644
--- a/hypha/static_src/src/images/favicons/browserconfig.xml
+++ b/hypha/static_src/src/images/favicons/browserconfig.xml
@@ -2,7 +2,7 @@
<browserconfig>
<msapplication>
<tile>
- <square150x150logo src="/mstile-150.png"/>
+ <square150x150logo src="/static/images/favicons/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
diff --git a/hypha/static_src/src/images/favicons/favicon-16x16.png b/hypha/static_src/src/images/favicons/favicon-16x16.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3df2838161db4601d39b6789a3f184d4eccb46b
Binary files /dev/null and b/hypha/static_src/src/images/favicons/favicon-16x16.png differ
diff --git a/hypha/static_src/src/images/favicons/favicon-32x32.png b/hypha/static_src/src/images/favicons/favicon-32x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..5153c696b6463b074904e65f5dbae81d61f808a5
Binary files /dev/null and b/hypha/static_src/src/images/favicons/favicon-32x32.png differ
diff --git a/hypha/static_src/src/images/favicons/favicon.ico b/hypha/static_src/src/images/favicons/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..4365d407ed2796bd97ff7b44efb7652d858e5574
Binary files /dev/null and b/hypha/static_src/src/images/favicons/favicon.ico differ
diff --git a/hypha/static_src/src/images/favicons/mstile-150x150.png b/hypha/static_src/src/images/favicons/mstile-150x150.png
new file mode 100644
index 0000000000000000000000000000000000000000..9af57361535c5eb89dfeb9144b007e06d9666940
Binary files /dev/null and b/hypha/static_src/src/images/favicons/mstile-150x150.png differ
diff --git a/hypha/static_src/src/images/favicons/safari-pinned-tab.svg b/hypha/static_src/src/images/favicons/safari-pinned-tab.svg
index 55ec5fe819d882c0b58b822533796f2bfb764883..5dde630ad27edf5def2680457cf59908716e010c 100644
--- a/hypha/static_src/src/images/favicons/safari-pinned-tab.svg
+++ b/hypha/static_src/src/images/favicons/safari-pinned-tab.svg
@@ -2,20 +2,28 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="152.000000pt" height="152.000000pt" viewBox="0 0 152.000000 152.000000"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
-<g transform="translate(0.000000,152.000000) scale(0.100000,-0.100000)"
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
-<path d="M0 760 l0 -760 760 0 760 0 0 760 0 760 -760 0 -760 0 0 -760z m580
-400 l0 -60 -50 0 -50 0 0 -50 0 -50 -60 0 -60 0 0 -235 0 -235 -60 0 -60 0 0
-235 0 235 60 0 60 0 0 60 0 60 50 0 50 0 0 50 0 50 60 0 60 0 0 -60z m480 10
-l0 -50 60 0 60 0 0 -60 0 -60 50 0 50 0 0 -235 0 -235 -60 0 -60 0 0 235 0
-235 -50 0 -50 0 0 50 0 50 -60 0 -60 0 0 60 0 60 60 0 60 0 0 -50z m-580 -700
-l0 -50 50 0 50 0 0 -60 0 -60 -60 0 -60 0 0 50 0 50 -50 0 -50 0 0 60 0 60 60
-0 60 0 0 -50z m700 -10 l0 -60 -60 0 -60 0 0 -50 0 -50 -60 0 -60 0 0 60 0 60
-60 0 60 0 0 50 0 50 60 0 60 0 0 -60z"/>
+<path d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
+-2560z m1968 1358 c2 -171 0 -198 -14 -213 -14 -13 -40 -16 -168 -14 l-151 1
+-5 -163 -5 -164 -198 -5 -197 -5 -3 -778 c-2 -758 -3 -779 -21 -793 -15 -11
+-60 -14 -200 -14 -100 0 -188 5 -196 10 -13 8 -15 108 -18 782 -1 425 0 783 3
+796 5 22 6 22 205 22 l200 0 2 203 3 202 165 1 165 2 2 148 c1 82 2 157 2 167
+1 16 16 17 214 15 l212 -3 3 -197z m1612 37 l0 -165 186 0 c112 0 193 -4 205
+-11 19 -10 20 -20 18 -202 l-1 -192 166 -3 166 -2 0 -795 0 -794 -22 -12 c-15
+-8 -77 -10 -201 -7 -161 4 -181 6 -193 23 -12 16 -14 150 -14 792 l0 773 -165
+0 -165 0 -2 166 -3 167 -188 -2 c-133 -2 -193 1 -203 10 -11 9 -14 50 -14 209
+0 108 3 200 7 203 3 4 100 7 215 7 l208 0 0 -165z m-1972 -2191 c22 -6 22 -9
+22 -170 l0 -164 158 0 c110 0 162 -4 170 -12 15 -15 17 -370 2 -399 -10 -18
+-23 -19 -215 -19 l-205 0 -2 166 -3 167 -150 -2 c-83 -1 -158 1 -168 4 -15 7
+-17 27 -17 215 0 157 3 210 13 213 17 8 368 8 395 1z m2370 -7 c15 -10 17
+-383 2 -407 -8 -12 -43 -15 -202 -17 l-193 -2 -5 -163 -5 -163 -207 -3 -208
+-2 -5 22 c-3 13 -4 109 -3 213 l3 190 200 2 200 2 3 162 c2 115 6 166 15 172
+15 10 387 5 405 -6z"/>
</g>
</svg>
diff --git a/hypha/static_src/src/images/favicons/site.webmanifest b/hypha/static_src/src/images/favicons/site.webmanifest
new file mode 100644
index 0000000000000000000000000000000000000000..4cd236b851fd753a4870524194e0fdada8bd2189
--- /dev/null
+++ b/hypha/static_src/src/images/favicons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+ "name": "",
+ "short_name": "",
+ "icons": [
+ {
+ "src": "/static/images/favicons/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/static/images/favicons/android-chrome-512x512.png",
+ "sizes": "512x512",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html
index 7f6e5db0ba2bf3aa3f7030b931998f0a832c962c..b9805c03dc1db56567e9ff1eb49483ffa356e3a3 100644
--- a/hypha/templates/base-apply.html
+++ b/hypha/templates/base-apply.html
@@ -10,21 +10,18 @@
<!-- favicons -->
{% comment %}
- Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + img/favicons.
- Then favicon.ico should be copied to a directory called "public" in the application root and puppet does some magic to serve it up at the site root.
+ Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + images/favicons. Override favicons by adding them to public/images/favicons.
{% endcomment %}
- <link rel="icon" sizes="144x144" href="{% static 'images/favicons/android-chrome-144.png' %}">
- <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16.png' %}">
- <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32.png' %}">
- <link rel="apple-touch-icon" sizes="76x76" href="{% static 'images/favicons/apple-icon-76.png' %}">
- <link rel="apple-touch-icon" sizes="120x120" href="{% static 'images/favicons/apple-icon-120.png' %}">
- <link rel="apple-touch-icon" sizes="152x152" href="{% static 'images/favicons/apple-icon-152.png' %}">
- <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-icon-180.png' %}">
- <link rel="manifest" href="{% static 'images/favicons/site.webmanifest.json' %}">
<meta name="msapplication-TileColor" content="#da532c">
- <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150.png' %}">
+ <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150x150.png' %}">
<meta name="theme-color" content="#ffffff">
+ <link rel="apple-touch-icon" href="{% static 'images/favicons/apple-touch-icon.png' %}">
+ <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
+ <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
+ <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
+ <link rel="shortcut icon" href="{% static 'images/favicons/favicon.ico' %}">
+
<link rel="stylesheet" href="{% static 'css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'css/apply/main.css' %}">
{# Hijack styling #}
diff --git a/hypha/templates/base.html b/hypha/templates/base.html
index 732531cc979a1f2ae0da220abd1dd1a69ffce606..a7778ad82370a1ae29f1a0a9c51fc850e1c11923 100644
--- a/hypha/templates/base.html
+++ b/hypha/templates/base.html
@@ -11,21 +11,18 @@
<!-- favicons -->
{% comment %}
- Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + img/favicons.
- Then favicon.ico should be copied to a directory called "public" in the application root and puppet does some magic to serve it up at the site root.
+ Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + images/favicons. Override favicons by adding them to public/images/favicons.
{% endcomment %}
- <link rel="icon" sizes="144x144" href="{% static 'images/favicons/android-chrome-144.png' %}">
- <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16.png' %}">
- <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32.png' %}">
- <link rel="apple-touch-icon" sizes="76x76" href="{% static 'images/favicons/apple-icon-76.png' %}">
- <link rel="apple-touch-icon" sizes="120x120" href="{% static 'images/favicons/apple-icon-120.png' %}">
- <link rel="apple-touch-icon" sizes="152x152" href="{% static 'images/favicons/apple-icon-152.png' %}">
- <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-icon-180.png' %}">
- <link rel="manifest" href="{% static 'images/favicons/site.webmanifest.json' %}">
<meta name="msapplication-TileColor" content="#da532c">
- <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150.png' %}">
+ <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150x150.png' %}">
<meta name="theme-color" content="#ffffff">
+ <link rel="apple-touch-icon" href="{% static 'images/favicons/apple-touch-icon.png' %}">
+ <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
+ <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
+ <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
+ <link rel="shortcut icon" href="{% static 'images/favicons/favicon.ico' %}">
+
<!-- Twitter summary card - see https://dev.twitter.com/cards/types/summary -->
<!-- and https://dev.twitter.com/cards/getting-started -->
diff --git a/hypha/templates/styleguide.html b/hypha/templates/styleguide.html
index 35f3c3083a2bcd869c148089af7f90f20c05f953..9f14a567994ca790d7731fe7369c64849703d682 100644
--- a/hypha/templates/styleguide.html
+++ b/hypha/templates/styleguide.html
@@ -10,21 +10,18 @@
<!-- favicons -->
{% comment %}
- Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + img/favicons.
- Then favicon.ico should be copied to a directory called "public" in the application root and puppet does some magic to serve it up at the site root.
+ Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + images/favicons. Override favicons by adding them to public/images/favicons.
{% endcomment %}
- <link rel="icon" sizes="144x144" href="{% static 'images/favicons/android-chrome-144.png' %}">
- <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16.png' %}">
- <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32.png' %}">
- <link rel="apple-touch-icon" sizes="76x76" href="{% static 'images/favicons/apple-icon-76.png' %}">
- <link rel="apple-touch-icon" sizes="120x120" href="{% static 'images/favicons/apple-icon-120.png' %}">
- <link rel="apple-touch-icon" sizes="152x152" href="{% static 'images/favicons/apple-icon-152.png' %}">
- <link rel="apple-touch-icon" sizes="180x180" href="{% static 'images/favicons/apple-icon-180.png' %}">
- <link rel="manifest" href="{% static 'images/favicons/site.webmanifest.json' %}">
<meta name="msapplication-TileColor" content="#da532c">
- <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150.png' %}">
+ <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150x150.png' %}">
<meta name="theme-color" content="#ffffff">
+ <link rel="apple-touch-icon" href="{% static 'images/favicons/apple-touch-icon.png' %}">
+ <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
+ <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
+ <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}">
<link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
+ <link rel="shortcut icon" href="{% static 'images/favicons/favicon.ico' %}">
+
<link rel="stylesheet" href="{% static 'css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'css/apply/styleguide.css' %}">
{% block extra_css %}{% endblock %}