[0x1d]

https://instafavicon.com/

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!

[partisan]

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?

[0x1d]

Thanks!

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

[zachrose]

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

[0x1d]

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

[rosstex]

What is this magic?

[jnpatel]

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

[0x1d]

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.

[civilian]

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

[0x1d]

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

[g4k]

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

[0x1d]

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!

[Procrastes]

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.

[fgandiya]

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

[nommm-nommm]

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

[0x1d]

No problem!

[ajkjk]

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

[0x1d]

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

[abhineet97]

You can use

<input type=color>

to make color selection more flexible.

[ivrrimum]

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