diff --git a/build.sh b/build.sh
index 5d7e653..5d24b68 100755
--- a/build.sh
+++ b/build.sh
@@ -22,5 +22,6 @@ page "article-make-regex-engine-1.typ"
 page "project-etc-nand.typ"
 page "index.typ"
 page "compiler-pattern-matching.typ"
+page "article-favicon.typ"
 
 cp build/index.typ.desktop.html build/index.html
diff --git a/common.typ b/common.typ
index b4a54ad..18e5d04 100644
--- a/common.typ
+++ b/common.typ
@@ -188,6 +188,14 @@
         padding: " + len2css(it.inset)
 }
 
+#let wimage(path, width:100%, alt:"image") = {
+  context if is-html() {
+    html.elem("img", attrs:(src:path, alt:alt, style:"width:"+len2css(width+0pt)+";"))
+  } else {
+    image(path)
+  }
+}
+
 #let html-script(code) = {
   [#context if is-html(){
   html.elem("script", code)
diff --git a/pages/article-favicon.typ b/pages/article-favicon.typ
new file mode 100644
index 0000000..5f10c9e
--- /dev/null
+++ b/pages/article-favicon.typ
@@ -0,0 +1,123 @@
+#import "../common.typ": *
+#import "../simple-page-layout.typ": *
+#import "../core-page-style.typ": *
+
+#simple-page(
+  gen-table-of-contents: true
+)[
+
+#section[
+  #title[The making of the favicon]
+
+  #sized-p(small-font-size)[
+    Written by alex_s168
+  ]
+]
+
+#let w = 38%
+
+#section[
+  The favicon of my website currently is:
+  #context wimage(res-path()+"favicon.png", width:w)
+]
+
+#let ic_url = "https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.sciencedirect.com/science/article/pii/S0890540197926432/pdf%3Fmd5%3D30965cec6dd7605a865bbec4076f65e4%26pid%3D1-s2.0-S0890540197926432-main.pdf&ved=2ahUKEwjc2NHahqaOAxXFGxAIHRgsIp0QFnoECBMQAQ&usg=AOvVaw0yzy07VkWVoJu4XSqaOqj3"
+
+#section[
+  This represents an #flink(ic_url)[interaction combinator] tree, that can be interpreted as a
+  #flink("https://en.wikipedia.org/wiki/Lambda_calculus")[lambda calculus] expression.
+]
+
+#section[
+  = Step 0: Designing the Circuit
+  I ended up with this:
+  #context wimage(res-path()+"article-favicon/step0.png", width:32%)
+  (this is the second attempt at layouting the circuit)
+]
+
+#section[
+  = Step 1: Sketching
+  While starting doing this, I realised that a wire would always overlap with the node triangles, unless I cheat.
+  Here is a visual representation of this (inacrruate):
+  #context wimage(res-path()+"article-favicon/step1_0.png", width:18%)
+
+  \
+  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:
+  #context wimage(res-path()+"article-favicon/step1_1.png", width:25%)
+
+  \
+  That however takes up too much space, so I did another variation:
+  #context wimage(res-path()+"article-favicon/step1_2.png", width:25%)
+
+  \
+  I also did another variation here, but decided to not use that.
+]
+
+#section[
+  = Step 2: Preparation for coloring
+  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.
+  #context wimage(res-path()+"article-favicon/step2.png", width:25%)
+
+  \
+  Then I used modern technology (a copier) to copy that piece of paper multiple times,
+  and also scale it up (for higher coloring details and image resolution).
+]
+
+#section[
+  = Step 3: Coloring
+  It was a disaster...
+
+  #context wimage(res-path()+"article-favicon/step3_0.png", width:70%) \
+  #context wimage(res-path()+"article-favicon/step3_1.png", width:70%)
+
+  \
+  Some variants actually look nice, but only parts of it.
+]
+
+#section[
+  = Step 4: Outsourcing the logo
+  After some time, I just gave up, and decided to ask my sister for help...
+
+  #context wimage(res-path()+"article-favicon/step4_0.png", width:70%)
+
+  \
+  I only told her (translated):
+  ```
+  Can you please color this?
+  It's supposed to be a circuit, and it will be a small logo for a website.
+  The website is mainly black and white, but this (context: persian blue) blue would work too.
+  ```
+
+  And less than half a minute later, she came up with this:
+  #context wimage(res-path()+"article-favicon/step4_1.png", width:w)
+
+  \
+  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.
+
+  \
+  I put that into the scanner, and meanwhile she experimented with different filling styles.
+
+  \
+  Then she came up with this (the final version):
+  #context wimage(res-path()+"article-favicon/step4_2.png", width:w)
+
+  Filling the drawing only took her about 20 seconds!
+]
+
+#section[
+  = Step 5: Digitall Modifications
+  As last step, I removed some of the sketch lines and some minor imperfections digitally.
+]
+
+#section[
+  = Conclusion
+  I like the final result a lot (as small logo), but it's a bit too detailed as favicon.
+  
+  I will re-visit this topic in the future.
+]
+
+]
diff --git a/pages/index.typ b/pages/index.typ
index 0163bbd..beb1ec5 100644
--- a/pages/index.typ
+++ b/pages/index.typ
@@ -29,6 +29,7 @@
     (level:1, body: [ Making a simple RegEx engine ]),
      (level:2, body: html-href("article-make-regex-engine-1.typ.desktop.html")[ Part 1: Introduction to RegEx ]),
     (level:1, body: html-href("compiler-pattern-matching.typ.desktop.html")[ Approaches to pattern matching in compilers ]),
+    (level:1, body: html-href("article-favicon.typ.desktop.html")[ Making of the favicon ]),
   )
   #br()
 
diff --git a/res/article-favicon/step0.png b/res/article-favicon/step0.png
new file mode 100644
index 0000000..f6eded7
Binary files /dev/null and b/res/article-favicon/step0.png differ
diff --git a/res/article-favicon/step1_0.png b/res/article-favicon/step1_0.png
new file mode 100644
index 0000000..bfed515
Binary files /dev/null and b/res/article-favicon/step1_0.png differ
diff --git a/res/article-favicon/step1_1.png b/res/article-favicon/step1_1.png
new file mode 100644
index 0000000..3585174
Binary files /dev/null and b/res/article-favicon/step1_1.png differ
diff --git a/res/article-favicon/step1_2.png b/res/article-favicon/step1_2.png
new file mode 100644
index 0000000..dca70e1
Binary files /dev/null and b/res/article-favicon/step1_2.png differ
diff --git a/res/article-favicon/step2.png b/res/article-favicon/step2.png
new file mode 100644
index 0000000..e51bafa
Binary files /dev/null and b/res/article-favicon/step2.png differ
diff --git a/res/article-favicon/step3_0.png b/res/article-favicon/step3_0.png
new file mode 100644
index 0000000..9400ef5
Binary files /dev/null and b/res/article-favicon/step3_0.png differ
diff --git a/res/article-favicon/step3_1.png b/res/article-favicon/step3_1.png
new file mode 100644
index 0000000..1fe304d
Binary files /dev/null and b/res/article-favicon/step3_1.png differ
diff --git a/res/article-favicon/step4_0.png b/res/article-favicon/step4_0.png
new file mode 100644
index 0000000..638689c
Binary files /dev/null and b/res/article-favicon/step4_0.png differ
diff --git a/res/article-favicon/step4_1.png b/res/article-favicon/step4_1.png
new file mode 100644
index 0000000..8e2361f
Binary files /dev/null and b/res/article-favicon/step4_1.png differ
diff --git a/res/article-favicon/step4_2.png b/res/article-favicon/step4_2.png
new file mode 100644
index 0000000..e60ea8e
Binary files /dev/null and b/res/article-favicon/step4_2.png differ