
Big news! As of today, Icon Horse is officially integrated with <a href="https://zapier.com" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/zapier.com" alt="zapier.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Zapier</a>, making it easier than ever to add beautiful favicons to your automated workflows. What used to require custom code and hours of setup can now be done in just a few clicks.

![Zapier Editor with Icon.Horse](/blog/images/zapier-editor.png)

## Why this matters

Zapier powers millions of automations for businesses of all sizes. From simple lead notifications to complex multi-step workflows, these automations often involve websites, tools, and services that users recognize by their icons. Now you can make your automated content more visually appealing and instantly recognizable.

There's lots of things you'd want to use Icon Horse for – here's a few common use cases to get you started:

### Gorgeous styled links
Give your users a visual queue of where a link will take them by showing an icon next to it. Perfect for automated email campaigns, Slack notifications, or team dashboards.

![Beautiful Links](/blog/images/usecase.1.jpg)

### Enhanced dashboards  
Take your dashboard displays to the next level by showing icons for each website or tool your team uses. Whether it's a <a href="https://notion.so" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/notion.so" alt="notion.so favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Notion</a> database, <a href="https://airtable.com" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/airtable.com" alt="airtable.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Airtable</a> view, or custom dashboard, icons make everything more scannable.

![Enhanced Dashboards](/blog/images/usecase.2.jpg)

### Lead enrichment workflows
When new leads come in through <a href="https://hubspot.com" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/hubspot.com" alt="hubspot.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />HubSpot</a>, <a href="https://salesforce.com" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/salesforce.com" alt="salesforce.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Salesforce</a>, or <a href="https://pipedrive.com" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/pipedrive.com" alt="pipedrive.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Pipedrive</a>, automatically fetch their company's favicon to make lead lists more visual and professional.

![Enrichment Workflows](/blog/images/usecase.3.jpg)

## How we built it (in an afternoon!)

One of the things I love about Zapier is how developer-friendly their platform is. What could have been weeks of work building individual integrations with dozens of services became an afternoon project that instantly connected Icon Horse to thousands of apps.

### The technical bits

Our integration is built using Zapier's platform CLI and consists of just a few key files:

**The main app configuration** (`index.js`) defines our integration and imports the core functionality:

```javascript
import fetchIconCreate from './triggers/fetch_icon.js';

export default {
  triggers: {
    [fetchIconCreate.key]: fetchIconCreate,
  },
  // ...
};
```

**The fetch icon trigger** (`triggers/fetch_icon.js`) handles the heavy lifting. It accepts a hostname and optional parameters, then constructs the appropriate Icon Horse API call:

```javascript
perform: async (z, bundle) => {
  const { hostname, size, fallback_text, fallback_bg } = bundle.inputData;
  let url = `https://icon.horse/icon/${hostname}`;
  
  // Add parameters for Pro/Enterprise features
  const params = {};
  if (size !== 'small') params.size = size;
  if (fallback_text) params.fallback_text = fallback_text;
  // ...
  
  const response = await z.request({ url, params });
  return [{ icon_url: finalUrl, hostname, ... }];
}
```

**Optional authentication** for Pro/Enterprise users who want custom sizes, fallback colors, and other advanced features. But here's the beauty – basic usage requires zero setup. No API keys, no complicated auth flows.

### Testing made simple

Zapier's testing framework made development a breeze. With their CLI, we could test our integration locally before deploying:

```bash
npm test
zapier validate  
zapier push
```

The whole process from idea to deployment took about 4 hours, including testing with various edge cases and documenting everything.

## What's included

Our Zapier integration gives you access to:

- **Basic favicon fetching** – completely free, no API key required
- **Multiple input formats** – works with hostnames (example.com) or full URLs  
- **Rich output data** – icon URL, content type, size info, and fallback detection
- **Pro features** – custom sizes, fallback colors, and advanced options (requires Pro/Enterprise API key)
- **Reliable fallbacks** – always returns something, even if the site has no favicon

The integration returns structured data you can use in any subsequent Zapier steps:

```json
{
  "icon_url": "https://icon.horse/icon/github.com",
  "hostname": "github.com", 
  "content_type": "image/png",
  "is_fallback": false,
  "fetched_at": "2024-12-13T12:00:00Z"
}
```

We just launched our Zapier integration! Add gorgeous favicons to any workflow in minutes, not hours.

Icon Horse + Zapier: Beautiful icons in every automation


# Everything you've (n)ever wanted to know about favicons

A favicon is quite simply an icon. The idea behind its inception was for browsers to use them to make a quick, easy to identify visual representation of a website in the browser's UI.

![Favicon as it appears in Firefox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43mhbwvv3f0why6tfffr.png)

## A little bit of history

The first favicons were implemented in 1999 by <a href="https://microsoft.com" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/microsoft.com" alt="microsoft.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Microsoft</a> in their Internet Explorer browser. Since then, they were widely adopted by almost all browsers, and today it is commonplace to find favicons being displayed all over the browser, such as in bookmarks menus, window and tab headings, address bars, history, etc.

Microsoft's original idea was to load that icon from a specific place relative to a website. If your website's address was `pokemon.com`, Internet Explorer looked for it at `pokemon.com/favicon.ico`.

This original implementation worked alright at first. But at the time, lots of websites were hosted with companies like Geocities, <a href="https://www.angelfire.lycos.com/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/www.angelfire.lycos.com" alt="www.angelfire.lycos.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Angelfire</a> and Tripod. They would give your website an address like `tripod.com/my-pokemon-website`. The problem with this was that the browser would always use Tripod's favicon located at `tripod.com/favicon.ico` and not one that the website's author might want to show!

Eventually, the people responsible for standardising HTML on the web, the <a href="https://www.w3.org/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/www.w3.org" alt="www.w3.org favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />World Wide Web Consortium</a>, created a specification for how both browsers and website authors should use these icons. In the HTML of the page, an HTML tag would be included, telling the browser where to find that icon.

But, since the original Internet Explorer needed to work because lots of websites had been using it, browsers began supporting them both.

## The advent of the smartphone (and other use-cases)

A lot of things changed when the smartphone became mainstream. One notable thing that changed for favicons was that people could save websites to their home screen. But the `favicon.ico` icons up to this point were all too small – sometimes they were as tiny as 16 pixels! These icons were supposed to be shown next to app icons, which are much more high fidelity images – up to 10 times bigger, in fact!

Android and iOS use different icon sizes. Also, Windows began using yet another icon type for displaying websites in its Metro tile display.

## The chaos is real

As a result of all these different specifications, there are now a lot of places to look for favicons. And the different icons you can get will vary depending on which one you request. Some sites will have some but not others!

The list includes:

- `yoursite.com/favicon.ico`
- In the site's HTML code
- In the site's web manifest file

Some sites end up with dozens of different icons. These vary, from the usually tiny `favicon.ico` to the higher resolution icon used by iOS's home screen feature. Additionally, a lot can go wrong with fetching these.

- There might not be any icons at all.
- The icons are specified but don't exist (return a 404).
- The icons are the wrong size.
- The icons are the wrong format for where you might want to use them.
- The icons are corrupted or broken.
- The icons specified might not have the one you might want to use.
- The web server could be misconfigured (for example, resulting in redirect loops).
- The web server could be slow to respond with the icons or the files specifying the icons.

So, requesting something as simple as a tiny little website icon can be a very complicated task! Clearly there is no one-size-fits-all solution to grab the icons.

## How to make sure your website has all its icons

So all that being said, how do you make sure your website has all the different icons it should have, and they're properly referenced in your HTML markup?

Quite simply, the best way to do this is to use a service that generates the markup and icons for you. The best ones I've found so far are:

- <a href="https://realfavicongenerator.net" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/realfavicongenerator.net" alt="realfavicongenerator.net favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />realfavicongenerator.net</a>
- <a href="https://www.websiteplanet.com/webtools/favicon-generator/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/www.websiteplanet.com" alt="www.websiteplanet.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Website Planet's Favicon Generator</a>

You can upload an icon image, specify some preferences, and it will generate a ZIP file with your icons properly sized and set up, as well as the HTML to insert into your site's `<head>` section.

If you use Webpack, you could also try out the plugin <a href="https://github.com/jantimon/favicons-webpack-plugin" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/github.com" alt="github.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />jantimon/favicons-webpack-plugin</a> that will automatically work its magic to give you favicons.

## How to use other sites' favicons on your site

- **You could build your own API** or serverless function to fetch a site's favicons. But, I gotta tell you from experience, there's a lot of edge cases and weirdness here.
- **You could always load** `domain.com/favicon.ico`, but be prepared for 404s.
- **You could use an existing service.** Shameless plug – I built <a href="https://icon.horse" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/icon.horse" alt="icon.horse favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Icon Horse</a> for this purpose, you can use it free (or upgrade for additional features). Other services also exist, like <a href="https://favicongrabber.com/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/favicongrabber.com" alt="favicongrabber.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Favicon Grabber</a>. Some search engines like Google, Bing and DuckDuckGo also have APIs for this, but since they're intended for internal use and are undocumented and unsupported, be prepared that they might not work like you want or they might stop working at any moment.

## Other cool stuff

- **<a href="https://iconmap.io" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/iconmap.io" alt="iconmap.io favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Iconmap.io</a>**: a massive map of favicons from all over the web
- **<a href="https://realfavicongenerator.net" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/realfavicongenerator.net" alt="realfavicongenerator.net favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />realfavicongenerator.net</a>**: the best tool I've found for generating favicons for your website
- **<a href="https://www.websiteplanet.com/webtools/favicon-generator/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/www.websiteplanet.com" alt="www.websiteplanet.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Website Planet's Favicon Generator</a>**: another great tool for generating favicons for your site
- **<a href="https://icon.horse" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/icon.horse" alt="icon.horse favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Icon Horse</a>**: my super cool favicon grabber API

Let me know if you can think of a link for here and I'll add it! 

What is a favicon, how did it come about and most importantly, how can you make sure you're doing them correctly?

Favicon advanced


Favicons are those tiny little icons that appear in browser tabs, bookmarks, and various other places around the web. While they might seem insignificant, they play a crucial role in branding and user experience.

## What is a favicon?

A favicon (short for "favorite icon") is a small, iconic image associated with a particular website. Originally introduced by Internet Explorer 5 in 1999, favicons have become a standard part of web development.

## The evolution of favicons

### The early days (.ico format)
Initially, favicons were simple 16x16 pixel ICO files placed in the root directory of a website. This format was limited but served its purpose for the basic web of the late 90s and early 2000s.

### Modern favicons
Today's favicons come in various formats and sizes:
- **PNG/SVG formats**: Better compression and quality
- **Multiple sizes**: From 16x16 to 512x512 pixels
- **Apple touch icons**: Specialized icons for iOS devices
- **Android chrome icons**: Optimized for Android browsers

## Best practices for favicons

1. **Use multiple sizes**: Provide various sizes to ensure your favicon looks good everywhere
2. **Keep it simple**: Favicons are small, so simple designs work best
3. **Use your brand colors**: Maintain consistency with your overall brand
4. **Test across devices**: Make sure your favicon works on desktop, mobile, and tablets

## How Icon Horse helps

Icon Horse simplifies the entire favicon process by automatically fetching and serving the best available favicon for any website. Instead of manually implementing complex favicon detection logic, you can simply use our API to get consistent, high-quality favicons every time.

Favicons might be small, but they're an important part of your website's identity. Whether you're building them from scratch or using a service like Icon Horse, make sure you're giving them the attention they deserve. 

Favicon Basics


Icon Horse makes it incredibly easy to get high-quality favicons for any website. Whether you're building a bookmark manager, a dashboard, or any application that needs to display website icons, Icon Horse has you covered.

## Basic usage

The simplest way to use Icon Horse is through our straightforward URL structure:

```
https://icon.horse/icon/example.com
```

This will return the best available favicon for the given domain. <a href="https://icon.horse" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/icon.horse" alt="icon.horse favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" /><-- this is our icon!</a>

The API automatically handles:
- Different favicon formats (ICO, PNG, SVG)
- Multiple sizes and resolutions
- Fallbacks when favicons aren't available
- Caching for optimal performance

## Advanced options

### Size specification

You can request specific sizes by adding size parameters:

```
https://icon.horse/icon/example.com?size=32
```

### Fallback behavior

Control what happens when a favicon isn't found:

```
https://icon.horse/icon/example.com?fallback_text=EX
```


## Integration examples

### HTML img tag
```html
<img src="https://icon.horse/icon/github.com" alt="GitHub favicon" width="16" height="16">
```

### CSS background
```css
.site-icon {
  background-image: url('https://icon.horse/icon/stackoverflow.com');
  background-size: contain;
  width: 20px;
  height: 20px;
}
```

### JavaScript fetch
```javascript
const response = await fetch('https://icon.horse/icon/reddit.com');
const iconBlob = await response.blob();
const iconUrl = URL.createObjectURL(iconBlob);
```

## Performance considerations

Icon Horse is built for performance:
- **Global CDN**: Icons are served from locations worldwide
- **Smart caching**: Frequently requested icons are cached at the edge
- **Optimized formats**: We serve the most appropriate format for each request
- **Batch processing**: Perfect for applications that need many icons

## Pro features

Upgrade to Icon Horse Pro for additional features:
- Higher rate limits
- Priority support
- Advanced customization options
- Analytics and usage insights

## Need help?

Check out our [documentation](/usage) for more detailed information, or reach out to our support team if you have any questions.

Start using Icon Horse today and never worry about broken or missing favicons again! 

Learn how to quickly integrate Icon Horse into your projects for reliable favicon delivery.

Getting started with Icon Horse


A few days ago, I launched <a href="https://icon.horse" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/icon.horse" alt="icon.horse favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Icon Horse</a>, which is a simple, free API to quickly get the favicon of any website. The launch itself went really well, and I had a lot of fun building it.

But inside the seemingly simple but glamorous life of favicons, there is a lot of complexity. I thought I'd share some of how it works with you all, and some of the hoops I had to hop to build Icon Horse.

## What is a favicon, really?

The year was 1999. Britney Spears and Eminem were at the top of the charts, the world was introduced to Napster for the first time, and the "browser war" was heating up with Microsoft releasing Internet Explorer 5.

One of IE5's new features was the favicon, or a small icon which was displayed in the "Favourites" menus/bars next to the title of the site someone bookmarked. Things were simple back then, and if the favicon existed, it would be loaded from the site's root like so:

```
https://mysite.com/favicon.ico
```

Since then, a number of new circumstances have come up requiring new types of icons – one example is the advent of the smart phone, which allowed people to save a website shortcut on their home screen. But since favicons tended to be low resolution, a number of diverging standards came about and added these on both Android and iOS.

Now while technically a shortcut icon, they are usually lumped in with favicons in general internet terminology and also during the process to create them.

Today, there are three main places to look for icons:

1. `https://mysite.com/favicon.ico`
2. The HTML of the site in the `<head>`
3. A separate Web App Manifest file which is specified in the `<head>`

## So what's the problem?

I'm currently working on a tool called Meeting Canary, from which a note-taking interface is displayed for a given calendar meeting. Many meetings have links to relevant places, such as video conferencing apps (especially since the COVID-19 situation has moved many people to remote work).

I decided it would be nice to render a small icon next to the links, as a way to tease the content to my users:

![Newsletter planning session with our icons](/blog/images/newsletter_planning.png)

After hunting for a good way to fetch icons for a given link, I found one that was a JSON API endpoint, but I wasn't very satisfied with this solution – I did not want to complicate my life by using it, since I still needed to write code to figure out the best icon to display from the list I got back.

Also, I did not find a single service that provided fallbacks, or an icon that would be shown if the site is unreachable or if it had no icons at all.

After all, <a href="https://gravatar.com/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/gravatar.com" alt="gravatar.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Gravatar</a> does this very well for email addresses, and it was strange that no one had done this with favicons yet! So I got to work.

## It was really simple to make, right?

When it comes to standards, the web is pure chaos. When building a product to fetch favicons, you should expect no mercy.

![Starwars Image saying you'll never find a more wretched scum and villany](/blog/images/starwars.png)

Some sites have no icons at all. Some sites have only a few of the icons from the spec. Some sites use strange sizes. Some sites don't even bother to tell you the size (in pixels) of the icons.

Some sites have completely broken DNS or server issues (like infinite redirect loops). Some send confusing or broken headers. Some sites serve invalid HTML or JSON. Some sites have 404 Not Found errors on their icons. Some sites used weird caching schemes. Some don't specify a MIME type or a file extension so you have to parse the actual image to know what you're dealing with.

The list of difficulties goes on – for example one prominent clothing retailer's icon is simply not loadable because they have a nasty bug in their site's redirects and headers meaning you cannot simply `redirect: 'follow'` your way to the HTML page, but must chain one request after the other manually.

But I persevered through all those.

I knew there was going to be even more edge cases I hadn't considered in the future, so it was very important to build in functionality for fallback images. I never wanted to serve a broken image or a timeout.

I also had to make some decisions. Since my service was making icons available to all who wanted them, there was no telling the different use cases they would be serving. So I made the assumption that the best icon to serve would be the most high fidelity image. Also, for some use cases (such as React Native), SVG format icons would not work out of the box, and needed something like `react-native-svg` to get them to load, so I stuck to raster formats only (for the first version at least, I plan to open up SVGs as well in the future via a query parameter).

And finally, pulling all this content is time intensive. Consider that to serve an icon, one needs to:

1. Load `https://asite.com's` HTML site
2. Parse the HTML and do a query lookup to get relevant icons and the manifest file
3. Load the manifest file and parse it
4. Check for the existence of the `https://asite.com/favicon.ico` icon
5. Merge all these icons together in a list and sort them based on a best to worst criteria, while also making sure the icons themselves are reachable (and don't 404 Not Found)
6. If all this fails, generate a JPEG file on the fly as a fallback
7. Serve the icon to the user: <a href="https://asite.com/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/asite.com" alt="asite.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />Asite.com</a>

So when dealing with a slow server, it's possible that loading that icon could take quite a long time. To help with that, Icon Horse must cache the resulting list of icons and the resulting chosen icon.

I wanted to keep the functionality super simple, so when someone queried my API to get an icon:

```
https://icon.horse/icon/dev.to
```

I ended up with just the icon:

![dev.to icon](/blog/images/dev_icon.png)

## Putting it all together

From the very beginning, I knew I wanted to use a serverless approach to this service. The landing page is built out of Next.js and the service itself sits in a lambda function hosted on Amazon.

After struggling a little bit with getting the environment set up (it had to have image processing capability as well as a few other things), I managed to get it working and running properly.

And there you have it. I launched on <a href="https://www.producthunt.com/" target="_blank" rel="noopener noreferrer"><img src="https://icon.horse/icon/www.producthunt.com" alt="www.producthunt.com favicon" style="display: inline; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" />ProductHunt</a> (among other places) and was surprised by the overwhelming positive reception – I got almost 200 upvotes and almost 1000 unique visitors. What surprised me the most is how a favicon fetcher service I thought would be niche and developer only was actually really well understood by all kinds of people.

I learned a lot about the weird world of favicons and solved my own need, but above all had a lot of fun doing it.

Thanks for reading. 

There's a surprising amount of pain to get that tiny little icon.

Favicons, the state of the web, and indie makingThe Icon Horse blog

Icon Horse + Zapier: Beautiful icons in every automation →

Favicon advanced →

Favicon Basics →

Getting started with Icon Horse →

How & why I built a favicon fetching service →