Post

Favicon Service: Use website icons without hosting them

Posted
Preview Image
By McPoyle
views 5 min read

Ever wanted to use icons of website but dont want to headache to store, host and keeping them updates?

Let us start with a brief introduction of favicons.

A favicon (short for “favorite icon”) is a small icon that is displayed in the browser’s address bar.

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing icons associated with a particular website. In March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time. Originally, the favicon was a file called favicon.ico placed in the root directory of a website. It was used in Internet Explorer’s favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked. favicon.ico is an image file which is generally very small in size, just few KBs.

Recently I was working on a dashboard app where the user can add their favorite links so I need to show the website icons dynamically. Storing the most common ones wont take that much space on our servers but while searching for a better way to handle this, I found that there are multiple favicon services which can help me solve this issue in a better way. Even if I store the favicons on server keeping them updated is such a hassle.

For eg, the following will always return us the latest website icon.

They are multiple favicon services including one from google which allows to use icons of websites without the hassle of storing, hosting and keeping them updated. Google’s favicon service is a free service which works for most of the website which take their SEO seriously. There are some paid services also which allow customization and increased relibilty.

Brief history of Favicon

See the Pen Favicon-Example by Whiskay (@whiskay) on CodePen.

Get favicons from any domain using a free google API

  • Google offers a secret URL that can automatically pull the favicon image of any domain. Cherries on the cake, we can ask for different sizes and the images returned are in PNG format (not ICO), meaning they will render correctly in all browsers using the <img> tag.
1
2
3
4
5
6
7
8
9
10
11
12
13

The API works using a simple GET:
`https://www.google.com/s2/favicons?domain=${domain}&sz=${size}`
The query parameters are:

`domain`: mandatory, the domain you are interested in,
`sz`: optional, a size hint such as 256.
In case the right size is not found, it will return the default one, usually 16x16.

`https://www.google.com/s2/favicons?domain=google.com&sz=128`
(returns 128x128 icon)

`https://www.google.com/s2/favicons?domain=google.com&sz=512`
(nothing found for 512x512, so returns a 16x16 PNG)

Similar service from other sources

Open-Source Service

  • github.com/seadfeng/favicon-downloader

    • The Google API is indeed useful for quick favicon retrieval. However, it has some limitations, like inconsistent quality and size availability. If you’re looking for a more robust solution, you might want to check out FaviconExtractor (faviconextractor.com). It offers multiple sizes (16x16 to 512x512), works with most websites, auto-generates SVGs when needed, and provides ready-to-use HTML snippets. It’s designed to handle cases where Google’s API might fall short.
    • FaviconExtractor also supports DuckDuckGo as a fallback source, ensuring higher success rates. It’s open-source (https://github.com/seadfeng/favicon-downloader) and can be self-hosted or used via API.
    • While Google’s hidden API is handy, tools like FaviconExtractor can offer more comprehensive solutions for developers needing reliable favicon extraction. Have you encountered any specific challenges with favicon retrieval in your projects?

Use can also manually download favicons

1

curl -v https://www.google.com/favicon.ico > favicon.ico

1

Invoke-WebRequest -OutFile 'icon.ico' -Uri 'https://www.google.com/favicon.ico' -UseBasicParsing

Browser specific tools

1
2
3
4
5
6
7
8

Copy and open this url in a new tab in a chrome/edge browser

- `chrome://favicon/https://google.com`
- `edge://favicon/https://google.com`

Right click on image

Save image as...

1
2
3
4
5

Simply right click on page and click on View Page Source, then you can find the favicon link in head tag!

e.g. :

<link href="/MyFavicon.ico" type="image/x-icon" rel="shortcut icon"/>

Conclusion

  • I have listed all the favicon services we could find but since all the services objective is just fetch and serve the icon of a website then why do we need and have so many options. Since most of the mentioned services are free of cost, the relibilty, speed ,access to fetch the favicon can vary. These services may not work for internal websites, blocked websites, deprecated website. So we have listed all the ones which we found.
  • Last word of advice: You’re dealing with the logo, the very core of their brand, of a multi-billion dollar company. You might want to check with their policy of using that logo in your project. Probably it’s OK (for example, browser don’t seem to get in trouble for having a google logo for their google search box), but I’d still take care not to raise the impression that you’re association a product of your own making with their logo.

Additional resources:

If you are interested in further reading about favicons:

Favicon Generator:

FAQs
Author:McPoyle Collection

© whiskay. Some rights reserved.