Use favicons generated by realfavicongenerator.

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>

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>

hypha/static_src/src/images/favicons/site.webmanifest

+{
+    "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"
+}

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 #}

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 -->

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 %}