Show HN: Favicon Kit – get and embed Favicons from any web site (CDN and API) | Hacker News Reader

Show HN: Favicon Kit – get and embed Favicons from any web site (CDN and API)

faviconkit.com

56 pointsAndreasPizsa33 comments

Very interesting service! As an aside, I would love to know how someone can afford to run "30+" edge servers for a personal SaaS project. It seems that there will be a paid plan — but for such a niche service I wonder if it's sustainable long term. I ask because:

1) I may be looking for static content cdn(s) in the future for a personal project (would love recommendations!)

2) I would love to know how much money people are spending infrastructurally (at least in the beginning) to kickstart their projects

Good question MVorlm, thanks!

1) Static CDNs

We live in a wonderful time where CDNs are essentially free for small projects. I use CloudFlare for almost everything, simply because it’s so easy to set up, it gives you a free SSL endpoint, it allows you to use naked domain names (faviconkit.com instead of www.faviconkit.com) and it just works well. The HTML is hosted on Github Pages, which is also free.

1a) Number of edge servers

CloudFlare: 151 https://www.cloudflare.com/network/ CloudFront: 117 https://aws.amazon.com/cloudfront/details/ KeyCDN: 30+ https://www.keycdn.com/global-cdn Google Cloud CDN: 90+ https://cloud.google.com/cdn/

There are a few unique aspects of Favicon Kit specifically - the setup here is a tiny little bit more "sophisticated", which is why I chose Key CDN for the API itself.

2) Money spent on infrastructure (at least in the beginning)

+ Favicon Kit used to run on Heroku until recently, so I spent a few bucks on their hosting and CI plan. (It now runs on AWS Lambda) + I have a paid Github account. + CloudFlare is free. + KeyCDN so far cost me < 100€

Can you say a little more about the reason you chose KeyCDN over CloudFlare or the other providers. What features are you using?

Sure!

Favicons change very, very rarely, so they are perfect candidates for caching; fast extraction and caching are core features of Favicon Kit.

It was mainly the fact that Cloudflare does not cache by MIME type, but by file extension (https://support.cloudflare.com/hc/en-us/articles/200172516-W...) and/or would require page rules (https://support.cloudflare.com/hc/en-us/articles/11500320685...) to honor cache-control headers. (It‘s been a while since I’ve made that decision, so I hope I'm remembering the reasons correctly!)

KeyCDN was simple to set up and their pricing was equally simple and very reasonable, so I ended up staying with them.

I hope this answers your question, JohannesH!

Or use Google: https://www.google.com/s2/favicons?domain=twitter.com

Unless that endpoint can also return other resolutions, Favicon Kit offers more:

https://api.faviconkit.com/twitter.com/144 https://api.faviconkit.com/twitter.com/16

(Though, I will say, the URIs returned for Twitter and the image sizes don't actually align in those cases. The first is actually 192ˣ192 pixels, and the second is 32ˣ32 pixels. That seems odd. Maybe they should have endpoints like domain/large, domain/medium, domain/small?)

Great feedback, thanks.

The number after the domain is meant to be "this or the next greater size"; the actual size depends on what the source web site offers.

Google’s S2 is great for 16x16 icons. I’m not sure it also does sizes larger than this.

Really cool! One minor nitpick: A loading indicator might be nice, especially if you're switching between domains.

The large icon can take a while to load and you can end up in an inconsistent state where you see a mix of the old and new input.

Thanks timvdalen, that’s good feedback - I'll add this.

I'm curious what a use-case for this service would be. Why would I want to use some company's favicon for my own website?

Online RSS clients, perhaps? I admit I am having a hard time thinking of examples too.

Generally speaking, favicons are a great way to give links a small, yet unique visual represenation, making them easier identifiable.

In addition to the other use cases already mentioned here, imagine an e-mail client such as GMail that - in lack of a photo of the sender - at least shows the sender’s company logo (which in many cases is the domain’s Favicon). In such scenarios Favicon Kit can serve as a fallback for services like Gravatar.

I'm thinking one use case would be embedding in a web app. For example, a chat room or forum that "unfurls" links to show a preview (a'la Slack or Discourse) could benefit from showing a high resolution Favicon, e.g. if the linked page didn't have any other meta tags indicating a favored preview image.

Any service that stores/indexes information linked to a domain could use this to increase the recognition factor for the customer when listing a set of domains.

A great example is 1Password, when you type in the url of an account, it fetches the favicon and displays it when listing your accounts, making is very easy to quickly scroll and recognize what you want.

My mind went to password managers too - something like tis would be great for KeePass/MacPass because its favicon grabber is hit or miss

Yet it feels like this is something you could just build a library for in your web app. I'm sure there are favicon pullers/cachers for every language out there. I know tt-rss has one for it's RSS job.

It seems like something silly to depend on an external service for.

Think any shopping site that pulls in, or links to any products available for purchase online.

I don't get it either. I'm only reading the comments because I'm personally interested in any progress towards eliminating favicons

Would you mind sharing why you want progress toward eliminating favicons? Do you think there is some other replacement, or that nothing at all should be used?

For me, I know having small icons helps me scroll through my bookmarks and identify resources I want to reference. Even if the shape of the icon is poor at a small resolution, I think my brain picks up on the color association. So just for the sake of finding things in my bookmarks, I can't imagine getting rid of favicons.

I hate them because they are requested automatically, rather than because the developer declared them. They clog my web server logs when I build microservices and in development they double up every page request. I still remember when they first started happening and they just broke the mental model that web pages were built on. From my software aesthetic perspective they disgust me.

Having an icon for bookmarks and tabs is totally, 100% great - don't get me wrong. but they should be off by default.

Pretty cool. I tried bestbuy but it gives a broken image. Not sure if you do any scraping but bestbuy tries to prohibit it.

Thanks for reporting this great edge case, hotpockets!

Did it actually give you a broken image? It’s supposed to return a "B" on a grey background in such a case.

https://screenshots.firefox.com/t5VF86dioR3EBaNX/faviconkit....

Ouch, that's a sting in my pride :) Fixing!

I think part of the issue is that, when you return a fallback icon (the B icon in this case), you serve it with an HTTP 404 status.

In Firefox (and possibly other browsers), the browser will not attempt to render images returned with a 404 status. Changing it to return a 200 status should work.

Oh, I didn't know this about Firefox - thanks a lot, ldjb!

My intention was to be a good HTTP citizen and return the correct status code with a decent representation.

Returning 200 for "not actually found what you wanted, but here's something else you can use" seems odd, but maybe I'm just being too pedantic here and the pragmatic way would be better.

Thanks for pointing out the Firefox issue again, it would have probably never occured to me that FF behaves that way. That hint saved me a lot of time "fixing" the parser.

This is fixed now. Thanks again, ldjb!

Can I suggest at least attempting the default favicon location, like bestbuy.com/favicon.ico?

It does do that, actually.

I’ll check this on the weekend; very curious what‘s causing this. Will fix & let you know.

Thanks for your feedback and suggestion!

Good project. Just wanted to say that your own site doesn't have a favicon.

Nice, I've been looking for something like this for my new tab page extension. Will it remain free after the beta? How does it compare to https://github.com/mat/besticon/

Glad to hear iza, thanks for the question!

There are/have been a few free and open source alternatives out there. I built Favicon Kit because I wanted something fast, scalable and - most of all - reliable.

Most of the free alternatives vary in features, disappear after a while or just become inactive (even besticon’s Heroku demo).

Favicon Kit wants to be the sustainable, reliable, solid, production-grade service for favicons.

There will eventually be a paid plan which guarantees availability for paying customers.

Reply on news.ycombinator.com