add favicon things

Favicon-Things.md

@@ -0,0 +1,30 @@
+# Favicon Things
+
+Website favicon which is suitable for a wide variety of browsers, without going own the Apple black hole of 50 million different sizes for iPads and whatever else you don't care about. KISS principle.
+
+Reduce the file size bloat and effort, provide a SVG, PNG and ICO and let the client choose and scale what they want.
+
+## Image
+
+Assuming the main SVG design goes edge to edge and is of a suitable square power of 2 dimension (256x256, 512x512, etc.), create a 180x180 PNG with a transparent border such that it looks better in Firefox tabs, history, etc.:
+
+ * Open SVG at 156x156 canvas
+ * Resize canvas to 180x180, centering, transparent fill, all layers
+ * Export as PNG saving alpha transparency
+
+Create a legacy ICO from this PNG using Imagemagick using the most common sizes:
+
+```
+magick favicon.png -define icon:auto-resize=64,48,32,16 favicon.ico
+```
+
+Typically the ICO file is larger than the PNG or SVG due to it's nature.
+
+
+## HTML
+
+```
+ <link rel="icon" href="favicon.svg" type="image/svg+xml">
+ <link rel="alternate icon" href="favicon.png" type="image/png">
+```
+

_Sidebar.md

@@ -13,6 +13,7 @@
 - [[Debian Upgrade]]
 - [[Dell OpenManage]]
 - [[Diff Lines]]
+- [[Favicon Things]]
 - [[Find Examples]]
 - [[Forgejo Syntax Highlight]]
 - [[Git Combine Repos]]