Bring back a decent favicon

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile b/Makefile
index 14c3ec15c13a5b5a8c2d4980ca217447ad8bf626..e5df8037d41d59ab52b571951ce51c9c5c7fb26e 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -16,7 +16,16 @@ FILES = \
        logo-square-64x64.png \
        logo-square-128x128.png \
        logo-square-256x256.png \
-       logo-square-512x512.png
+       logo-square-512x512.png \
+       \
+       favicon.svg \
+       favicon-16x16.png \
+       favicon-32x32.png \
+       favicon-64x64.png \
+       favicon-128x128.png \
+       favicon-256x256.png \
+       \
+       apple-touch-icon.png
 
 OBJECTS = \
        $(foreach style,$(STYLES),$(foreach file,$(FILES),$(style)/$(file)))
@@ -71,6 +80,12 @@ standard/logo-square.svg: logo-square.svg
 %/logo-square.svg: logo-square-%.svg
        $(TO_PATHS)
 
+standard/favicon.svg: favicon.svg
+       $(TO_PATHS)
+
+%/favicon.svg: favicon-%.svg
+       $(TO_PATHS)
+
 # Converts the logo to PDF
 %/logo.pdf: %/logo.svg
        mkdir -p $(dir $@)
@@ -114,6 +129,32 @@ standard/logo-square.svg: logo-square.svg
        mkdir -p $(dir $@) && \
        $(INKSCAPE) --export-width=512
 
+# Converts the favicon to PNG
+%/favicon-16x16.png: %/favicon.svg
+       mkdir -p $(dir $@) && \
+       $(INKSCAPE) --export-width=16
+
+%/favicon-32x32.png: %/favicon.svg
+       mkdir -p $(dir $@) && \
+       $(INKSCAPE) --export-width=32
+
+%/favicon-64x64.png: %/favicon.svg
+       mkdir -p $(dir $@) && \
+       $(INKSCAPE) --export-width=64
+
+%/favicon-128x128.png: %/favicon.svg
+       mkdir -p $(dir $@) && \
+       $(INKSCAPE) --export-width=128
+
+%/favicon-256x256.png: %/favicon.svg
+       mkdir -p $(dir $@) && \
+       $(INKSCAPE) --export-width=256
+
+# This is like the favicon but in 180x180px
+%/apple-touch-icon.png: %/favicon.svg
+       mkdir -p $(dir $@) && \
+       $(INKSCAPE) --export-width=180
+
 # Convert the logo to monochome only
 %-monochrome.svg: %.svg
        $(TO_MONOCHROME)
@@ -126,7 +167,13 @@ standard/logo-square.svg: logo-square.svg
 clean:
        # Remove all generated objects
        rm -vf $(OBJECTS)
-       rm -vf logo-inverted.svg logo-monochrome.svg logo-square-inverted.svg logo-square-monochrome.svg
+       rm -vf \
+               logo-inverted.svg \
+               logo-monochrome.svg \
+               logo-square-inverted.svg \
+               logo-square-monochrome.svg \
+               favicon-inverted.svg \
+               favicon-monochrome.svg
 
 .PHONY: upload
 upload: $(OBJECTS)

diff --git a/favicon.svg b/favicon.svg
new file mode 100644 (file)
index 0000000..78f5bd9
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@700&amp;display=swap');
+    </style>
+  </defs>
+
+  <!--
+    Bar: 40px at bottom (y=472).
+    Usable height: 472px.
+    IP font-size 420, cap-height ~= 420 * 0.72 = 302px
+    Top padding: (472 - 302) / 2 = 85px
+    IP baseline: 85 + 302 = 387px
+  -->
+  <text
+    x="256"
+    y="387"
+    text-anchor="middle"
+    font-family="'Prompt', sans-serif"
+    font-weight="700"
+    font-size="420"
+    fill="#363636">IP</text>
+
+  <!-- Thin pink bar flush to bottom -->
+  <rect x="0" y="472" width="512" height="40" fill="#ff2e52"/>
+
+</svg>