Merge pull request #20291 from overleaf/as-update-favicons

Update favicons and improve PWA icon support

GitOrigin-RevId: 972aae6b3791ba61a58787414eb6507f95ee8744

services/web/app/views/_metadata.pug

@@ -38,8 +38,8 @@ else if (settings.overleaf)
 	meta(name="image", content=buildImgPath('ol-brand/overleaf_og_logo.png'))
 else
 	//- the default image for Overleaf Community Edition/Server Pro
-	meta(itemprop="image", content='/touch-icon-192x192.png')
+	meta(itemprop="image", content='/apple-touch-icon.png')
-	meta(name="image", content='/touch-icon-192x192.png')
+	meta(name="image", content='/apple-touch-icon.png')
 
 //- Keywords
 if (metadata && metadata.keywords)
@@ -68,7 +68,7 @@ else if (settings.overleaf)
 	meta(name="twitter:image", content=buildImgPath('ol-brand/overleaf_og_logo.png'))
 else
 	//- the default image for Overleaf Community Edition/Server Pro
-	meta(name="twitter:image", content='/touch-icon-192x192.png')
+	meta(name="twitter:image", content='/apple-touch-icon.png')
 
 //- Open Graph
 //- to do - add og:url
@@ -88,7 +88,7 @@ else if (settings.overleaf)
 	meta(property="og:image", content=buildImgPath('ol-brand/overleaf_og_logo.png'))
 else
 	//- the default image for Overleaf Community Edition/Server Pro
-	meta(property="og:image", content='/touch-icon-192x192.png')
+	meta(property="og:image", content='/apple-touch-icon.png')
 
 if (metadata && metadata.openGraphType)
 	meta(property="og:type", metadata.openGraphType)
@@ -112,11 +112,16 @@ meta(name="apple-mobile-web-app-capable" content="yes")
 meta(name="apple-mobile-web-app-status-bar-style" content="black-translucent")
 
 //- Icons
-link(rel="icon", href="/favicon.ico")
+link(rel="icon", sizes="32x32", href="/favicon-32x32.png")
-link(rel="icon", sizes="192x192", href="/touch-icon-192x192.png")
+link(rel="icon", sizes="16x16", href="/favicon-16x16.png")
-link(rel="apple-touch-icon-precomposed", href="/apple-touch-icon-precomposed.png")
+link(rel="icon", href="/favicon.svg" type="image/svg+xml")
-link(rel="mask-icon", href="/mask-favicon.svg", color="#138A07")
+link(rel="apple-touch-icon", href="/apple-touch-icon.png")
+link(rel="mask-icon", href="/mask-favicon.svg", color="#046530")
 
 //- Canonical Tag for SEO
 if (metadata && metadata.canonicalURL)
 	link(rel="canonical" href=metadata.canonicalURL)
+
+//- Manifest
+//- Does not currently contain a start_url to prevent browser installation prompts
+link(rel="manifest" href="/web.sitemanifest")

services/web/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="8" fill="white"/>
+<path d="M13.0748 3.19694C11.6883 2.6541 6.67193 2.45789 6.66539 5.45331C5.20038 6.38857 4.23242 7.91244 4.23242 9.5475C4.23242 11.5226 5.83478 13.125 7.80992 13.125C9.78507 13.125 11.3874 11.5226 11.3874 9.5475C11.3874 8.02362 10.4326 6.71558 9.08527 6.20544C8.82366 6.10734 8.2612 5.93075 7.81646 5.96999C7.17552 6.37549 6.3907 7.21263 6.02444 8.04978C6.57382 7.38922 7.43059 7.10145 8.1958 7.22571C9.31418 7.40884 10.1709 8.37679 10.1709 9.55404C10.1709 10.8555 9.11797 11.9085 7.81646 11.9085C7.09704 11.9085 6.4561 11.588 6.02444 11.0844C5.37696 10.3323 5.21346 9.52133 5.34426 8.72997C5.79554 5.95691 9.08527 4.38072 11.5313 3.77248C10.7334 4.19759 9.29456 4.89085 8.28736 5.64298C11.2239 6.78098 11.7014 4.30223 13.0748 3.19694Z" fill="#046530"/>
+</svg>

services/web/public/mask-favicon.svg

@@ -1,4 +1,45 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<?xml version="1.0" standalone="no"?>
-  <title>favicon</title>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
-  <path d="M6.12,4.38A7.08,7.08,0,0,0,2.67,10.2,5.07,5.07,0,1,0,9.55,5.46a4.68,4.68,0,0,0-1.8-.34A7.48,7.48,0,0,0,5.2,8.07a3.33,3.33,0,1,1,2.54,5.47A3.33,3.33,0,0,1,5.2,12.37,4,4,0,0,1,4.24,9C4.89,5.11,9.55,2.87,13,2a35.85,35.85,0,0,0-4.6,2.65c4.17,1.61,4.84-1.9,6.79-3.47C13.25.42,6.13.14,6.12,4.38Z"/>
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M4538 6996 c-1 -2 -50 -6 -108 -10 -58 -4 -118 -8 -135 -11 -16 -2
+-59 -6 -95 -9 -36 -3 -76 -8 -89 -11 -14 -2 -47 -7 -75 -10 -91 -10 -393 -75
+-519 -111 -174 -51 -292 -96 -452 -174 -494 -239 -775 -583 -860 -1050 -5 -28
+-16 -135 -19 -193 -2 -32 -5 -59 -7 -61 -2 -2 -33 -22 -69 -46 -249 -166 -542
+-425 -720 -635 -23 -27 -52 -61 -64 -75 -70 -82 -221 -300 -294 -426 -83 -143
+-227 -454 -236 -509 -1 -5 -4 -14 -8 -20 -23 -39 -106 -379 -123 -505 -3 -25
+-8 -56 -10 -70 -17 -96 -23 -332 -11 -480 11 -156 28 -255 71 -430 32 -127
+106 -317 181 -459 264 -503 704 -889 1237 -1085 222 -82 534 -139 767 -140 51
+0 272 13 295 18 11 2 40 7 65 10 641 97 1215 472 1572 1027 52 81 153 275 190
+364 66 162 124 378 144 535 3 25 8 56 11 70 9 46 11 404 2 475 -21 172 -27
+206 -56 320 -49 197 -90 307 -188 501 -111 219 -234 386 -424 574 -296 293
+-603 469 -1034 589 -77 22 -94 26 -151 37 -16 2 -32 6 -35 8 -3 2 -35 7 -71
+11 -36 4 -68 9 -73 12 -4 2 -57 5 -117 5 -104 1 -112 -1 -153 -27 -328 -216
+-716 -627 -942 -1000 -51 -83 -145 -264 -145 -277 0 -5 17 11 38 34 20 23 57
+60 81 82 25 23 54 49 64 60 41 40 211 148 300 190 85 41 249 102 301 112 12 2
+32 6 46 9 61 13 78 16 135 23 77 9 294 9 365 -1 86 -11 258 -56 338 -88 530
+-210 901 -701 949 -1254 12 -145 5 -324 -18 -423 -6 -26 -13 -58 -15 -72 -14
+-77 -83 -259 -138 -360 -115 -216 -313 -426 -531 -565 -117 -74 -338 -164
+-470 -189 -65 -13 -79 -16 -134 -23 -106 -14 -423 -6 -451 12 -4 2 -22 7 -41
+10 -91 15 -227 62 -347 121 -74 36 -139 69 -145 74 -7 6 -50 37 -96 71 -298
+217 -576 644 -657 1009 -4 19 -8 37 -9 40 -7 32 -27 155 -30 190 -10 106 -5
+319 9 415 3 17 8 53 12 80 11 84 80 344 120 455 48 131 191 416 269 535 56 86
+133 194 146 205 3 3 10 12 15 21 5 9 29 41 54 70 231 275 502 523 817 747 122
+86 385 258 413 270 8 3 35 18 60 33 102 61 186 105 390 205 118 58 224 109
+235 114 11 5 41 18 68 29 26 12 67 30 91 41 25 11 47 20 50 20 3 0 29 11 58
+24 29 13 87 36 128 51 41 15 89 33 105 40 75 33 411 142 615 200 124 36 238
+69 255 75 63 22 -3 -19 -180 -110 -463 -239 -709 -370 -970 -518 -367 -208
+-855 -523 -855 -552 0 -11 267 -102 340 -116 14 -3 41 -9 60 -14 258 -68 586
+-73 822 -11 330 86 635 309 948 696 36 44 67 82 71 85 3 3 65 84 139 180 73
+96 136 177 139 180 3 3 28 34 56 70 27 36 54 70 60 76 5 6 28 33 50 60 77 94
+233 253 314 320 l33 28 -48 19 c-102 40 -337 93 -584 132 -62 10 -209 26 -380
+41 -54 5 -707 14 -712 10z"/>
+</g>
 </svg>

services/web/public/web.sitemanifest

@@ -0,0 +1,18 @@
+{
+  "name": "Overleaf",
+  "icons": [
+      {
+          "src": "/android-chrome-192x192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+      },
+      {
+          "src": "/android-chrome-512x512.png",
+          "sizes": "512x512",
+          "type": "image/png"
+      }
+  ],
+  "theme_color": "#1b222c",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}