Show HN: Design Stripe or Hacker News-like favicons in seconds

Show HN: Design Stripe or Hacker News-like favicons in seconds(formito.com)

199 points by hosshams 5 years ago | 41 comments

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.

hosshams 5 years ago | |

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.

Thank you.

contingencies 5 years ago | | |

Further to this feature and the current dropdown, fonts which do not contain the glyphs in question should be removed from the presented subset.

matsemann 5 years ago |

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"

hosshams 5 years ago | |

Hi,

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...

sunsetMurk 5 years ago | |

All of these are still required to cover bases across devices and apps. I think.

I just use https://realfavicongenerator.net/ which keeps things relatively easy.

petercooper 5 years ago | |

For some reason CanIUse only covers SVG favicons if linked in as an external file (as the bottom code sample on the original site does):

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.

tpmx 5 years ago | |

Probably using (something like) https://opentype.js.org/.

nwsm 5 years ago | |

Note that the emojis are in text, and many of them do not center very well(I'm in Firefox).

hosshams 5 years ago | | |

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.

scoopr 5 years ago |

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?

hosshams 5 years ago | |

Hi,

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.

captn3m0 5 years ago | |

There's also a download PNG option.

egorfine 5 years ago |

Surprisingly nice tool, thanks!

One seemingly major feature missing: ability to change the font size.

hosshams 5 years ago | |

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.

SiVal 5 years ago |

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.

Good work.

hosshams 5 years ago | |

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.

yokto 5 years ago |

It would be nice to add a 'Squircle' option.

hosshams 5 years ago | |

Put it right onto my todo list. Thanks for the suggestion.

sdiw 5 years ago |

FYI: when I try to design favicon with 'MM' it goes out of bound.

hosshams 5 years ago | |

Thanks for reporting this issue. Currently, the font-size is fixed to 80px. I'll add an option to change the font-size in version 2.0.

ylere 5 years ago | | |

Would be great if the font weight could also be changed then!

pcr910303 5 years ago |

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.

yokto 5 years ago | |

You can use any Google Fonts, Roboto is used as default, so "Roboto" becomes the initial drop-down filter.

pcr910303 5 years ago | | |

Oh, I didn't realize that! That's great to hear!

hosshams 5 years ago | |

As you discovered, you can use any Google Fonts. I have custom font on my todo list. Stay tuned for version 2.0

atlasV 5 years ago |

I was looking for something like this (Free+less faf svg generator)

Brajeshwar 5 years ago |

Can you please pre-populate, fill up the fonts as I type or an option to scroll through the available options.

hosshams 5 years ago | |

Yeah, the dropdown is not very well accessible. I'll use another autosuggestion component or improve this one for the next update.

thesimon 5 years ago | |

And maybe pre-load them to see a preview of the font?

hosshams 5 years ago | | |

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.

acnops 5 years ago |

Great! Would be nice if you could set the font weight.

hosshams 5 years ago | |

This is on my todo list. Will add this one soon (maybe next weekend)

latenightcoding 5 years ago |

font-size too big.

hosshams 5 years ago | |

Sorry about that. Will update the tool in a few days to include a font-size selector.

roboben 5 years ago |

It doesn't work with emojis. Super sad smiley.

Minor49er 5 years ago | |

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.

hosshams 5 years ago | | |

Thanks for reporting these issues.

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.

tethys 5 years ago | |

Did you select "Emoji" as content? Works fine for me.