Yes, I know the title is a bit confusing… While I was reading my RSS feeds today, I came across an article by Zach Leatherman, one of the blogs I follow.

It was an article about the favicon of the relevant page appearing per link when linking to any page on the page:

As you can see in the links above, there is a favicon of that site at the beginning of each link. It’s actually an article about how to automate it.

a[href*="twitter.com"]:before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  width: 1em;
  height: 1em;
  margin: 0 .2em;
  background-size: contain;
  background-image: url("https://v1.indieweb-avatar.11ty.dev/https%3A%2F%2Fwww.twitter.com%2F/");
}

I was wondering how it would be if I created this service myself. Actually, the logic is very simple. It is enough to write the address of the website where you will use the service URL + link as the CSS background image.

See the Pen CSS Only External Link Favicon System Sample by Ibrahim Nergiz (@phyesix) on CodePen.

I immediately started working to see if I could do service in the same way. I tried to create a Restful API infrastructure with Node JS and Express JS Framework. Two basic folders, controllers and routes, seem to have taken care of almost everything.

Github Repo: https://github.com/phyesix/cssfavicon

Codepen: https://codepen.io/phyesix/pen/eYeOeLL