Throughout the year, I create a lot of small proof-of-concept (POC) style projects. Usually these consist of a single file that outputs something to the browser.
As I did before, with the logo for the pipeline components project, I thought it might be a good idea to tell you about the process I went through when creating the logo all of my smaller projects now use.
Working on my latest POC, I got really annoyed about something rather silly. I kept seeing the errors in my logs for favicon not existing.
Whenever the error popped up, I would think I had done something wrong whilst coding. But when looking closer at the error, it was just the icon missing. Again. It is only a minor distraction but when it happens often enough, it can become really annoying.
Now, I could have just created a simple
favicon.ico file or used a random image in a
<link rel=”icon” href=”https://placekitten.com/64">
But there are several drawbacks to this. For the “just create a file” approach, the major drawback is having to create (or move) the file again for each new project. Another drawback, to either approach, is that the icon does not have anything to do with the project it is used for. Especially if the icon is re-used again and again, it will be impossible to distinguish between different projects.
So I set out to make a simple logo that could be used for my future POCs.
The challenges I set myself for the design were:
- It should be vector-based (i.e. SVG)
- It should look good both small (as a favicon) and large (as project logo)
- It should be as few bytes as possible, to save bandwidth and not interfere with load times
- It should be re-usable for each new project, with only a slight variation
For whatever reason, the origami paper crane appealed to me as a starting point.
Designer bird watching
Another piece of the puzzle
In case you aren’t familiar with tangram, it is a tiling puzzle that consists of seven pieces (or “tiles”). The goal of the puzzle is to form a specific shape using all seven pieces, without any piece overlapping. Such a shape can be an abstract form, or a representation of an object, animal, or person.
There are more than five thousand different tangram problems that can be solved with only those seven pieces.
This gave me the idea to try and create a tangram version of the icon. I set to work using the online Tangram Builder on Mathigon. The tool is originally meant for kids, so it uses a rather garish color scheme, but the tool itself works really well.
The missing piece of the puzzle
It took a couple of tries to get the dimension right, but after some trial and error, I found a shape that pleased me. To have the right proportions, the final design only uses six of the seven tangram tiles. Having one piece of the puzzle missing felt somewhat fitting, as a POC is (usually) also incomplete. This facet of the design serves as a subtle emphasis on the concept of incompleteness.
With the overall design now complete, it was time to (re)create it as an SVG.
At first, I thought it might be enough to simply convert the PNG to SVG using vectorizer.io. Although the result was quite good, the underlying code felt rather verbose.
Even after using SVGOMG to optimize the code, the SVG still seemed to contain more code than should be necessary for six simple geometric figures…
So I typed out the SVG code myself.
Not counting white-space (which has been added for the sake of readability), the end result is a mere 276 characters (thus, 276 bytes).
The final piece falls into place
Here’s some totally unrelated movie trivia for you: the American actress, Debra Winger, is most well known for her roles in “An Officer and a Gentleman” (1982), “Terms of Endearment” (1983), and “Shadowlands” (1993). For each of these movies, she was nominated for the Academy Award for Best Actress. She also had two roles in the 1982 hit movie by Steven Spielberg “E.T. the Extra-Terrestrial”. She appears as “Halloween Zombie” and as “Nurse with poodle”. Both roles, however, were unaccredited. 😳
There is a quote by her that comes to mind:
There are only seven stories in the universe. And I agree with that. But give me a great variation of those stories. ~ Debra Winger
At this point, my design fulfills three of the four challenges I set myself. The only thing that still needs to be done is:
4. It should be re-usable for each new project, with only a slight variation
I wanted bright colors (I might have gotten used to the kiddie color palette), but not too bright. The hue should also work on both a white and a black background. I played around with various color schemes using Coolors. It took several iterations to find what I was looking for.
The process I went through was, more or less, this:
Now there is no longer the need to use a random, unrelated image. I can simply append the number of the POC to the web service URL and use that as a favicon:
<link rel=”icon” href=”https://favicon.potherca.workers.dev/1234" />
One picture is worth a thousand birds
To give you an idea of what the images look like and how many there are, I have included an overview of all of them, in order.
The order of the images might seem rather random. However, to quote from Shakespeare's “The Tragedy of Hamlet, Prince of Denmark”:
Though this be madness, yet there is method in ’t.
You see, the order simply comes from sorting the images based on the underlying SVG code.
I hope you enjoyed this inside look. See you next time! 👋
The design was created using the following tools and services:
The most diverse collection of icons ever. Download SVG and PNG. Millions of free icons or unlimited royalty-free icons…
Online Image Vectorizer
Online Vectorizer: Online raster to vector converter. Convert your images (jpeg, jpg or png) into scalable and clear…
UTF-8 string length & byte counter
Coolors - The super fast color schemes generator!
Generate or browse beautiful color combinations for your designs.
The web-service is hosted using Cloudflare workers: