This is my third and final article in my series about application icons and logos. This time I am going to write about icon sizes, and why you should care for it. Granted, it’s a little bit about perfection, but it is about an easily achievable optimization. Look at those two images:

These show the same icon. The very same icon. Really. And both show the image at 32×32 pixels.

Icon Sizes

Let’s reiterate what icons are for: it’s an iconic, graphical representation of a logo, especially optimized for small sizes, like favicons, small logos or software application icons. They are meant to work at very small sizes, traditionally down to 16×16 pixels. With higher resolution displays, this super-small size might no longer be that relevant. That is why I chose 32×32 for my example above. So, we want icons to work for those small sizes. Yes, we explicitly create icons for those small sizes. And this is my argument, that we should go the extra mile also optimizing the graphics for exactly those sizes we aim for: 16×16, 24×24, 32×32, 48×48, and 64×64, traditionally.

So, what is the difference between the two images above? Let me zoom in without additional interpolation to make the difference more clearly visible:

The left image is the reference image I got from the clipart. It does show what I want to show, and might come from an external design source. But the lines do not align with the pixel grid. As a result, anti-aliasing interpolation results in the blurry visual. The right image, is the same graphics, but all the line vertices have been slightly move to align exactly with the pixel grid. The result is a much crisper appearance. And the effort it minimal. Just a duplication of the icon and touching and snapping of a couple of vertices in your favorite graphics editor. Totally worth it.

Ok, so, can’t we just optimize for 16×16 and we are good?

No. For one, 16×16 is very very small, and as written above looses it’s importance in the age of high resolution displays. Similar to the abstraction from a logo to and icon, as written in my first article of this series, many icons simplify and remove details when they go down from 32×32 pixel sized versions to the 16×16 pixel sized versions:

And the second reason are the in between sizes, infamously the 24×24 pixels. It’s a scaling factor of 1.5x from the 16×16 version. Any line might end up again in between pixels and blurry if you just scale up.

So, it does make sense to create multiple sizes of the icon, each with optimized placement of the graphics’ vertices. At some point, depending on the complexity of the icon’s graphics, further upscaling is irrelevant, and can be done automatically. The 64×64 pixel size is a traditional point for this.

Personally, I usually try to design icons at 32×32 pixels. The 64×64 pixel and 256×256 pixel versions are then automatic upscales, but are always explicitly included in the icon files. The three traditional sizes still missing, 16×16, 24×24, and 48×48 pixels, are the manually optimized for crisper appearance. Of course, this approach is just a starting point, and sometimes the reference is at a different size.

The Straight Lines

So, all this is only about straight horizontal and vertical lines, as only those could perfectly align with the pixel grid? No. Any shape loses detail and gets increasingly blurry at smaller sizes. I wrote above that the reduction of graphical detail might be needed when going down in size. That is true for all shapes. And it might not only be a _reduction_. Sometimes an alteration or even complete replacement of a shape might make sense, as in the example above. Especially, when going to 16×16 pixels in size, the concepts of pixel art, with their reduction of most detail an especial emphasize on other detail is worth a thought:

The right image show the clipart original. The center image shows the vector graphics of the 16×16 pixel image on the left. Look at the strap of the helmet. That is no longer curved at all. Instead it emphasizes on a couple of full pixels for the overall shape, and a couple of partially filled pixels for explicit an controlled anti-aliasing.

Summary

Icons are meant as very small sized representations of a logo and for your application, web page, or similar. As it is their purpose, I argue we should care for optimizing for those sizes as well!

  • Shapes, especially, but not limited to, horizontal and vertical lines, should be placed precisely at pixel grid boundaries to avoid blurriness due to interpolation.
  • 16×16, 24×24, 32×32, and 48×48 pixel sized versions of an icon benefit most from manual optimization, maybe even graphics detail reduction or shape alteration
  • Whatever we do, let’s keep quality always in mind.

So, an SVG, which is only one image at one size could be used as an icon image data source. But if used for all sizes, it will always fall short in the visual quality on some sizes, compared to explicit pixel-based graphics, optimized for that specific size.

Series

Posted on No Comments Posted in Graphical Design Tagged with ,

Some time ago I started a section on my website here about tools I use and like. I started that series writing about the Everything search tool by Voidtools, which is lightning fast and awesome.

Since then I integrate Everything into several internal tools of mine. Most of the time, I used the Everything command line client and parsed its output. However, I had some trouble with Unicode file names. Then I looked at Dotnet library solutions, namely Everything .Net Client and EverythingNet. Both are basically only P/Invoke wrappers around the Everything SDK, which itself is a wrapper around Interprocess Calls (IPC) to the Everything service. And so, since I know my stuff around low level techniques like Windows Message based IPC, and since I don’t like wrappers of wrappers of functions, I decided to write a library of my own: Everything Search Client

It is a .Net 6.0 library, completely written in CSharp, with some P/Invoke calls to native Windows functions of the Operating System, and directly talking to the Everything service.

The code is available on Github and the ready-to-use nuget package is on Nuget.org.

If you find it useful and use it in a tool of your own, I would love to hear about it: Used By, How to Contribute

Posted on No Comments Posted in My Tools, Nuget Tagged with ,

Git has this cursed function to fuck up your files by doing unspeakable things to your line endings.

For example, from Githubs Documentation on Line Endings:

On Windows, you simply pass true to the configuration. For example:

$ git config –global core.autocrlf true

Please, never never never never never never never never never never never never do this!

THERE IS NO REASON TO DO IT!

Git is here to keep track of our files, NOT TO CHANGE OUR FILES IN ANY WAY.

So, please, just, never never never never never never never never never never never never do this! Leave my file endings alone!

Posted on No Comments Posted in General Tagged with

Just recently, I read this article on Golem about Mouse Without Borders (in German).

Mouse Without Borders (http://www.aka.ms/mm)

My current project at work revolves around network communication. For several reasons I cannot work with a single computer and simulated networks, but I need two physical machines to do my work. And I hate switching keyboards and mice all the time. But, I thought, “how many people have such a problem. Surely not many.” So, I accepted it. And now, Mouse Without Borders comes totally unexpected to my aid. Awesome! And it works!

Posted on No Comments Posted in Tool Links Tagged with

You might notice that the Shields.io badges, for the Nuget Packets I am maintaining, have been gone for some days and are now replaced by a simple table. What happened?

It happened with this decision of a German court that using Google Fonts from their CDN server hosted in the US can pose a privacy violation when used without user consent. Apparently, some predatorial lawyers are already on the hunt. Thus, I changed all my websites to host the fonts I am using in the same servers. While I was sort of angry about the extra effort I had to take, I understand the importance of data privacy, and, in that light, I can understand the decision. So, that is about the Google Fonts. What about anything else?

My goal was to change my website to either host everything myself, or to explicitly request content for any embedded content. And that is why Shields.io is no longer directly used on my website. Call me paranoid if you will, but I think this might be an improvement also on content “stability”. Now, my backend fetches all the data I need, store it at my own host, and delivers it as a local part of my web site. In this case, I even changed fetching the data to a cron job running once a day. I am not that fast with Nuget packing anyway.

ReleaseNuget
everythingsearchclientEverything Search Client
https://github.com/sgrottel/EverythingSearchClient		0.3
2022-12-21		✅0.3.0.28
2022-12-21
glfwGLFW
https://www.glfw.org		3.3.8
2022-07-22		✅3.3.8
2022-07-23
glmGLM
https://glm.g-truc.net/		0.9.9.8
2020-04-13		✅0.9.9.800
2020-04-17
luaLua
https://www.lua.org/		5.4.4
2022-01-13		✅5.4.4.1
2022-12-20
gflagsgflags (static)
https://github.com/gflags/gflags		2.2.2
2018-11-11		✅2.2.2.33
2020-07-05
libyamlLibYAML
https://github.com/yaml/libyaml		0.2.5
2020-06-01		✅0.2.5.12
2020-07-05
State of 2023-03-27 00:00:01

With this, now all content displayed on sgrottel.de is delivered from the servers sgrottel.de is hosted on.

The downside, of course, is that this poses an additional maintenance burden on me. The backend is calling semi-documented Apis, which might change any time, and it does some fragile parsing, e.g., in case of the not so structured Lua project website. The current solution cannot be a final solution, and it will need to be improved in the future. We will see.

Posted on 2 Comments Posted in General

I present a new little tool with very specific purpose: OpenHere

It detects running instances of the Windows File Explorer. From the top-most instance it, fetches the opened path, and any selected files. You can use the command line application to retrieve this information. Or you can use the GUI application, displaying a tool window to select and open one of up to twelve configured tools.

My keyboard has several freely assignable macro keys, which I did not use for years. Simply, because I had no idea what to do with them. Then, Windows 11 came along. One of the maybe most criticized features is the new context menu in the file explorer, hiding away most functions you might or might not want to call on files and folders. That’s when I thought, it would be nice to use the macro keys to trigger something on the selected file, like opening it in Notepad++ or open the whole folder in Visual Studio Code or in Fork or something like that. And that’s what I wrote OpenHere for.

I learned quite a bit about the low level icon handling and loading of large icons, and I got to get more experience working with WPF.

Posted on No Comments Posted in My Tools Tagged with

Today I release a new version of my Checkouts Overview tool.

Version 1.1 is a feature release, improving the scanning of your hard disks searching for repository checkouts, and adding the ability to perform a git fetch while updating the entry status.

Some minor improvements to the UI also provide a more consistent look and feel.

Grab the release from Github: Release Feature Release v1.1 – Better Disk Scanning and Git Fetch · sgrottel/checkouts-overview (github.com)

Posted on No Comments Posted in My Tools Tagged with , ,

Okey, a warning up ahead: this is a venting post, because I am really upset and disappointed by my most recent experience with customer service by Lenovo.

Over a year ago, I bought a ThinkPad laptop with matching docking station. And the two never worked perfectly. Sometimes the docking stations would lose the signal to the attached monitor. Sometimes it would not switch on during boot, etc. All issues which could be fixed by either un-plugging and re-plugging or, in worse cases, by turning it off and on again.

Now, recently the docking station learned a new trick: it’s ethernet port started failing. First, sometimes, and then consistently always. The supposedly good thing is, the failure is reflected in the Windows Device Manager by one USB device reporting a startup error, and that at some point, it failed always, 100%. That’s something a customer service should be able to understand and fix, right. In worst case, even when they cannot reproduce the issue, they could see the error descripting and just replace the ethernet component, right. So, I decided to give it a try.

First contact, several weeks ago, worked as expected. I was asked to replace cables, reinstall clean software etc. All understandable. A Lenovo provided cable might be incompatible, it’s better to switch to something from Amazon. And after a clean Windows 10 reinstallation on a formatted hard drive reports exactly the same USB device error in the Device Manager as before, you might start believing it might really be a hardware issue.

So, at that point, the customer service agreed on me sending in the device to a service center. To my very surprise, they asked me to send in the laptop. Only the laptop. Not the docking station. Strange, but ok. I was prepared for a “long journey” anyway. So, I send in the laptop, together with a detailed description of what’s going on, and of how to reproduce the error. That is error description number one. That is important for the conclusion.

After roughly a week the laptop returns to me with a repair report in the package. I really do not understand why Lenovo has a customer service website tracking their report tickets. They provide absolutely no information on that website other that the tracking numbers of the postal services they use. It’s useless. Anyway. The repair report stated that they replace the mainboard and the ethernet port of the laptop. Funny. I clearly stated that the ethernet port of my docking station is acting up. Well, whatever. Interestingly, however, the occasionally issue with the monitor not being detected have disappeared since then. So, I think, there was something wrong with the mainboard. Ok.

But the issue with the ethernet port of my docking station is still broken. 100% of all the time. So, I create a Lenovo Customer Service Escalation to the unresolved issue. Round two started with me providing a detailed error description of the issue and of the steps to reproduce it (basically: connect laptop, boot, see error! Minimal setup with Laptop + Dock + 3 cables: laptop-dock connection, power supply, ethernet). After some more “experimentation” with software, I finally get to send in my device to the service center, again. To my surprise, Lenovo asked me to send in both the laptop and the docking station, as it might be an issue of the combination of both. Strange, but whatever, ok. So, I send in both.

Then, after half a week, the useless report status website switches to the status “on hold.” At that point I was rather certain, that this would not end well. Then, almost a week after I sent in the devices I get an e-mail from customer service, telling me that they cannot reproduce my problem. I am very surprised. I can only imagine that they never turned on the laptop, but that they were only search of scratches of the housing. More importantly, however, they ask me to provide a detailed error description! Otherwise, they would send back my device. I mean, honestly, I already provided detailed error descriptions and step-by-step descriptions to reproduce the error. Twice. But ok!

At the same day, I write an answer to that e-mail, with, again, a detailed error description and a step-by-step description of the minimal setup to reproduce the error, remember: the two devices and three cables, and a new, clean Windows 10 installation with only all updates installed. Easy enough. It is worth noting, that I wrote those three different error descriptions all anew. It was not one text copy-pasted three time. It was three texts, all always in the context of the questions and requests from customer service, all detailed, all clear, all polite. … Three times!

Because the customer service gave me a deadline of two days to send in this information, I contacted them directly via the web live chat on the day after I received the e-mail and I sent in the information. There a friendly customer service agent, or really well-designed bot, confirmed that my e-mail was received and forwarded to the service center agent. Ok.

Then, almost a second week later, my devices were sent back to me, Laptop and docking station. And, the big surprise was the repair report included in the package this time:

They explicitly stated that they did not “repair” anything, because they never got the required information from me.

…

Three times!

…

And, by the way, the ethernet port of my docking station is still broken. 100% of the time. 100% reproducible. Always. With a defective USB device being reported in the Windows Device Manager. 100% of the time. Always.

…

Three times!

Posted on No Comments Posted in General