Show HN: I made a Gravatar-like service for favicons

Show HN: I made a Gravatar-like service for favicons(icon.horse)

12 points by fiiv 4 years ago | 7 comments

Leftium 4 years ago |

Interesting service. I am building a bookmarking app that needs to load a lot of favicons.

There are libraries like this: https://github.com/zongyz/get-website-favicon, but I suppose your service is even easier to use.

The big feature I would be interested in is being able to load multiple favicons at the same time as a sprite sheet: loading favicons one-at-a-time is very slow and inefficient.

An example of a site that caches favicons as a sprite sheet is https://www.bkmks.com/

fiiv 4 years ago | |

Whoa, I hadn't thought of a sprite sheet, but that's a great idea actually. It shouldn't be too hard to generate one of these. How many favicons in one sheet are you thinking?

Leftium 4 years ago | | |

I don't know... but a lot!

I have 1500+ bookmarks: https://instant.leftium.com/

And here's what my bkmks.com spritesheet looks like: https://i.imgur.com/dgoBEC4.png

knackundback 4 years ago |

Lots of use cases for this! I've used https://clearbit.com/blog/logo/ in the past.

Results are somewhat different, e.g. compare https://icon.horse/icon/wikipedia.org to https://logo.clearbit.com/wikipedia.org

fiiv 4 years ago | |

Yes indeed! I'm not surprised there's some difference. One thing I learned doing this is that there's a lot of choices to make when selecting the best icon.

For example, some sites have SVG icons, which are usually superior in both file size and in scalability (compared to raster formats), but if using them in a mobile app in React Native, it would require an additional step to integrate SVG images.

aghilmort 4 years ago | | |

yes, have also used clearbit -- this is interesting and consistently run into use cases -- great work :)

perhaps have parameter, e.g., format={png||svg} and serves up png if no svg available

fiiv 4 years ago |

Hi HN,

I was working on an app, and in it, we wanted to render an icon for links from meeting invites. This turned out to be quite a pain!

I found other things that could return icon data, but alas they were all JSON APIs. I didn't relish the idea of fetching an endpoint for each and every website icon I needed to load (and write glue code to render the best icon out of the bunch).

You'd think favicons are as simple as loading "example.com/favicon.ico" but there's a lot of subtleties to it.

First, favicon.ico's are often really low res – there's often higher res icons available via tags in the HTML or through the manifest file.

Second, what if the hostname is unreachable or if there is no favicon at all?

And third, no one wants to parse a whole HTML page just to get one little icon!

So that's why I made Icon Horse – it automatically parses the site's HTML to determine the best possible resolution icon. And if no icon is available, it serves a decent fallback, so you never end up with a broken image. And finally, it's dead-simple to use. You simply use the hostname like so:

https://icon.horse/icon/ycombinator.com

Anyway, hope you also get some use out of it. I'm around if anyone has any questions :)