My favicon
Motivation and basic conception
As I started to evaluate the log files for this website, I found that I had a great number of 404 errorsw caused by browsers trying to access the (non-mandatory and non-existing) faviconw. Just for the sake of having less “noise” in the log files, I decided to add one—although I have never seen the point behind them.
A brief pondering of what a suitable theme would be left me with only one natural alternative—a combination of the Swedish and German flags. A further pondering left me unable to withstand the visual pun of putting the Swedish flag in the German (in analogy with my domain name); although some other combination may have been better. Notably, cf. below, I was forced to modify some of the colors to avoid clashes; and even now a little dithering or blurring might be beneficial.
Note that I do not make any claim of artistic or aesthetic accomplishment with this work.
A few years later, one of the main targets of my writings were the evils of political correctness—and in the light of how often and with how little reason the politically correct tend to throw around accusations of various “isms”, I strongly considered altering my favicon to not include anything flag-like. (Let alone the German flag...)
While I decided against an alteration, I would like to stress that the favicon is not intended as pro-Swede(n) or pro-German(y) statement: The contents came, with very little thought and as described above, from my domain name.
Implementation
A first natural step was to start up GIMPw and try to combine two small flag-icons I had borrowed from a sports page on Wikipedia. (Depending on copyright regulations, I may or may not have had to replace them with own works later; however, at least for a proof-of-concept they sufficed.) However, as always, I found GIMP to be frustrating, user-unfriendly, and not being good at giving the user access to the power that it undeniably has—a user interface more like a typical Windows application than a Unix tool. This was particularly frustrating in this case, as the images and combination involved was so simple that a text-driven tool would have had no major problem doing it in a few lines of code—while the actual power of GIMP was not needed.
Not being overly familiar with the few text-driven tools that exist, I decided to start over from scratch with PPMw, a very basic bit/pixel-map format.
If starting over today, I would probably use SVG—Scalable Vector Graphics—instead. SVG allows full control on the text level, but uses shapes and lines directly. (While the below builds shapes and lines through manipulation on the pixel level.) On the downside, this road would have removed the opportunity for thought and experimentation—and likely caused this page to never be written.
On the above Wikipedia page, I found the following example (formatting altered):
P3
# The P3 means colors are in ASCII,
# then 3 columns and 2 rows,
# then 255 for max color,
# then RGB triplets
3 2
255
255 0 0
0 255 0
0 0 255
255 255 0
255 255 255
0 0 0
Together with the rendered image, this fortuitously provided enough clues that I did not need to study the format further, but could proceed to experiment.
In a first conclusion, it was clear that for a 16x16 image, 256 lines with three values would be needed. Obviously, this would be even worse to work with than GIMP. Fortunately, once a decent text format is present, such complications can be worked around (which is one of the reasons why so many power-users prefer text formats). In this case, the following shell script (note that it reflects a later modification to 32x32) solved my problems:
#!/bin/bash -u
Y="255 255 0"
G="255 204 0"
B="0 111 253"
R="255 0 0"
K="40 20 20"
function outputLine() {
for color in $*
do
eval echo "\\$$color"
done
}
echo ’P3’
echo ’32 32’
echo ’255’
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y
outputLine Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y
outputLine Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y
outputLine Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y Y
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine B B B B B B B B B B Y Y Y Y B B B B B B B B B B B B B B B B B B
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
outputLine K K K K K K K K K K R R R R R R R R R R R G G G G G G G G G G G
Now I just had to alter the letters in the color–letter matrix to match the
layout of the intended icon, execute the script, and convert the result to a
winiconw
with an installed image conversion tool (ppmtowinicon). Note how the
matrix at least approximates a WYSIWYG situation, while keeping the full power
of text-editing.
The reader experienced with text formats will note how much easier the above is to extend and maintain than a raw graphics files. Consider e.g. the work needed to shift the Swedish part to cover the right half of the image, or to replace it with a Norwegian version—or to take a trivial and obvious change: Assume that one of the colors turns out to be slightly off. Here it is a brief change of one line; in GIMP, the correct areas have to be selected (either manually or relying on a select-by-color mechanism) and the filled with a new color in a number of manual steps. Consider also versioning: Most graphics files are binary and not human readable, which makes many version control tools work suboptimally or not at all (notably diff-ers); with the above, no such restrictions exist.
But why stop here? Using the extremely configurable syntax highlightning of my favourite editor, Vimw, I could take the WYSIWYG part further yet. By issuing the commands
:syntax clear
:syn match Yellow / Y/
:syn match Gold / G/
:syn match Blue / B/
:syn match Red / R/
:syn match Black / K/
:hi Yellow guibg=#FFFF00 guifg=#FFFF00
:hi Gold guibg=#FFCC00 guifg=#FFCC00
:hi Blue guibg=#006FFD guifg=#006FFD
:hi Red guibg=#FF0000 guifg=#FF0000
:hi Black guibg=#281414 guifg=#281414
I reached this view—still in my plain-text editor:
Compare this with a scaled version of the actual favicon:
Beware that the proportions of the text flag will depend on the font used: In this case, the flag is marginally higher than wide—which, obviously, will not affect the eventual image: The one is just syntax highlightning of code, the other is an actual image in a graphics format.
Note that the foreground and background colors in Vim can be individually fine-tuned, e.g. to keep the letters visible or to keep a white background with color only on the letters. Doing so can make life easier when more letters are involved.
Explanation of the script and its design decisions
Logic
The principles involved are likely to be understandable without knowledge of Bash—and the principles are the important thing. For a full understanding of the script, however, at least a basic knowledge will be needed.
Basically, five letter–color mappings are defined with appropriate RGBw values: Yellow, Gold (the traditional third color in the German flag; not the Green of RGB), Blue, Red, and blacK. A function is defined that takes a string of letters and outputs the corresponding RGB values on consecutive lines. This function is called repeatedly with the right number of arguments to allow for a human-readable matrix.
This matrix is the point of the script—the rest is just scaffolding to enable
the matrix. To this purpose, it is important to represent each color with one
character so that the matrix is both symmetric in its height and width, and is
reasonably compact. Knowing that I, for now, only need five colors (the blue
and yellow of the Swedish flag, and the black, red, gold of the German) the
mapping was trivial. An interesting point, however, is that variables are
usually accessed by $Y, $G, etc. This would have implied two
characters, which is why the function outputLine calls eval
(effectively generating and referencing variables dynamically based on the
input letters).
A weakness of the script at the moment is that it has logic and data in the same file: A more general version would keep the data (the matrix) in a separate file, which is then read by the script. Should I need to, this will be an easy re-factoring. (The one interesting decision is how to handle the colors: Defined with the data? In a separate, changeable, config file? Hard-coded, as at the moment, for the color values that do occur?)
Design decisions
As stated above, the basic idea is a Swedish flag in a German flag. The proportions of the Swedish flag are correct (picked from the Swedish Wikipedia entry on the Swedish flagw:sv), but the colors have been slightly altered to combine better with the German colors. The German colors (from the German Wikipedia entry on Germany’s flagw:de) are almost correct, with just an adjustment of the black to be a little less full; however, here the layout has been thrown to the wind, both with regard to orientation and width–height proportions. The underlying consideration was to fit the German flag around the Swedish with the right color proportions and order, while filling the 32x32 square and avoiding details becoming too small. In a compromise the stripes are slightly different in size—as is necessary when dividing 32 into three integer proportions. With the chosen widths of 10–11–11, the black–red transition also co-incides with one of the blue–yellow transitions.
The winicon format was chosen mostly due to the
original purpose of avoiding 404’s, which necessitates the use of the fixed
name favicon.ico. This name can be controlled over an HTML tag; however,
this may not work with older browsers—and, surprise, Microsoft uses another
tag than the rest of the world.
A further consideration was compatibility, where winicon, as the original format, could have advantages. By a similar reasoning, a 16x16 image may have been preferable; however, this would have increased the size deviations of the German stripes (with a 5–5–6 division, in some order, replacing the current 10–11–11).
Missing images on this page
Through an oversight when re-working the template-to-HTML generation of this website, the image tags were suddenly lost. Because this is the only page with images (at the time of writing), there was a period of roughly two years before I discovered that the images were missing... I apologize for any confusion this may have caused. (The devil is in the details: The fix was trivial.)
The following is an automatically generated list of other pages linking to this one. These may or may not contain further content relevant to this topic.