From bf0a37f04ed4e9e3decb2b6c6ab7bbf91f41556c Mon Sep 17 00:00:00 2001 From: tengel Date: Sun, 16 Feb 2025 09:18:37 -0600 Subject: [PATCH] add favicon things --- Favicon-Things.md | 30 ++++++++++++++++++++++++++++++ _Sidebar.md | 1 + 2 files changed, 31 insertions(+) create mode 100644 Favicon-Things.md diff --git a/Favicon-Things.md b/Favicon-Things.md new file mode 100644 index 0000000..e556469 --- /dev/null +++ b/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 + +``` + + +``` + diff --git a/_Sidebar.md b/_Sidebar.md index c6f76cd..3c80fed 100644 --- a/_Sidebar.md +++ b/_Sidebar.md @@ -13,6 +13,7 @@ - [[Debian Upgrade]] - [[Dell OpenManage]] - [[Diff Lines]] +- [[Favicon Things]] - [[Find Examples]] - [[Forgejo Syntax Highlight]] - [[Git Combine Repos]]