233 lines
8.2 KiB
HTML
233 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>The making of the favicon</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="icon" sizes="512x512" href="res/favicon.png">
|
||
<link rel="image_src" type="image/png" href="res/favicon.png">
|
||
<link type="application/atom+xml" rel="alternate" title="alexs168's blog" href="atom.xml">
|
||
</head>
|
||
<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: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
/*
|
||
@font-face {
|
||
font-family: 'DejaVu Sans Mono';
|
||
src:local('DejaVu Sans Mono'),
|
||
url('res/DejaVuSansMono-Bold.woff2') format('woff2'),
|
||
local('Courier New'),
|
||
local(Courier),
|
||
local(monospace);
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'DejaVu Sans';
|
||
src:local('DejaVu Sans'),
|
||
url('res/DejaVuSans-Bold.woff2') format('woff2'),
|
||
local('Courier New');
|
||
font-weight: bold;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'DejaVu Sans';
|
||
src:local('DejaVu Sans'),
|
||
url('res/DejaVuSans.woff2') format('woff2'),
|
||
local('Courier New');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
font-display: swap;
|
||
}*/
|
||
|
||
body {
|
||
font-family: DejaVu Sans Mono;
|
||
font-size: 10pt;
|
||
}
|
||
|
||
td {
|
||
width: 100%;
|
||
display: inline;
|
||
vertical-align: top;
|
||
}
|
||
|
||
h1,h2,h3,h4 {
|
||
margin-top: 1%;
|
||
margin-bottom: 0.75%;
|
||
|
||
}
|
||
|
||
p {
|
||
margin-top: 0.75%;
|
||
margin-bottom: 0.75%;
|
||
}
|
||
|
||
ul {
|
||
margin-top: 0%;
|
||
}
|
||
|
||
.current {
|
||
font-weight: bold;
|
||
}
|
||
|
||
pre {
|
||
margin-top: 0px;
|
||
margin-bottom: 0px;
|
||
display: inline;
|
||
}
|
||
|
||
a {
|
||
color: #3f51b5;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:visited {
|
||
color: #3f51b5;
|
||
text-decoration: none;
|
||
}
|
||
</style>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br></p>
|
||
<h1>The making of the favicon</h1>
|
||
<p><span style="font-size: 9pt"><p>Git revision <a href="https://github.com/alex-s168/website/tree/c80eb6ef20acd402096f38d45bb40779fa15149b">#c80eb6ef</a></p><p><br>Modified at 26. July 2025 15:04</p><p>Written by <a href="https://alex.vxcc.dev">alex_s168</a></p></span></p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br>The favicon of my website currently is:</p>
|
||
<img src="res/favicon.png" alt="image" style="width:38%;">
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br>This represents an <a href="https://www.sciencedirect.com/science/article/pii/S0890540197926432">interaction combinator</a></p>
|
||
<p>tree, that can be interpreted as a <a href="https://en.wikipedia.org/wiki/Lambda_calculus">lambda calculus</a></p>
|
||
<p>expression.</p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br><span style="text-decoration: underline"><h2>Step 0: Designing the Circuit</h2></span> I ended up with this:</p>
|
||
<img src="res/article-favicon/step0.png" alt="image" style="width:32%;">
|
||
<p>(this is the second attempt at layouting the circuit)</p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br><span 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 src="res/article-favicon/step1_0.png" alt="image" 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 src="res/article-favicon/step1_1.png" alt="image" style="width:25%;">
|
||
<p><br>That however takes up too much space, so I did another variation:</p>
|
||
<img src="res/article-favicon/step1_2.png" alt="image" style="width:25%;">
|
||
<p><br>I also did another variation here, but decided to not use that.</p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br><span 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 src="res/article-favicon/step2.png" alt="image" 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).</p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br><span style="text-decoration: underline"><h2>Step 3: Coloring</h2></span> It was a disaster…</p>
|
||
<img src="res/article-favicon/step3_0.png" alt="image" style="width:70%;">
|
||
<p><br></p>
|
||
<img src="res/article-favicon/step3_1.png" alt="image" style="width:70%;">
|
||
<p><br>Some variants actually look nice, but only parts of it.</p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br><span 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 src="res/article-favicon/step4_0.png" alt="image" style="width:70%;">
|
||
<p><br>I only told her (translated):</p>
|
||
<div class style="margin-top:4pt;"><span style="
|
||
border:1pt solid black;
|
||
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 src="res/article-favicon/step4_1.png" alt="image" 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>
|
||
<p><br>I put that into the scanner, and meanwhile she experimented with different filling styles.</p>
|
||
<p><br>Then she came up with this (the final version):</p>
|
||
<img src="res/article-favicon/step4_2.png" alt="image" style="width:38%;">
|
||
<p>Filling the drawing only took her about 20 seconds!</p>
|
||
</div>
|
||
<div style="
|
||
|
||
|
||
|
||
|
||
"><br><span 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 style="
|
||
|
||
|
||
|
||
|
||
">
|
||
<p><br><span 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>
|
||
<p>I will re-visit this topic in the future.</p>
|
||
</div>
|
||
<script>
|
||
|
||
function gotoVariant(variant) {
|
||
window.location.href = window.location.href.replace(/\.\w+.html/g, variant);
|
||
}
|
||
|
||
window.addEventListener('beforeprint', (event) => {
|
||
gotoVariant('.min.pdf');
|
||
});
|
||
|
||
</script>
|
||
<script src="coffee.js" async>
|
||
</script>
|
||
</body>
|
||
</html>
|