Favicon generation script

Favicons are a useful (and fun) part of the browsing experience.  They once were simple – just an .ico file of the right size in the root directory.  Then things got weird and computing stopped assuming an approximate standard ppi for displays, starting with mobile and “retina” displays.  The obvious answer would be .svg favicons, but, wouldn’t’ya know, Apple doesn’t support them (neither does Firefox mobile) so for a few more iterations, it still makes sense to generate an array of sizes with code to select the right one.  This little tool pretty much automates that from a starting .svg file.

There are plenty of good favicon scripts and tools on the interwebs. I was playing around with .svg sources for favicons and found it a bit tedious to generate the sizes considered important for current (2020-ish) browsing happiness. I found a good start at stackexchnage by @gary, though the sizes weren’t current recommended (per this github project). Your needs may vary, but it is easy enough to edit.

The script relies on the following wonderful FOSS tools:

• Inkscape to handle svg to png conversion
• Pngquant for png file optimization
• Imagemagick for conversion to .ico

These are available in most distros (software manager had them in Mint 19).

Note that my version leaves the format as .png – the optimized png will be many times smaller than the .ico format and png works for everything except IE<11, which nobody should be using anyway.  The favicon.ico generated is 16, 32, and 48 pixels in 3 different layers from the 512×512 pixel version.

The command line options for inkscape changed a bit, the bash script below has been updated to reflect current.

Note: @Chewie9999 commented on https://github.com/mastodon/mastodon/issues/7396 that for Mastodon, the sizes needed would be generated with the following:

size=(16 32 36 48 57 60 72 76 96 114 120 144 152 167 180 192 256 310 384 512 1024)

The code below can be saved as a bash file, set execution bit, and call as ./favicon file.svg and off you go:

#!/bin/bash

# this makes the output verbose
set -ex

# collect the file name you entered on the command line (file.svg)
svg=$1

# set the sizes to be generated (plus 310x150 for msft)
size=(16 32 48 70 76 120 128 150 152 167 180 192 310 512) 

# set the write director as a favicon directory below current
out="$(pwd)"
out+="/favicon"
mkdir -p $out

echo Making bitmaps from your svg...

for i in ${size[@]}; do
inkscape -o "$out/favicon-$i.png" -w $i -h $i $svg
done

# Microsoft wide icon (annoying, probably going away)
inkscape -o "$out/favicon-310x150.png" -w 310 -h 150 $svg

echo Compressing...

for f in $out/*.png; do pngquant -f --ext .png "$f" --posterize 4 --speed 1 ; done;

echo Creating favicon

convert $out/favicon-512.png -define icon:auto-resize=48,32,16 $out/favicon.ico

echo Done

Copy the .png files and .ico file generated above as well as the original .svg file into your root directory (or, if in a sub-directory, add the path below), editing the “color” of the Safari pinned tab mask icon. You might also want to make a monochrome version of the .svg file and reference that as the “mask-icon” instead, it will probably look better, but that’s more work.

The following goes inside the head directives in your index.html to load the correct sizes as needed (delete the lines for Microsoft’s browserconfig.xml file and/or Android’s manifest file if not needed.)

<!-- basic svg -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<!-- generics -->
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-128.png" sizes="128x128">
<link rel="icon" href="favicon-192.png" sizes="192x192">

<!-- .ico files -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

<!-- Android -->
<link rel="shortcut icon" href="favicon-192.png" sizes="192x192">
<link rel="manifest" href="manifest.json" />

<!-- iOS -->
<link rel="apple-touch-icon" href="favicon-76.png" sizes="76x76">
<link rel="apple-touch-icon" href="favicon-120.png" sizes="120x120">
<link rel="apple-touch-icon" href="favicon-152.png" sizes="152x152">
<link rel="apple-touch-icon" href="favicon-167.png" sizes="167x167">
<link rel="apple-touch-icon" href="favicon-180.png" sizes="180x180">
<link rel="mask-icon" href="/favicon.svg" color="brown">

<!-- Windows --> 
<meta name="msapplication-config" content="/browserconfig.xml" />

For WordPress integration, you don’t have access to a standard index.html file, and there are crazy redirects happening, so you need to append to your theme’s functions.php file with the below code snippet wrapped around the above icon declaration block (optimally your child theme unless you’re a theme developer since it’ll get overwritten on update otherwise):

/* Allows browsers to find favicons */
add_action('wp_head', 'add_favicon');
function add_favicon(){
?>
REPLACE THIS LINE WITH THE BLOCK ABOVE
<?php
};

Then, just for Windows 8 & 10, there’s an xml file to add to your directory (root by default in this example) Also note you need to select a color for your site, which has to be named “browserconfig.xml”

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/favicon-70.png"/>
            <square150x150logo src="/favicon-150.png"/>
            <wide310x150logo src="/favicon-310x150.png"/>
            <square310x310logo src="/favicon-310.png"/>
            <TileColor>#ff8d22</TileColor>
        </tile>
    </msapplication>
</browserconfig>

There’s one more file that’s helpful for mobile compatibility, the android save to desktop file, “manifest.json“.  This requires editing and can’t be pure copy pasta.  Fill in the blanks and select your colors

{
"name": "",
"short_name": "",
"description": "",
"start_url": "/?homescreen=1",
"icons": [
{
"src": "/favicon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ff8d22",
"display": "standalone"
}

Check the icons with this favicon tester (or any other).

Manifest validation: https://manifest-validator.appspot.com/