Add SVG favicon (#12437)

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

build/generate-images.js

@@ -6,6 +6,7 @@ const {fabric} = require('fabric');
 const {DOMParser, XMLSerializer} = require('xmldom');
 const {readFile, writeFile} = require('fs').promises;
 const {resolve} = require('path');
+const Svgo = require('svgo');
 
 function exit(err) {
   if (err) console.error(err);
@@ -20,6 +21,25 @@ function loadSvg(svg) {
   });
 }
 
+async function generateSvgFavicon(svg, outputFile) {
+  const svgo = new Svgo({
+    plugins: [
+      {removeDimensions: true},
+      {
+        addAttributesToSVGElement: {
+          attributes: [
+            {'width': '32'},
+            {'height': '32'},
+          ],
+        },
+      },
+    ],
+  });
+
+  const {data} = await svgo.optimize(svg);
+  await writeFile(outputFile, data);
+}
+
 async function generate(svg, outputFile, {size, bg, removeDetail} = {}) {
   const parser = new DOMParser();
   const serializer = new XMLSerializer();
@@ -67,6 +87,7 @@ async function generate(svg, outputFile, {size, bg, removeDetail} = {}) {
 
 async function main() {
   const svg = await readFile(resolve(__dirname, '../assets/logo.svg'), 'utf8');
+  await generateSvgFavicon(svg, resolve(__dirname, '../public/img/favicon.svg'));
   await generate(svg, resolve(__dirname, '../public/img/gitea-lg.png'), {size: 880});
   await generate(svg, resolve(__dirname, '../public/img/gitea-512.png'), {size: 512});
   await generate(svg, resolve(__dirname, '../public/img/gitea-192.png'), {size: 192});

public/img/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 135.467 135.467" width="32" height="32"><path d="M27.71 33.618c-9.547-.028-22.34 6.798-21.632 23.904C7.184 84.25 31.535 86.73 41.27 86.945c1.068 5.013 12.522 22.305 21.002 23.216h37.152c22.278-1.668 38.961-75.756 26.594-76.038-46.782 2.477-49.996 2.138-88.6 0-2.495-.027-5.972-.495-9.708-.505zm2.491 9.458C31.553 56.77 33.757 64.78 38.22 77.02c-11.382-1.505-21.07-5.225-22.851-19.11-.951-7.411 2.39-15.168 14.833-14.834z" fill="#609926" stroke="#428f29"/><g fill="#fff"><rect width="34.762" height="34.762" x="87.509" y="18.292" transform="rotate(25.915)" ry="5.483"/><path d="M79.805 57.36l3.241 1.609V35.256h-3.263z"/></g><g class="detail-remove"><circle transform="rotate(-19.796)" r="3.475" cy="90.078" cx="49.065" fill="#609926"/><circle transform="rotate(-19.796)" r="3.475" cy="102.105" cx="36.81" fill="#609926"/><circle transform="rotate(-19.796)" r="3.475" cy="111.439" cx="46.484" fill="#609926"/><path fill="#609926" d="M79.54 58.936l2.402 1.172L69.98 84.605l-2.402-1.172z"/><path d="M76.558 68.116c12.976 6.396 13.013 4.102 4.891 20.908" fill="none" stroke="#609926" stroke-width="2.68"/></g></svg>

templates/base/head.tmpl

@@ -58,7 +58,8 @@
 			{{end}}
 		};
 	</script>
-	<link rel="shortcut icon" href="{{StaticUrlPrefix}}/img/favicon.png">
+	<link rel="icon" href="{{StaticUrlPrefix}}/img/favicon.svg" type="image/svg+xml">
+	<link rel="alternate icon" href="{{StaticUrlPrefix}}/img/favicon.png" type="image/png">
 	<link rel="mask-icon" href="{{StaticUrlPrefix}}/img/gitea-safari.svg" color="#609926">
 	<link rel="fluid-icon" href="{{StaticUrlPrefix}}/img/gitea-lg.png" title="{{AppName}}">
 {{if .RequireSimpleMDE}}