5 ms·
Show HN: Design Stripe or Hacker News-like favicons in seconds
- egorfine 6y agoSurprisingly nice tool, thanks! One seemingly major feature missing: ability to change the font size.
- hosshams 6y agoExactly. 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.
- matsemann 6y agoI 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"
- petercooper 6y agoFor 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 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.
- sunsetMurk 6y agoAll of these are still required to cover bases across devices and apps. I think. I just use https://realfavicongenerator.net/ https://realfavicongenerator.net/ which keeps things relatively easy.
- tpmx 6y agoProbably using (something like) https://opentype.js.org/ https://opentype.js.org/.
- hosshams 6y agoHi, I use https://opentype.js.org/ https://opentype.js.org/ to convert a font to path. As you can see in https://caniuse.com/link-icon-svg 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-guide-for-modern-browsers-836a6aace3df https://medium.com/swlh/are-you-using-svg-favicons-yet-a-gui...
- nwsm 6y agoNote that the emojis are in text, and many of them do not center very well(I'm in Firefox).
- hosshams 6y agoYeah, 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 6y agoHmm, 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?
- captn3m0 6y agoThere's also a download PNG option.
- hosshams 6y agoHi, You can check the browser supports on https://caniuse.com/link-icon-svg 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.
- Brajeshwar 6y agoCan you please pre-populate, fill up the fonts as I type or an option to scroll through the available options.
- thesimon 6y agoAnd maybe pre-load them to see a preview of the font?
- hosshams 6y agoI 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.
- hosshams 6y agoYeah, the dropdown is not very well accessible. I'll use another autosuggestion component or improve this one for the next update.
- atlasV 6y agoI was looking for something like this (Free+less faf svg generator)
- sdiw 6y agoFYI: when I try to design favicon with 'MM' it goes out of bound.
- davidweatherall 6y agoI 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 6y agoThis 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 6y agoFurther to this feature and the current dropdown, fonts which do not contain the glyphs in question should be removed from the presented subset.
- hosshams 6y agoThat's right. I'll populate the dropdown with all fonts that coming from Google Fonts API. I'll add this to my todo list.
- roboben 6y agoIt doesn't work with emojis. Super sad smiley.
- tethys 6y agoDid you select "Emoji" as content? Works fine for me.
- Minor49er 6y agoI 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 6y agoThanks 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.
- acnops 6y agoGreat! Would be nice if you could set the font weight.
- hosshams 6y agoThis is on my todo list. Will add this one soon (maybe next weekend)
- pcr910303 6y agoThis 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 6y agoYou can use any Google Fonts, Roboto is used as default, so "Roboto" becomes the initial drop-down filter.
- pcr910303 6y agoOh, I didn't realize that! That's great to hear!
- hosshams 6y agoAs you discovered, you can use any Google Fonts. I have custom font on my todo list. Stay tuned for version 2.0
- yokto 6y agoIt would be nice to add a 'Squircle' option.
- hosshams 6y agoPut it right onto my todo list. Thanks for the suggestion.
- latenightcoding 6y agofont-size too big.
- hosshams 6y agoSorry about that. Will update the tool in a few days to include a font-size selector.
- SiVal 6y agoFirst, 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 6y agoThis 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.