1 line
3.7 KiB
HTML
1 line
3.7 KiB
HTML
<!doctype html><title>The making of the favicon</title><meta charset=utf-8><body><div><p><br><h1>The making of the favicon</h1><p><span style=font-size:9pt><p>Last modified: 26. July 2025 15:04 (Git #<code><code style=white-space:pre-wrap>c80eb6ef</code></code>)<p>Written by <a href=https://alex.vxcc.dev>alex_s168</a></span></div><div><p><br>The favicon of my website currently is:</p><img alt=image src=res/favicon.png style=width:38%></div><div><br>This represents an <a href=https://www.sciencedirect.com/science/article/pii/S0890540197926432>interaction combinator</a> tree, that can be interpreted as a <a href=https://en.wikipedia.org/wiki/Lambda_calculus>lambda calculus</a> expression.</div><div><p><br><h2>Step 0: Designing the Circuit</h2><p>I ended up with this:</p><img alt=image src=res/article-favicon/step0.png style=width:32%><p>(this is the second attempt at layouting the circuit)</div><div><p><br><h2>Step 1: Sketching</h2><p>While starting doing this, I realised that one wire always overlaps with one node triangle, unless I cheated. Here is a visual representation of this (inaccurate):</p><img alt=image src=res/article-favicon/step1_0.png style=width:18%><p><br>This means that I have to modify the layouting from step 0 a bit, which is unfortunate, but in retrospect, I think that it makes the result look better:</p><img alt=image src=res/article-favicon/step1_1.png style=width:25%><p><br>That however takes up too much space, so I did another variation:</p><img alt=image src=res/article-favicon/step1_2.png style=width:25%><p><br>I also did another variation here, but decided to not use that.</div><div><p><br><h2>Step 2: Preparation for coloring</h2><p>I colored the back side of the piece of paper which contains the sketeches with a pencil, put a white piece of paper behind it, and then re-traced the line, to get a lighter version of the sketch onto the white paper.</p><img alt=image src=res/article-favicon/step2.png style=width:25%><p><br>Then I used modern technology (a copier) to copy that piece of paper multiple times, and also scale it up (to allow for more details).</div><div><p><br><h2>Step 3: Coloring</h2><p>It was a disaster…</p><img alt=image src=res/article-favicon/step3_0.png style=width:70%><p><br></p><img alt=image src=res/article-favicon/step3_1.png style=width:70%><p><br>Some variants actually look nice, but only parts of it.</div><div><p><br><h2>Step 4: Outsourcing the coloring</h2><p>After some time, I just gave up, and decided to ask my sister for help…</p><img alt=image src=res/article-favicon/step4_0.png style=width:70%><p><br>I only told her (translated):<p><code><pre><code>Can you please color this?<br>It's supposed to be a circuit, and it will be a small logo for a website.<br>The website is mainly black and white, but this (context: persian blue) blue would work too.</code></pre></code><p>And less than half a minute later, she came up with this:</p><img alt=image src=res/article-favicon/step4_1.png style=width:38%><p><br>We considered that the logo will end up being quite small, so “we” wanted it to look good when zoomed out. This is a pretty nice idea, because the different colored wires end up blending together nicely.<p><br>I put that into the scanner, and meanwhile she experimented with different filling styles.<p><br>Then she came up with this (the final version):</p><img alt=image src=res/article-favicon/step4_2.png style=width:38%><p>Filling the drawing only took her about 20 seconds!</div><div><p><br><h2>Step 5: Digital Modifications</h2><p>As last step, I removed some of the sketch lines and some minor imperfections digitally.</div><div><p><br><h2>Conclusion</h2><p>I like the final result a lot (as small logo), but it’s a bit too detailed as favicon.<p>I will re-visit this topic in the future.</div> |