1 line
8.8 KiB
HTML
1 line
8.8 KiB
HTML
<!doctype html><title>The making of the favicon</title><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><link href=res/favicon.png rel=icon sizes=512x512><link href=res/favicon.png rel=image_src type=image/png><link title="alexs168's blog" href=atom.xml rel=alternate type=application/atom+xml><body><style>@font-face{font-family:DejaVu Sans Mono;src:local(DejaVu Sans Mono),url(res/DejaVuSansMono.woff2)format("woff2"),local(Courier New),local(Courier),local(monospace);font-weight:400;font-style:normal;font-display:swap}body{font-family:DejaVu Sans Mono;font-size:17pt}td{vertical-align:top;width:100%;display:inline}h1,h2,h3,h4{margin-top:1%;margin-bottom:.75%;margin-left:-.75%}p{margin-top:.75%;margin-bottom:.75%}ul{margin-top:0%}.current{font-weight:700}pre{margin-top:0;margin-bottom:0;display:inline}a,a:visited{color:#3f51b5;text-decoration:none}</style><table><tr><td><span class=sidebar><span class=column-fixed style=justify-content:center;width:25%;display:inline-flex;position:fixed><table><tr><td><span class=table-of-contents><div style="border:1.2pt solid #000;border-radius:2pt;padding:3%"><p><span style=text-decoration:underline>Table of contents</span><br><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>├─</span> <span style=flex:1><span class=headingr id=headingr-0><a href=#loc-1>Step 0: Designing the Circuit</a></span></span></span><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>├─</span> <span style=flex:1><span class=headingr id=headingr-1><a href=#loc-2>Step 1: Sketching</a></span></span></span><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>├─</span> <span style=flex:1><span class=headingr id=headingr-2><a href=#loc-3>Step 2: Preparation for coloring</a></span></span></span><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>├─</span> <span style=flex:1><span class=headingr id=headingr-3><a href=#loc-4>Step 3: Coloring</a></span></span></span><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>├─</span> <span style=flex:1><span class=headingr id=headingr-4><a href=#loc-5>Step 4: Outsourcing the coloring</a></span></span></span><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>├─</span> <span style=flex:1><span class=headingr id=headingr-5><a href=#loc-6>Step 5: Digital Modifications</a></span></span></span><p style=line-height:1.1><span style=text-indent:0;display:flex><span style=margin-right:11pt>└─</span> <span style=flex:1><span class=headingr id=headingr-6><a href=#loc-7>Conclusion</a></span></span></span></div></span><span class=table-of-contents><script>document.addEventListener(`DOMContentLoaded`,(()=>{let a=[`h2`,`h3`,`h4`].flatMap(a=>Array.from(document.getElementsByTagName(a))).sort((a,b)=>a.getBoundingClientRect().top- b.getBoundingClientRect().top);let b=document.documentElement.scrollHeight- window.innerHeight;document.addEventListener(`scroll`,c=>{let d=-(document.documentElement.getBoundingClientRect().y/b);let e=d*window.innerHeight;let f=a.map(a=>0>a.getBoundingClientRect().top- e).lastIndexOf(!0);Array.from(document.getElementsByClassName(`headingr`)).map(a=>a.classList.remove(`current`));f!=-1&&document.getElementById(`headingr-`+ f).classList.add(`current`)})}))</script><style>.table-of-contents>p>span{width:100%}</style></span><tr><td><br> <a href=index.html><b>Website Home</b></a> <br><tr><td><p>Renderings of this page:<ul><li><a onclick='gotoVariant(".min.pdf");' href=#>minimal PDF (printable)</a><li><a onclick='gotoVariant(".nano.html");' href=#>minimal HTML</a></ul><tr><td><a href=atom.xml>Atom feed</a> <br><tr><td><style>@media only screen and (width<=1200px){.sidebar{display:none!important}.column-fixed{width:0%!important}.body-column{left:3%!important}}@media only screen and (width<=1800px){.body-column>span{width:75%!important}}@media only screen and (width<=1200px){.body-column{width:97%!important}.body-column>span{width:100%!important}}.hide{background:#000;transition:background .3s linear;display:inline}.hide:hover,.hide:focus{background:0 0}</style></table><style>.column-fixed>table>tbody>tr>td>*{width:100%}</style></span></span><td><span class=body-column style=width:72%;position:absolute;left:28%><span style=width:50%;display:inline-block><div><p><br><h1>The making of the favicon</h1><p><span style=font-size:14pt><p>Git revision <a href=https://github.com/alex-s168/website/tree/c80eb6ef20acd402096f38d45bb40779fa15149b>#c80eb6ef</a><br>Modified at 26. July 2025 15:04<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><span id=loc-1 style=text-decoration:underline><h2>Step 0: Designing the Circuit</h2></span> 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><span id=loc-2 style=text-decoration:underline><h2>Step 1: Sketching</h2></span> 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><span id=loc-3 style=text-decoration:underline><h2>Step 2: Preparation for coloring</h2></span> 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><span id=loc-4 style=text-decoration:underline><h2>Step 3: Coloring</h2></span> 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><span id=loc-5 style=text-decoration:underline><h2>Step 4: Outsourcing the coloring</h2></span> 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):<div style=margin-top:4pt><span style="border:1pt solid #000;border-radius:2pt;padding:1.6pt;display:inline-block"><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></span></div><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><br><span id=loc-6 style=text-decoration:underline><h2>Step 5: Digital Modifications</h2></span> As last step, I removed some of the sketch lines and some minor imperfections digitally.</div><div><p><br><span id=loc-7 style=text-decoration:underline><h2>Conclusion</h2></span> 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></span></span><td></table><script>var gotoVariant=(a=>{window.location.href=window.location.href.replace(/\.\w+.html/g,a)});window.addEventListener(`beforeprint`,a=>{gotoVariant(`.min.pdf`)})</script><script async src=coffee.js></script> |