Introduction¶
Say you’d like a nice favicon, but you don’t want the hassle of making one. Favicodes is a service to dynamically generate favicons from unicode characters. (A singular favicode is a favicon generated from Unicode.) Favicodes can be further customized through GET query parameters. This makes it quick and easy for anyone to generate a favicode without leaving the text editor.
Examples¶
Each of the examples below is being dynamically generated by Favicodes:
Github https://favi.codes/fa/github
JavaScript https://favi.codes/fa/js?color=gold&bgcolor=black&fontsize=256&y=-8&size=224
Y-Combinator https://favi.codes/Y?color=white&bgcolor=ff6600&y=-20
FontAwesome https://favi.codes/fa/font-awesome?fontsize=256&color=349af0
Features¶
Favicodes may contain up to 2 glyphs, side by side
Generates png or ico output (png default)
Font defaults to Google Noto Sans (Mostly Latin characters by default for now, all character sets supported by Noto will eventually be supported in all styles)
Can also generate any of the glyphs from FontAwesome Free 5.8.1
FontAwesome glyphs can be specified by hex Unicode code point or their proper names, eg. “f005” or “star”
But wait, all characters can be specified by their Unicode code point
Text can be resized, colored or placed anywhere on the x, y axes
All font styles available for both FontAwesome Free and Google Noto Sans
Table of Contents¶
Quickstart¶
Making simple favicons with Favicodes is designed to be extremely straightforward. Simply imagine 1-2 chraracters from either Google Noto Sans or FontAwesome Free 5.8.1 and place them in the URL path, optionally with GET query parameters, to create your perfect favicon. Either save it to disk or reference by URL later using free to use web service, https://favi.codes
Usage¶
The simplest favicode of all is one made using no Unicode text. You may want a transparent favicon with no text as your favicon (instead of the dog-eared-page icon that seems to be the default for sites without a favicon). That’s easy:
https://favi.codes/
This will return a transparent, 256x256 PNG.
You cant see it, but its just above this sentence.
Maybe you just want a simple letter or two. (No more than 2 glyphs are allowed because the letters look too cramped when there are 3 or more).
https://favi.codes/JS
This will return a favicon with “JS” in black letters on a transparent background, like this:
You can also do background colors:
https://favi.codes/JS?bgcolor=gold
It you’re familiar with the Javascript logo, you may recognize where this is heading. Let’s see how close we can get it. Maybe make the text bold, and offset the X and Y to put the “JS” in the bottom right corner:
https://favi.codes/JS?&bgcolor=gold&y=35&x=65&fontsize=128&style=bold
Now, if you’re really familiar with the JavaScript logo, you may be irked that the J extends below the line. This is because the only fonts supported by Favicodes at the moment are Google Noto Sans and FontAwesome, and that’s just how capital J’s look in both of those fonts.
There is a workaround for this logo, since it is included with FontAwesome Free. To use FontAwesome icons in your favicode, you have 2 options. The first option is if you know the proper name of the icon, such as “paper-plane” or “js”, you can use it the url after the path, /fa/, like this:
https://favi.codes/fa/js
Obviously, this doesn’t match either. After some fiddling, I came up with this:
https://favi.codes/fa/js?color=gold&bgcolor=black&fontsize=256&y=-8&size=224
Alternatively, that same FontAwesome icon can be referenced by it’s Unicode code point instead, so long as FontAwesome is specified as the font. And, because the font is being specified, you’ll have to specify the style for this code point as well. The code point is f3b8 and the style is ‘brands’ for this icon. Like this:
https://favi.codes/f3b8?color=gold&bgcolor=black&fontsize=256&y=-8&size=224&font=fontawesome&style=brands
Advanced usage¶
We just touched on Unicode code points in the URL. You can actually specify any character input this way, including UTF-32LE characters, although I doubt any of the fonts supported have glyphs in that range. Any input past the root slash ‘/’ that is longer than 2 characters (because Favicodes can only have 2 characters) is expected to be valid hex representing a character in the font.
So, suppose you wanted to make Slashdot’s favicon. You can’t use ‘/’ or ‘.’ in the URL bar, and URL encoding wont work for the slash, because to webserver will eat the slash. All you need to know is the Unicode values for slash and dot, 002F and 002E:
https://favi.codes/02f/02e?color=white&style=extrabold&y=-25&bgcolor=0a3534
API Documentation¶
Unicode Input¶
Unicode character input can be specified in a number of ways. The app router takes the URL path of an incoming request and makes sense of it as follows:
If no input provided (URL path is blank), assume the user wants no text.
https://favi.codes/If the path begins with “fa/” followed by text, expect a FontAwesome proper name.
https://favi.codes/fa/clockIf no slashes in path, input is either Unicode literal(s) or a single Unicode code point.
https://favi.codes/RGorhttps://favi.codes/f23bIf one slash in path, expect 2 Unicode code points (or literals, or a code point and a literal)
https://favi.codes/02f/02e
GET Parameters¶
size¶
Specifies the size of the image in square pixels
Must be an integer <= 256
Default is 256
color¶
Specifies the color of the text
Must be a CSS3 color name, hexcode, or comma-separated RGBA (eg. “skyblue”, “0,0,0,0”, or “112233”), case-insensitive
Supported CSS3 names can be found at: https://en.wikipedia.org/wiki/Web_colors#HTML_color_names
Hexcodes must be exactly 6 nybbles, without the hash in front eg. “ff6600”
All RGBA values must be in the range 0-255, including the alpha (in CSS it is usually a float but, in PIL it’s 0-255)
Default is black
bgcolor¶
Specifies the color of the background, same restrictions as ‘color’
Default is 0,0,0,0
font¶
Specifies the font family to use
Must be either “notosans” or “fontawesome” case-insensitive
Defaults to “notosans”
style¶
Specifies the font style to use
Different options for different families of fonts
Default is “regular”
- For Noto fonts these are:
black
blackitalic
bold
bolditalic
brands
condensed
condensedblack
condensedblackitalic
condensedbold
condensedbolditalic
condensedextrabold
condensedextrabolditalic
condensedextralight
condensedextralightitalic
condenseditalic
condensedlight
condensedlightitalic
condensedmedium
condensedmediumitalic
condensedsemibold
condensedsemibolditalic
condensedthin
condensedthinitalic
extrabold
extrabolditalic
extracondensed
extracondensedblack
extracondensedblackitalic
extracondensedbold
extracondensedbolditalic
extracondensedextrabold
extracondensedextrabolditalic
extracondensedextralight
extracondensedextralightitalic
extracondenseditalic
extracondensedlight
extracondensedlightitalic
extracondensedmedium
extracondensedmediumitalic
extracondensedsemibold
extracondensedsemibolditalic
extracondensedthin
extracondensedthinitalic
extralight
extralightitalic
italic
light
lightitalic
medium
mediumitalic
regular
semibold
semibolditalic
semicondensed
semicondensedblack
semicondensedblackitalic
semicondensedbold
semicondensedbolditalic
semicondensedextrabold
semicondensedextrabolditalic
semicondensedextralight
semicondensedextralightitalic
semicondenseditalic
semicondensedlight
semicondensedlightitalic
semicondensedmedium
semicondensedmediumitalic
semicondensedsemibold
semicondensedsemibolditalic
semicondensedthin
semicondensedthinitalic
solid
thin
thinitalic
- For FontAwesome, there are:
solid
regular
brands
fontsize¶
Specifies the font size
Must be an integer <= 256
Defaults to 192
format¶
Specifies the format of the output image
Mimetype is determined by this parameter as well
Must be either “png” or “ico”
Defaults to “png”
x¶
Specifies an X-axis offset from center to draw the text
Must be between -128 and 128, since the max size is 256
Defaults to 0
y¶
Specifies an Y-axis offset from center to draw the text
Must be between -128 and 128, since the max size is 256
Defaults to 0
