5 ms·

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

12 points by fiiv 5y ago

fiiv 5y 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 https://icon.horse/icon/ycombinator.com Anyway, hope you also get some use out of it. I'm around if anyone has any questions :)
Leftium 5y 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 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/ https://www.bkmks.com/
- fiiv 5y 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 5y ago
    I don't know... but a lot! I have 1500+ bookmarks: https://instant.leftium.com/ https://instant.leftium.com/ And here's what my bkmks.com spritesheet looks like: https://i.imgur.com/dgoBEC4.png https://i.imgur.com/dgoBEC4.png
knackundback 5y ago
Lots of use cases for this! I've used https://clearbit.com/blog/logo/ https://clearbit.com/blog/logo/ in the past. Results are somewhat different, e.g. compare https://icon.horse/icon/wikipedia.org https://icon.horse/icon/wikipedia.org to https://logo.clearbit.com/wikipedia.org https://logo.clearbit.com/wikipedia.org
- fiiv 5y 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 5y 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

12 points by fiiv 5y ago

fiiv 5y 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 https://icon.horse/icon/ycombinator.com Anyway, hope you also get some use out of it. I'm around if anyone has any questions :)

Leftium 5y 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 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/ https://www.bkmks.com/

fiiv 5y 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 5y ago
  I don't know... but a lot! I have 1500+ bookmarks: https://instant.leftium.com/ https://instant.leftium.com/ And here's what my bkmks.com spritesheet looks like: https://i.imgur.com/dgoBEC4.png https://i.imgur.com/dgoBEC4.png

knackundback 5y ago

Lots of use cases for this! I've used https://clearbit.com/blog/logo/ https://clearbit.com/blog/logo/ in the past. Results are somewhat different, e.g. compare https://icon.horse/icon/wikipedia.org https://icon.horse/icon/wikipedia.org to https://logo.clearbit.com/wikipedia.org https://logo.clearbit.com/wikipedia.org

fiiv 5y 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 5y 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