blob: 8c2caf8fce5f3772aa1eee7cde5609d05c43dc20 (
about) (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
#
msgid ""
msgstr ""
msgid ""
"title: SVG favicon\n"
"date: 2020-12-29\n"
"layout: post\n"
"lang: en\n"
"ref: svg-favicon"
msgstr ""
msgid ""
"I've wanted to change this website's favicon from a plain `.ico` file to a "
"proper SVG. The problem I was trying to solve was to reuse the same image on"
" other places, such as avatars."
msgstr ""
msgid ""
"Generating a PNG from the existing 16x16 icon was possible but bad: the "
"final image was blurry. Converting the `.ico` to an SVG was possible, but "
"sub-optimal: tools try to guess some vector paths, and the final SVG didn't "
"match the original."
msgstr ""
msgid ""
"Instead I used a tool to draw the \"vector pixels\" as black squares, and "
"after getting the final result I manually cleaned-up the generated XML:"
msgstr ""
msgid ""
"<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n"
"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" width=\"16\" height=\"16\">\n"
" <path d=\"M 0 8 L 1 8 L 1 9 L 0 9 L 0 8 Z\" />\n"
" <path d=\"M 0 13 L 1 13 L 1 14 L 0 14 L 0 13 Z\" />\n"
" <path d=\"M 1 8 L 2 8 L 2 9 L 1 9 L 1 8 Z\" />\n"
" <path d=\"M 1 13 L 2 13 L 2 14 L 1 14 L 1 13 Z\" />\n"
" <path d=\"M 2 8 L 3 8 L 3 9 L 2 9 L 2 8 Z\" />\n"
" <path d=\"M 2 13 L 3 13 L 3 14 L 2 14 L 2 13 Z\" />\n"
" <path d=\"M 3 8 L 4 8 L 4 9 L 3 9 L 3 8 Z\" />\n"
" <path d=\"M 3 13 L 4 13 L 4 14 L 3 14 L 3 13 Z\" />\n"
" <path d=\"M 4 7 L 5 7 L 5 8 L 4 8 L 4 7 Z\" />\n"
" <path d=\"M 4 8 L 5 8 L 5 9 L 4 9 L 4 8 Z\" />\n"
" <path d=\"M 4 13 L 5 13 L 5 14 L 4 14 L 4 13 Z\" />\n"
" <path d=\"M 5 6 L 6 6 L 6 7 L 5 7 L 5 6 Z\" />\n"
" <path d=\"M 5 7 L 6 7 L 6 8 L 5 8 L 5 7 Z\" />\n"
" <path d=\"M 5 13 L 6 13 L 6 14 L 5 14 L 5 13 Z\" />\n"
" <path d=\"M 6 5 L 7 5 L 7 6 L 6 6 L 6 5 Z\" />\n"
" <path d=\"M 6 6 L 7 6 L 7 7 L 6 7 L 6 6 Z\" />\n"
" <path d=\"M 6 14 L 7 14 L 7 15 L 6 15 L 6 14 Z\" />\n"
" <path d=\"M 7 1 L 8 1 L 8 2 L 7 2 L 7 1 Z\" />\n"
" <path d=\"M 7 14 L 8 14 L 8 15 L 7 15 L 7 14 Z\" />\n"
" <path d=\"M 7 15 L 8 15 L 8 16 L 7 16 L 7 15 Z\" />\n"
" <path d=\"M 7 2 L 8 2 L 8 3 L 7 3 L 7 2 Z\" />\n"
" <path d=\"M 7 3 L 8 3 L 8 4 L 7 4 L 7 3 Z\" />\n"
" <path d=\"M 7 4 L 8 4 L 8 5 L 7 5 L 7 4 Z\" />\n"
" <path d=\"M 7 5 L 8 5 L 8 6 L 7 6 L 7 5 Z\" />\n"
" <path d=\"M 8 1 L 9 1 L 9 2 L 8 2 L 8 1 Z\" />\n"
" <path d=\"M 8 15 L 9 15 L 9 16 L 8 16 L 8 15 Z\" />\n"
" <path d=\"M 9 1 L 10 1 L 10 2 L 9 2 L 9 1 Z\" />\n"
" <path d=\"M 9 2 L 10 2 L 10 3 L 9 3 L 9 2 Z\" />\n"
" <path d=\"M 9 6 L 10 6 L 10 7 L 9 7 L 9 6 Z\" />\n"
" <path d=\"M 9 15 L 10 15 L 10 16 L 9 16 L 9 15 Z\" />\n"
" <path d=\"M 10 2 L 11 2 L 11 3 L 10 3 L 10 2 Z\" />\n"
" <path d=\"M 10 3 L 11 3 L 11 4 L 10 4 L 10 3 Z\" />\n"
" <path d=\"M 10 4 L 11 4 L 11 5 L 10 5 L 10 4 Z\" />\n"
" <path d=\"M 10 5 L 11 5 L 11 6 L 10 6 L 10 5 Z\" />\n"
" <path d=\"M 10 6 L 11 6 L 11 7 L 10 7 L 10 6 Z\" />\n"
" <path d=\"M 11 6 L 12 6 L 12 7 L 11 7 L 11 6 Z\" />\n"
" <path d=\"M 11 8 L 12 8 L 12 9 L 11 9 L 11 8 Z\" />\n"
" <path d=\"M 10 15 L 11 15 L 11 16 L 10 16 L 10 15 Z\" />\n"
" <path d=\"M 11 10 L 12 10 L 12 11 L 11 11 L 11 10 Z\" />\n"
" <path d=\"M 11 12 L 12 12 L 12 13 L 11 13 L 11 12 Z\" />\n"
" <path d=\"M 11 14 L 12 14 L 12 15 L 11 15 L 11 14 Z\" />\n"
" <path d=\"M 11 15 L 12 15 L 12 16 L 11 16 L 11 15 Z\" />\n"
" <path d=\"M 12 6 L 13 6 L 13 7 L 12 7 L 12 6 Z\" />\n"
" <path d=\"M 12 8 L 13 8 L 13 9 L 12 9 L 12 8 Z\" />\n"
" <path d=\"M 12 10 L 13 10 L 13 11 L 12 11 L 12 10 Z\" />\n"
" <path d=\"M 12 12 L 13 12 L 13 13 L 12 13 L 12 12 Z\" />\n"
" <path d=\"M 12 14 L 13 14 L 13 15 L 12 15 L 12 14 Z\" />\n"
" <path d=\"M 13 6 L 14 6 L 14 7 L 13 7 L 13 6 Z\" />\n"
" <path d=\"M 13 8 L 14 8 L 14 9 L 13 9 L 13 8 Z\" />\n"
" <path d=\"M 13 10 L 14 10 L 14 11 L 13 11 L 13 10 Z\" />\n"
" <path d=\"M 13 12 L 14 12 L 14 13 L 13 13 L 13 12 Z\" />\n"
" <path d=\"M 13 13 L 14 13 L 14 14 L 13 14 L 13 13 Z\" />\n"
" <path d=\"M 13 14 L 14 14 L 14 15 L 13 15 L 13 14 Z\" />\n"
" <path d=\"M 14 7 L 15 7 L 15 8 L 14 8 L 14 7 Z\" />\n"
" <path d=\"M 14 8 L 15 8 L 15 9 L 14 9 L 14 8 Z\" />\n"
" <path d=\"M 14 9 L 15 9 L 15 10 L 14 10 L 14 9 Z\" />\n"
" <path d=\"M 14 10 L 15 10 L 15 11 L 14 11 L 14 10 Z\" />\n"
" <path d=\"M 14 11 L 15 11 L 15 12 L 14 12 L 14 11 Z\" />\n"
" <path d=\"M 14 12 L 15 12 L 15 13 L 14 13 L 14 12 Z\" />\n"
"</svg>\n"
msgstr ""
msgid ""
"The good thing about this new favicon is that a) it is simple enough that I "
"feel comfortable editing it manually and b) it is an SVG, which means I can "
"generate any desired size."
msgstr ""
msgid ""
"With the new favicon file, I now had to add to the templates' `<head>` a "
"`<link>` to this icon:"
msgstr ""
msgid ""
"<head>\n"
" <meta charset=\"UTF-8\" />\n"
" <link rel=\"icon\" type=\"image/svg+xml\" href=\"/static/favicon.svg\">\n"
" ...\n"
msgstr ""
msgid ""
"Still missing is a bitmap image for places that can't handle vector images. "
"I used Jekyll generator to create an PNG from the existing SVG:"
msgstr ""
msgid ""
"module Jekyll\n"
" class FaviconGenerator < Generator\n"
" safe true\n"
" priority :high\n"
"\n"
" SIZE = 420\n"
"\n"
" def generate(site)\n"
" svg = 'static/favicon.svg'\n"
" png = 'static/favicon.png'\n"
" unless File.exist? png then\n"
" puts \"Missing '#{png}', generating...\"\n"
" puts `inkscape -o #{png} -w #{SIZE} -h #{SIZE} #{svg}`\n"
" end\n"
" end\n"
" end\n"
"end\n"
msgstr ""
msgid ""
"I had to increase the priority of the generator so that it would run before "
"other places that would use a `{% link /static/favicon.png %}`, otherwise "
"the file would be considered missing."
msgstr ""
|
