Open Source Favicon Generation & Optimisation in 2022

🌟 Open Source Favicon Tooling

In this post on open source favicon generation, we see how you can create favicons for your website or webapp from scratch using free, offline tools. We will use Inkscape to generate an SVG icon, then write a script to convert that into the PNG and ICO files needed for wide support in legacy and modern browsers. As a final step, we optimise the generated files as well as the input SVG so you can ship fewer bytes to your end users. Inkscape is an open source alternative to something like Adobe Illustrator; you can use it to create your SVG input. If you have tried Inkscape a while ago and didn’t like it because it was a little janky, I would definitely give it another go. The latest version is smooth and feels like a new and different app compared to its predecessors.

We will also use Inkscape from the command line to convert the input SVG into PNG files used by some devices for favicons. To optimise the PNG files we use OptiPNG. We can also optimise the input SVG and use Scour to do that. If that sounds interesting then let’s get the ball rolling by making sure we have all the apps we need installed.

🛠 Free Offline Favicon Generation

We will create the original favicon as an SVG file. SVG files can be used directly as favicons in modern browsers and are generally small because they use vector graphics. With vector graphics the source contains (or can easily be converted to) instructions for creating the output step by step. As an example, draw a black line, 2 px thick from here to here. This is in contrast to raster files (like PNGs) which contain details on the colour of every pixel in the image. Because they are vector-based, SVGs scale easily and without loss of quality.

If you change the icon at a later stage, it it easy just to re-run the script using the updated SVG as input. Although there are online tools for converting SVG favicons to ICO and PNG files, it can be quicker and more straight-forward to create the output locally using free, open source tooling. This is the approach we take here.

###Open Source Favicon Generation

1. We will use free open source apps such as Inkscape, OptiPNG and Scour. If you don’t have any of these installed on your machine, you can install them now. On macOS, you could use Homebrew to install them:

      brew install inkscape optipng scour
   

   On Linux, Unix or Windows use your favourite package manager instead of Homebrew to get the apps onto your machine.

2. Next, create your favicon in Inkscape and save it as Inkscape SVG once you are done. Ideally keep it square (e.g. 400 px by 400 px).

3. Now save this bash script to a file on your computer in a location that makes sense. It will

    create an `output` directory and save the generated and optimised favicon images to it.
   

        #! /usr/local/bin/bash
   
        if [ $# -eq 0 ]
          then
            echo "Usage: "$0" input_favicon.svg" 
            exit 1;
        fi
   
        SVG_SOURCE="$(echo $1)"
        OUTPUT_DIR="$(echo `pwd`)"/output
   
        # create the output directory and don't output error if it already exists
        mkdir ${OUTPUT_DIR} 2> /dev/null
   
        # generate optimised SVG
        scour ${SVG_SOURCE} "${OUTPUT_DIR}"/icon.svg --enable-viewboxing --enable-id-stripping \
          --enable-comment-stripping --shorten-ids --indent=none
   
        # generate PNGs
        inkscape -h 32 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/favicon_unoptimised.png"
        inkscape -h 180 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/apple-touch-icon_unoptimised.png"
        inkscape -h 192 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/icon-192_unoptimised.png"
        inkscape -h 512 ${SVG_SOURCE} --export-filename "${OUTPUT_DIR}""/icon-512_unoptimised.png"
   
        # optimise PNGs
        optipng -o7 -out "${OUTPUT_DIR}"/favicon.ico "${OUTPUT_DIR}""/favicon_unoptimised.png"
        optipng -o7 -out "${OUTPUT_DIR}""/apple-touch-icon.png" "${OUTPUT_DIR}""/apple-touch-icon_unoptimised.png"
        optipng -o7 -out "${OUTPUT_DIR}""/icon-192.png" "${OUTPUT_DIR}""/icon-192_unoptimised.png"
        optipng -o7 -out "${OUTPUT_DIR}""/icon-512.png" "${OUTPUT_DIR}""/icon-512_unoptimised.png"
   
        # clean up temporary files
        rm "${OUTPUT_DIR}""/favicon_unoptimised.png"
        rm  "${OUTPUT_DIR}""/apple-touch-icon_unoptimised.png"
        rm "${OUTPUT_DIR}""/icon-192_unoptimised.png"
        rm "${OUTPUT_DIR}""/icon-512_unoptimised.png"
   

   This file will probably need tab indentation instead of spaces.

4. In the Terminal change to the directory which you want the favicon created in and then run

    the script with the following command:
   

        sh optimised-favicon-generator.sh input-favicon.svg
   

   Update input-favicon.svg to the actual path of your SVG input favicon.

5. Your favicons are now production ready. See the article by Andrey Sitnik on six files that fit most favicon needs for additional help. Here we generated five optimised files (using naming conventions from that post). The sixth file is a manifest.json file which that article can help you create. See the SvelteKit favicon video to check where you need to save the files to use them with SvelteKit. There is also an Astro JS favicon video.

🔥 Favicon Optimisation

The script optimised the SVG using Scour. This removes some metadata and also shortens IDs as well as strip out comments. For the PNG files we used OptiPNG on the maximum optimisation setting. This can be slow on larger files, but for favicons should not take long. Here’s the before and after comparison of files sizes for a particular favicon, using the script:

🙌🏽 Open Source Favicon Generation: Wrapping Up

In this post we saw a modern workflow for open source favicon generation. In particular, we saw:

• how you can use Inkscape as a free Illustrator alternative for SVG favicon creation in projects,
• that you can use free open source tools such as Scour and OptiPNG to optimise favicons, shipping fewer bytes to end users,
• how to use a script to orchestrate favicon conversion as well as optimisation,

Let me know if you have some ideas for optimising the script itself. Also reach out if there are other tools you use, which other readers might benefit from. You can drop a comment below as well as reach out in the Element chat or on Twitter. You can also see the open source favicon generation script in the Rodney Lab GitHub repo.

🙏🏽 Open Source Favicon Generation: Feedback

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.