Skip to content
Posts

Theme controllable favicon and site logo

Posted on:March 23, 2023 at 01:39 PM

For a while, long enough to regret it, I though it was “Aleks Right”. But no, it was “Aleks Write!” 😅

😘 to my dear 🌶 Family

Table of contents

Open Table of contents

The “Aleks Write” site logo and favicon were crafted by incorporating a distinctive and personalized touch, even in today’s age of AI-driven design.

Process

Initially, the text was sketched by hand on a whiteboard.

original photo

A photograph was taken and transformed into vector graphics using the img2go online tool. The resulting SVG file was modified in Photopea to remove the background and craft a full website logo as well as a 36x36 favicon.svg.

vectorized photo

The stroke width is modified within the favicon.svg file using style. An @media rule is employed to invert colors in accordance with the system UI theme.

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
  <path class="a" fill-rule="evenodd" d="m19.4 2.1c-0.1 ... "/>
	<style>
    .a{stroke:#000;fill:#000;stroke-linejoin:round;stroke-width:2}
    @media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
  </style>
</svg>

browser dark-light theme

Tools