10 ms·
https://instafavicon.com/ https://instafavicon.com/ I created this favicon generator a few weeks ago to generate minimal favicons for my side projects. I'm not
by 0x1d 10y ago
https://instafavicon.com/ 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 10y agoCool. 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 10y agoThanks! I'm thinking about adding some of the Google web fonts.
- zachrose 10y agoAlso, 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 https://24ways.org/2010/calculating-color-contrast
- 0x1d 10y agoNice! I'm definitely going to use this. The text is barely visible on a lot of the lighter colors right now.
- rosstex 10y agoWhat is this magic?
- jnpatel 10y agoI 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-that-a-tiny-favicon-requires-yet-another-http-request-how-to-mak http://stackoverflow.com/questions/5199902/isnt-it-silly-tha...
- 0x1d 10y agoYep, 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.
- ivrrimum 10y agoI literary need this right now. THANKS! Other tools are too over-thought( lets you draw your own icon ). I needed something simple.
- ajkjk 10y agoThis is great. I just immediately used it for my nascent blog.
- 0x1d 10y agoAwesome, let me know if you have any problems with it!
- g4k 10y agoJust tried it out and the file size is huge (350KB).
- 0x1d 10y agoRight 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!
- nommm-nommm 10y agoJust used it for a placeholder icon for a new project. Thanks!
- 0x1d 10y agoNo problem!
- civilian 10y agooh cool! That's way better than trying to be a pixel artist in http://www.favicon.cc/ 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-favicon/lpnolppchlcpbbpgjnieppaikdjeappc https://chrome.google.com/webstore/detail/replace-missing-fa...
- 0x1d 10y agoIt's sad when you bookmark a website and there's no favicon... I'll have to try your extension.
- abhineet97 10y agoYou can use <input type=color> to make color selection more flexible.
- fgandiya 10y agoHey, I used that a few weeks ago for a personal website. Thanks for making that!
- Procrastes 10y agoNice. 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.