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">

Index

SPDX-License-Identifier: CC-BY-SA-4.0
SPDX-License-Identifier: MIT