JavaScript library
A small script (favicon.js, no dependencies) that shows favicons in your page without building the URLs yourself.
Mark images with the data-site-url attribute and the script does the rest: it asks the API for the favicon of the site
and, when there is one, puts it into src of the image. When there is no favicon, the image keeps its own src,
so it works as a placeholder.
1. Add the script once, e.g. at the end of <head>:
<script src="https://favicon.intami.pl/favicon.js" defer></script>
2. Mark the images:
<img data-site-url="wp.pl" src="default-icon.png" width="32" height="32" alt="">
<img data-site-url="https://github.com/golang/go" src="default-icon.png" width="32" height="32" alt="">
Attributes and classes:
| Name | Description | Hints |
|---|---|---|
| data-site-url | The web site whose favicon is shown: a domain name (wp.pl) or any URL of the site (https://www.wp.pl/news?id=1). | Required. Only the host name is used; img elements only. |
| src | Image shown while the favicon is loading and when there is none. | Optional. Use your default icon or a transparent image. |
| class favicon-found | Added when the favicon was found and set as src. | |
| class favicon-missing | Added when the site has no favicon or data-site-url is invalid; src is not changed. | E.g. img.favicon-missing { display: none; } hides such images. |
How it works:
- The favicon is loaded in the background;
srcis replaced only when it has loaded, so there are no broken image icons. - Images added to the page later (e.g. by AJAX or a JavaScript framework) and changes of
data-site-urlare handled automatically. - Every site is asked only once per page, even when it is shown many times; the browser caches the answers for a day.
- The script talks to the server it was loaded from.
Example - hide sites without a favicon:
<style> img.favicon-missing { display: none; } </style>
<a href="https://github.com"><img data-site-url="https://github.com" width="16" height="16" alt=""> GitHub</a>
Live demo:
(no favicon, placeholder stays)
