Evet, başlık biraz karışık oldu farkındayım… Bugün RSS lerimi incelerken takip ettiğim bloglardan birisi olan Zach Leatherman ın yazısına denk geldim.

Sayfa içerisinde herhangi bir sayfaya link verirken link başına ilgili sayfanın favicon unun görünmesi ile alakalı bir yazıydı:

Yukarıdaki linklerde de görebileceğiniz üzere her link başında o sitenin faviconu bulunuyor. Bunu nasıl otomatize edileceği ile alakalı bir yazı aslında.

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/");
}

Ben de bu servisi ben oluştursam nasıl olur diye merak ettim. Aslında mantık çok basit. CSS background-image olarak servis urli + linkini kullanacağınız web sitesinin adresini yazmanız yeterli oluyor.

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

https://cpwebassets.codepen.io/assets/embed/ei.js

Hemen kolları sıvadım ve aynı şekilde ben de bir servis yapabilir miyim diye çalışmaya başladım. Node JS ve Express JS Framework u aracılığı ile Restfull API altyapısı oluşturmaya çalıştım. Controllers ve Routes şeklinde iki temel klasör hemen hemen her şeyi halletti sanki.

Kodları merak edenler için Github Reposu: https://github.com/phyesix/cssfavicon

Denemek isteyenler için de Codepen Linki: https://codepen.io/phyesix/pen/eYeOeLL