I would love this if it had the option to preview say 40 fonts at once? I don't know what specific font I want, so I was having to manually search for one, select a random one, and see how it looked. It would be nice to see a grid of 40 favicons, each with a different font on to easily glance over.
This is actually a very good suggestion! Will save tons of time. Personally, to decide what font I'd like to use, I open Google Fonts, enter my letter (e.g. F), and then scroll down the list of fonts to pick my desire one.
I like you suggestion very much, I'll add this to my suggestion list and would implement this one for version 2.0.
I was first a bit hesitant to embed a letter using a custom font in an SVG, but then I saw it actually creates a path. So it will look the same everywhere and not depend on a font-file. Nifty! But how is it done?
How usable are svg favicons nowadays? Do I still need a dozen link rels in my <head> with various icons in different formats/sizes? Currently I have one .ico file as rel="shortcut icon", 4 pngs in various sizes as "icon", 4 pngs as "apple-touch-icon" and 1 svg as "mask icon"
As you can see in https://caniuse.com/link-icon-svg all modern browsers support SVG favicon right now (88% of users globally). You can also download the PNG version to support wider audience. In the next version, I'll include support to download PNG version for all required sizes, with a sample html page and manifest.json file.
Supported by Edge, Firefox, Chrome, and Opera. Safari and iOS in a rather limited way, but you're still looking at about 70% of users with SVG icons alone. Not so sure how to look up if they're supported directly in the link element.
I just tested the "emoji" version on Chrome and it rendered some total junk as the icon, so I'm not sure about support for that either.
Yeah, I tried a few combinations of dominant-baseline and text-anchor attributes, but couldn't find a combination that works for all emojis. I need to find SVG set of emojis to fix this problem instead of using them as a simple text. I'll look into this in the next version.
Hmm, this is very neat and elegant! But how well is svg (or data:) favicons supported in random non-strictly-browser context, like password managers, or some link aggregator/bookmarking style sites or apps?
You can download the PNG version to create favicon for older browsers, but it's something we'll cover in the next version. There would be a "Download All" option with all required PNG sizes, and a sample html file with higher priority for the SVG version. So modern browsers would use the SVG version, and old browsers uses the PNG files.
Exactly. Sorry about that, should have included this one before sharing it here. I have font-size support for version 2.0, but I might be able to update the tool during the weekend to add font-size and a couple more minor issues.
First, I love what you're doing here. I'd like to use it, but there is something stopping me: when I have lots of options, I need an easy way to compare them. I would so much rather compare a grid of options instead of having to look at them one at a time. I can only look at one while having to remember all others. I can't even down arrow through the fonts to speed up the one-at-a-time process, because the font menu cycles over the few fonts that are visible in the dropdown instead of descending the list.
So, just a thought: pre-render and save versions of each common character in each available font. ([a-z,A-Z,0-9] and watch for other common selections.) When a user says, "I want an 'R'", you display a grid of pre-rendered SVG icons of R in all available fonts (so you don't have to load all of the actual fonts at the same time). As SVG, they could be viewed at any scale. They choose the font by clicking the icon instead of the font name. Then they choose size, color, etc., to customize it, and that one is rendered live.
This is a very good idea. Thanks for sharing it. I'll definitely implement it for the next version.
For font-picker, we have enough horizontal space. I might add another sidebar where you can preview and search font-families. I'll redesign the UI for the next version.
This would be great if I can upload & select my own fonts, or to have other fonts than Roboto. That would truly allow multiple character-favicon variants from one site, which would be very useful.
I might create a list like Google Font where you can preview all fonts for your Startup initials or search for a specific one. This should be a better UI than the current one I guess.
I tried it on Firefox 79. The menu would show various emoji, but selecting one would sometimes use the Unicode version rather than the exact style that I selected.
For example, the laughing with tears emoji is in full color with an open mouth, but selecting it results in the outlined version without color and is showing teeth.
When the colored emoji do work, they will sometimes be cropped at the bottom or will leave some artifacts behind from a previous selection. These seem to disappear when switching to another tab and then coming back, though.
Some of the letters will extend beyond the boundaries of the image, too. For example, the left and right ends of the combinations "me" or "ww" get clipped off.
Despite those issues, this looks promising. I really like the interface and overall simplicity of the tool.
Emojis are using the native emoji list from your machine. I should check the emoji-picker documentation to see why this happening. I'll see if I can find an emoji picker that returns SVG. That would solve this issue definitely.
Regards sizing, yeah, the text size is fixed at 80px. I'll add a control to change the font-size in upcoming updates.
Glad you like it so far. Will try to improve the tool soon.
I like you suggestion very much, I'll add this to my suggestion list and would implement this one for version 2.0.
Thank you.
How usable are svg favicons nowadays? Do I still need a dozen link rels in my <head> with various icons in different formats/sizes? Currently I have one .ico file as rel="shortcut icon", 4 pngs in various sizes as "icon", 4 pngs as "apple-touch-icon" and 1 svg as "mask icon"
I use https://opentype.js.org/ to convert a font to path.
As you can see in https://caniuse.com/link-icon-svg all modern browsers support SVG favicon right now (88% of users globally). You can also download the PNG version to support wider audience. In the next version, I'll include support to download PNG version for all required sizes, with a sample html page and manifest.json file.
Also, support for dark mode is in my todo list.
There's a good article on this here https://medium.com/swlh/are-you-using-svg-favicons-yet-a-gui...
I just use https://realfavicongenerator.net/ which keeps things relatively easy.
https://caniuse.com/link-icon-svg
Supported by Edge, Firefox, Chrome, and Opera. Safari and iOS in a rather limited way, but you're still looking at about 70% of users with SVG icons alone. Not so sure how to look up if they're supported directly in the link element.
I just tested the "emoji" version on Chrome and it rendered some total junk as the icon, so I'm not sure about support for that either.
You can check the browser supports on https://caniuse.com/link-icon-svg
You can download the PNG version to create favicon for older browsers, but it's something we'll cover in the next version. There would be a "Download All" option with all required PNG sizes, and a sample html file with higher priority for the SVG version. So modern browsers would use the SVG version, and old browsers uses the PNG files.
One seemingly major feature missing: ability to change the font size.
So, just a thought: pre-render and save versions of each common character in each available font. ([a-z,A-Z,0-9] and watch for other common selections.) When a user says, "I want an 'R'", you display a grid of pre-rendered SVG icons of R in all available fonts (so you don't have to load all of the actual fonts at the same time). As SVG, they could be viewed at any scale. They choose the font by clicking the icon instead of the font name. Then they choose size, color, etc., to customize it, and that one is rendered live.
Good work.
For font-picker, we have enough horizontal space. I might add another sidebar where you can preview and search font-families. I'll redesign the UI for the next version.
For example, the laughing with tears emoji is in full color with an open mouth, but selecting it results in the outlined version without color and is showing teeth.
When the colored emoji do work, they will sometimes be cropped at the bottom or will leave some artifacts behind from a previous selection. These seem to disappear when switching to another tab and then coming back, though.
Some of the letters will extend beyond the boundaries of the image, too. For example, the left and right ends of the combinations "me" or "ww" get clipped off.
Despite those issues, this looks promising. I really like the interface and overall simplicity of the tool.
Emojis are using the native emoji list from your machine. I should check the emoji-picker documentation to see why this happening. I'll see if I can find an emoji picker that returns SVG. That would solve this issue definitely.
Regards sizing, yeah, the text size is fixed at 80px. I'll add a control to change the font-size in upcoming updates.
Glad you like it so far. Will try to improve the tool soon.