#webstorm

A favicon is the little picture that appears in a browser tab. The one I’ve been using had relatively dull colours from the old palette so my goal was to get the favicon to look as nice as the one on this Tumblr blog. It’s very bright and crisp.

The first pic is the current icon, while the second is the Tumblr blog. At some point I updated the Tumblr blog’s avatar to the new one and since Tumblr automatically generates your blog’s favicon from your avatar that was updated too.

Okay, change the favicon. Five minute job, right? Well, it turned out to be surprisingly tedious...

First off, I wanted to be able to save the .ico file in Photoshop — I hate depending on online tools unless it’s absolutely necessary. I found a plugin that allowed saving in .ico format but it neglected to mention that if your file is larger than 256 x 256 pixels the option won’t even show up in the save menu.

At this point I tried an online converter and it generated a bunch of files for all different devices that you can see above. (Holy fuck, I just wanted an icon for my site!) For reasons I’ll go over in a second, I’m not going to use these files but it was useful to have a list of all the different dimensions and the code to use with them.

As you can see from that list the files are of various sizes, the largest being 310 x 310 pixels (I cropped the image that’s why it’s not in the list). So the online generator needs an image of at least that size or it’ll be up-scaling to create the larger icons. Which is bad.

Down-scaling is fine provided you choose the right algorithm... which this generator site doesn’t. Down-scaling results is a blurry image, rather than the crisp image Tumblr produced from my avatar. At this point I figured out that the Photoshop plugin needs an image less than 256 x 256 pixels. So I downscaled it myself using the Bicubic Sharper resampling method.

So, that was that! As you can imagine, this blurry problem affects all the generated files. I’m gonna just manually downscale the icon to all the different sizes so that it’s crisp for them as well but re-use the generated file names and code.

Syntax Theme Fail

I briefly attempted to make a syntax highlighting theme that uses StoryDevs’ colours and uh... it doesn’t look very good. I tried. Gonna stick to what I have. Maybe it could work with more thought put into it but it’s not something I can really justify doing right now.

New Editor

Not exactly news but I switched from WebStorm to Sublime Text 3 recently. WebStorm is just too slow. Sometimes it’ll take literally 5 minutes to open while Sublime takes maybe 1 - 5 seconds to open. Naturally the first thing I did was install a nice theme:

Sublime has been great so far and is quite easy to extend. WebStorm was mistakenly identifying “errors” in my code that I couldn’t turn off, which meant I always had red highlights in the scroll bar. In general WebStorm is a very hand-hold-y, “I know better than you” type editor and that irritated me a lot.

StoryDevs is a place for developers of visual novels and story-oriented games to find each other and collaborate. The site is under development but handle reservations are open: www.storydevs.com/reserve

This article explains how to install WebStorm on Ubuntu 24.04. WebStorm is an Integrated Development Environment (IDE) developed by JetBrains specifically for JavaScript and related technologies. It provides intelligent code completion, error detection, and helpful suggestions, enabling you to write clean and efficient code. WebStorm offers support for Git, Mercurial, and other version control…