Open Source Favicon Generation & Optimisation in 2022
Tags: webdev, html, beginners
Published: 2022-05-30 14:15:38

---
title: "Open Source Favicon Generation & Optimisation in 2022"
published: "true"
description: "Open source favicon generation: create your favicon from scratch then optimise it for modern and legacy browsers using free apps in 2022."
tags: "webdev, html, beginners"
canonical_url: "https://rodneylab.com/open-source-favicon-generation/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl5es0d8a4xrpp0msio0.png"
---

## 🌟 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&rsquo;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.

!["Open source Favicon Generation: Inkscape: screenshot of Ink scape with an icon file open](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ixutgnvqcsg84g7nho3.png)

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&rsquo;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&nbsp;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:
    ```shell
      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&nbsp;px by 400&nbsp;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&nbsp;to&nbsp;it.

    ```shell
        #! /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:

    ```shell
        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 <a aria-label="Open article on favicon formats" href="https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs">article by Andrey Sitnik on six files that fit most favicon needs</a> 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 <a aria-label="See video on Svelte Kit favicons" href="https://rodneylab.com/sveltekit-favicon/">SvelteKit favicon video</a> to check where you need to save the files to use them with SvelteKit. There is also an <a aria-label="See the Astro J S favicon video" href="https://rodneylab.com/astro-js-favicon/">Astro JS favicon video</a>.

## 🔥 Favicon Optimisation

The script <a aria-label="Open Scour repo in GtiHub" href="https://github.com/scour-project/scour">optimised the SVG using Scour</a>.  This removes some metadata and also shortens IDs as well as strip out comments.  For the PNG files we used <a aria-label="Open optipng-bin repo" href="https://github.com/imagemin/optipng-bin">OptiPNG</a> on the maximum optimisation setting.  This can be slow on larger files, but for favicons should not take long.  Here&rsquo;s the before and after comparison of files sizes for a particular favicon, using the script:

| File | Before (bytes) | After (bytes) |
| :-------- | ---: | ---: |
| <code>apple-touch-icon.png</code> | 3,346 | 1,772 |
| <code>favicon.ico</code> | 798 | 545 |
| <code>icon.svg</code> | 3,110 | 1,605 |
| <code>icon-192.png</code> | 3,606 | 1,870 |
| <code>icon-512.png</code> | 10,310 | 4,530 |


## 🙌🏽 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 <a aria-label="Open Matrix Elemnt chat" href="https://matrix.to/#/%23rodney:matrix.org">Element chat</a> or on <a aria-label="Reach out on Twitter" href="https://twitter.com/intent/user?screen_name=askRodney">Twitter</a>. You can also see the <a aria-label="Open the Git Hub repo" href="https://github.com/rodneylab/open-source-favicon-generation">open source favicon generation script in the Rodney Lab GitHub repo</a>.

## 🙏🏽 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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a aria-label="Reach out on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a  aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on Astro" href="https://rodneylab.com/tags/astro/">Astro</a> as well as <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a>. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.