Hacker News Reader

Comment by 0x1d | Hacker News Reader

I created this favicon generator a few weeks ago to generate minimal favicons for my side projects. I'm not good with design tools so it saves me time when I start a new project and want a simple favicon in ICO format.

I'm proud of it because it's server-less. I generate the multi-BMP ICO file in binary using ArrayBuffers and Typed Arrays in JavaScript. I use a <canvas> element to create the images/design.

It's not very polished and I'm sure there are bugs, but feedback would be appreciated!

View on HN

Cool. I like the fact that the icon shows in the actual tab as a preview. I guess what is missing is the option to select a font?

Thanks!

I'm thinking about adding some of the Google web fonts.

Also, there's a neat technique to make the text color either black or white depending on what has more contrast against the background color.

https://24ways.org/2010/calculating-color-contrast

Nice! I'm definitely going to use this. The text is barely visible on a lot of the lighter colors right now.

What is this magic?

I didn't check the source, but rendering the <canvas> to a data URL, and using something like this [0] would work.

[0]: http://stackoverflow.com/questions/5199902/isnt-it-silly-tha...

Yep, this is the strategy that I'm using. I export the canvas to data URL and place the data URL in the href attribute of the favicon <link>. I'm not sure if this works in every browser though.

oh cool! That's way better than trying to be a pixel artist in http://www.favicon.cc/ :D

I solved a similar problem--- I was tired of websites that didn't provide favicons. So I have a chrome extension that hashes the domain and fetches a gravatar icon for it. https://chrome.google.com/webstore/detail/replace-missing-fa...

It's sad when you bookmark a website and there's no favicon... I'll have to try your extension.

Just tried it out and the file size is huge (350KB).

Right now I'm adding many different image sizes in the ICO file to cover many types of browsers and devices, but it's probably not a good default. I will expose sizing options or default to fewer sizes in the future.

Thanks for feedback!

Nice. I like that it's all client side and it's perfect when I just need the minimum necessary for an example project or starter template.

Hey, I used that a few weeks ago for a personal website. Thanks for making that!

Just used it for a placeholder icon for a new project. Thanks!

No problem!

This is great. I just immediately used it for my nascent blog.

Awesome, let me know if you have any problems with it!

You can use

to make color selection more flexible.

I literary need this right now. THANKS! Other tools are too over-thought( lets you draw your own icon ). I needed something simple.

Reply on news.ycombinator.com