Website/content/docs/graphics/logo-design/_index.md

---
title: 'Logo Design'
date: 2024-01-27T20:13:10+01:00
draft: true
---

I'm not that much into graphics design and this is not supposed to be a full
tutorial on how to create a logo. However, I'd like to share my experiences with
[Inkscape](https://inkscape.org/) and [GIMP](https://www.gimp.org/) for creating
the logo and favicon of this site.

## Getting inspired

First of all I inspect other logo designs by searching for vector images using
the terms `music` and `logo` in the [Pixabay](https://pixabay.com/) community.

{{< icon "link" >}} URL: https://pixabay.com/vectors/search/music%20logo/

The idea of using notes appeals to me and as I also want to convey the spirit of
[FLOSS](https://fsfe.org/freesoftware/comparison.en.html) I need to extend it by
something that represents its characteristics. I remember that in the logo of
the Gitea fork [Forgejo](https://forgejo.org/) the letter `F` is shown as a
forking path and want to combine it with notes.

## Creating shapes

I run Inkscape and create a new document from template (`<Ctrl><Alt><N>`) and
choose *Icon 512x512* in the *Others* tab. Using the rectangle and ellipse tool
I create the note head, stem and flag by scaling and rotation. Learn more about
[shapes](https://inkscape.org/doc/tutorials/shapes/tutorial-shapes.html) in the
official tutorial.

![Inkscape rotate object](inkscape-rotate-object.png)

To indicate the fork at the top of second note's flag an ellipse without filling
is used. For the purpose of recognizing the note head and fork symbol as unit I decide to also leave out the filling of the note head making it a half note.
This decision is reflected in the colorization of the elements, too. The colors
are selected in the *fill and stroke* dialog of the object menu explained in the
[basic](https://inkscape.org/doc/tutorials/basic/tutorial-basic.html) tutorial.
Finally, adjusting the *z-order* of the objects creates the layering.

Before saving the document as [SVG](https://en.wikipedia.org/wiki/SVG), useful
meta data can be added by opening the document settings (`<Ctrl><Shift><D>`) and
selecting the *Meta data* tab. Additionally, the *License* tab allows to
integrate URLs and the license deed and granted rights. Besides saving this file
for further editing, I use the export dialog (`<Ctrl><Shift><E>`) to create a
*Plain SVG* file leaving out Inkscape specific meta data which supports to
decrease the file size.

## Serving diversity
 
The shapes of the logo are simple and recognizable. Thus, it can be perfectly
used as [favicon](https://en.wikipedia.org/wiki/Favicon) for the website. Though
recent browsers and devices can render SVG files for this resource, it's good 
practice to serve other file types. Consequently, the last step is to convert
(and if necessary scale) the SVG file to support older browsers and devices.

I open the SVG file in GIMP and confirm the dialog to render the Scalable Vector
Graphics using default settings. Depending on the target file type and device I [scale](https://docs.gimp.org/en/gimp-image-scale.html) the image and convert it
via the [export dialog](https://docs.gimp.org/en/gimp-export-dialog.html) using
the dimensions (in pixels) and file types shown in the table.

| Dimensions | File type | Additional info |
|------------|-----------|-----------------|
| 512 x 512  | PNG       | |
| 192 x 192  | PNG       | |
| 180 x 180  | PNG       | Apple devices |
|  48 x  48  | ICO       | 32 bpp, 8-bit alpha, no palette settings |
|  32 x  32  | PNG       | |
|  16 x  16  | PNG       | |

You can also use Inkscape on the terminal to create these files:

```bash
inkscape --export-width=512 --export-filename="android-chrome-512x512.png" logo.svg
inkscape --export-width=192 --export-filename="android-chrome-192x192.png" logo.svg
inkscape --export-width=180 --export-filename="apple-touch-icon.png" logo.svg
inkscape --export-width=32 --export-filename="favicon-32x32.png" logo.svg
inkscape --export-width=16 --export-filename="favicon-16x16.png" logo.svg
```

The file `favicon.ico` is created via Inkscape and the `convert` command of the
[ImageMagick](https://imagemagick.org/) tool suite:

```bash
inkscape --export-width=48 --export-filename="favicon-tmp.png" logo.svg
convert favicon-tmp.png favicon.ico
rm favicon-tmp.png
```

## Adding a manifest

For a [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app)
(PWA) create a [manifest](https://developer.mozilla.org/en-US/docs/Web/Manifest) 
file. At least provide the following values to serve different icon sizes and
change `<your-name>` to fit your needs:

```json {filename="site.webmanifest"}
{
  "name": "<your-name>",
  "start_url": "index.html",
  "display": "standalone",
  "icons": [
    {
      "src": "android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```
The [icons](https://developer.mozilla.org/en-US/docs/Web/Manifest/icons) array
contains the images to be used when integrated as an app in the target OS.
Learn more about the members in the manifest file and best practices for
[PWAs](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) in the
MDN Web Docs.