Animasyonlu favicon'lar: tarayıcı sekmenizi hareket ettirin (canlı demo ile)

Okurken muhtemelen bu sekmenin üstünde bir şeyin hareket ettiğini fark etmişsinizdir. Bu bir animasyonlu favicon — Gmail'in yeni mail sayısı için, Discord'un da bildirim noktaları için kullandığı aynı numara, ama sizinki canvas üzerine çizebileceğiniz hemen hemen her şeyi yapabilir.

Bu yazıda kurcalayabileceğiniz canlı bir demo var. Bir butona tıklayın, gerçek tarayıcı sekmenizin değişmesini izleyin. Ekran görüntüsü yok, gömülü video yok — şu an baktığınız favicon'un kendisi demoya dönüşüyor.

Bir favicon'u neden animasyonlu yapasınız ki?

Açık konuşmak gerekirse çoğu sitenin bunu yapmaması gerek. Her sekmedeki dönen bir ikon hızla rahatsız edici hale gelir ve CPU yer. Ama gerçekten faydalı olduğu birkaç durum var:

Yükleme veya işlem durumları. Uzun süren upload'lar, export'lar veya build'ler. Kullanıcılar beklerken sekme değiştirir, animasyonlu favicon işin hâlâ devam ettiğini söyler.
Bildirim rozetleri. Yeni mesajlar, bahsedilmeler, uyarılar. Hafifçe nabız atan kırmızı bir nokta, sabit olandan daha hızlı fark edilir.
Canlı veri akışları. Trading panelleri, monitoring araçları, spor skorları — sekme başlığının yetmediği her yer.
Marka anları. Tatil dönemine özel bir spinner, lansman günü kutlaması. Az kullanın.

Sizin senaryonuz bunlardan biri değilse animasyonu atlayın. İyi bir statik SVG favicon dosya boyutu, koyu tema ve pil ömrü açısından zaten önde.

Canlı demo: hemen deneyin

Bir animasyon seçin. Sonra tarayıcı sekmenize bakın — yukarıdaki minik ikon yeniden çizilen şey.

8× yakınlaştırılmış önizleme

Gerçek favicon 16×16 piksel. O boyutta detayı görmek zor olduğundan soldaki kutu aynı canvas'ı 8× yakınlaştırma ve nearest-neighbor ölçekleme ile yansıtıyor.

Durum: boşta

Animasyon döngüsü artık tamamen bir Web Worker içinde çalışıyor, tıpkı Aymkdn kütüphanesindeki favicon_worker.js gibi. Her 20 ms'de (50 fps) worker OffscreenCanvas üzerine çiziyor, convertToBlob + FileReader ile dışa aktarıyor ve elde edilen data URL'i sayfaya geri postluyor. Ana iş parçacığı tek bir şey yapıyor: o string'i faviconLink.href değerine atıyor. Bu yüzden ikon artık GitHub demosu kadar pürüzsüz hareket ediyor.

Bu deseni gerçek bir üründe görmek ister misin? Random Picker Wheel dönen çarkıyla senkron animasyonlu bir favicon kullanıyor — rotasyon tabanlı bir arayüz, hareketli bir simgenin ürüne gerçekten uyduğu nadir durumlardan biri. Sayfayı aç, çarkı çevir, sekmenin simgesinin de onunla birlikte döndüğünü gör.

Aslında nasıl çalışır

Üç adım. Tüm teknik bu kadar:

// 1. Favicon link öğesini al ya da oluştur
let link = document.querySelector('link[rel~="icon"]');
if (!link) {
  link = document.createElement('link');
  link.rel = 'icon';
  document.head.appendChild(link);
}

// 2. Gizli bir canvas üzerine bir kare çiz
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');

function drawFrame(t) {
  const scale = 0.5 + 0.5 * Math.abs(Math.sin(t / 400));
  ctx.clearRect(0, 0, 32, 32);
  ctx.fillStyle = '#ef4444';
  ctx.beginPath();
  ctx.arc(16, 16, 14 * scale, 0, Math.PI * 2);
  ctx.fill();

  // 3. Canvas'ı data URL olarak dışa aktar ve favicon'a ata
  link.href = canvas.toDataURL('image/png');

  requestAnimationFrame(drawFrame);
}

requestAnimationFrame(drawFrame);

Yaklaşık 15 satır ile çalışan bir nabız atan nokta hazır. Daha gösterişli olan her şey sadece canvas üzerine farklı şekiller çizmek.

Tarayıcı desteğinin gerçekleri

İşler burada çirkinleşiyor. Tarayıcılar favicon'u ne kadar agresif animasyonla güncellediğinde oldukça farklılaşıyor:

Firefox: sekme odakta olmadığında bile sorunsuz animasyon yapar. Altın standart.
Chrome / Edge: sekme aktifken animasyon yapar. Sekme değiştirdiğinizde requestAnimationFrame saniyede yaklaşık bir kareye düşürülür, animasyon yavaşlar veya duraklar.
Safari: odakta animasyon yapar ama bazen ikonu yalnızca yavaş aralıklarla günceller. Pürüzsüz harekete bel bağlamayın.

En yaygın kullanım senaryoları için bu aslında yeterli — bildirim noktaları ve ilerleme durumlarının zaten saniyede bir civarında güncellenmesi yeter. Pürüzsüz 60 fps spinner'lar çoğunlukla kozmetiktir.

Web Worker numarası (arka plan sekmeleri için)

Yukarıdaki "GitHub tarzı çevirme" düğmesi Aymkdn/animated-favicon kütüphanesinin imza animasyonunun doğrudan portu: ikon A'yı 3 saniye tut, genişliğini kosinüsle sıfıra sıkıştır, ikon B'ye geç ve geri genişlet. Matematik doğrudan kütüphanenin favicon_worker.js dosyasından geliyor — width = canvas.width * Math.abs(Math.cos(progress * Math.PI)), progress 0,5'i geçtiğinde kontrol ikinci görsele geçiyor.

Aymkdn'in kütüphanesi burada yaptığımızdan bir adım öteye gidiyor: bu döngüyü Web Worker içinde çalıştırıyor. Sekme arka plana atıldığında worker'lar kısıtlanmıyor, dolayısıyla animasyon devam ediyor ve OffscreenCanvas worker'ın DOM'a dokunmadan kare üretmesine izin veriyor.

Desen kabaca şöyle görünüyor:

// Sayfanızda
const worker = new Worker('favicon-worker.js');
worker.onmessage = (e) => {
  if (e.data.type === 'updateFavicon') {
    document.querySelector('link[rel~="icon"]').href = e.data.dataUrl;
  }
};
worker.postMessage({ type: 'init', images: ['icon-a.png', 'icon-b.png'] });

// favicon-worker.js içinde
const canvas = new OffscreenCanvas(16, 16);
const ctx = canvas.getContext('2d');
// ...bir kare çiz...
const blob = await canvas.convertToBlob();
const reader = new FileReader();
reader.onloadend = () => self.postMessage({ type: 'updateFavicon', dataUrl: reader.result });
reader.readAsDataURL(blob);

Uygulamanız kullanıcıların arka plan sekmesinde park ettiği türdense — sohbet istemcileri, build panoları, monitoring araçları — zahmetine değer. Aksi halde ana iş parçacığı sürümü daha basittir ve fazlasıyla yeterlidir.

Bilmeye değer birkaç şey

16×16 ya da 32×32 kullanın, daha büyüğünü değil. Favicon zaten minicik render edilir, daha büyük canvas daha uzun data URL ve kare başına daha fazla CPU demek. 32×32 keskin pikseller en doğru nokta.

Favicon'u PNG olarak ayarlayın, ICO değil. canvas.toDataURL('image/png') güvenilir biçimde çalışan tek şey. ICO'yu kendiniz kodlamaya çalışmayın.

Durduğunuzda orijinal favicon'u geri yükleyin. Animasyon başlatmadan önce link.href'i kaydedin ve beforeunload'da veya işlem bitince geri yükleyin. Yönlendirmeden sonra yarısı bozuk animasyon göstermeye devam eden sekmeler bug'lı görünür.

Sonsuza kadar animasyon yapmayın. Hafif bir nabız bile mobilde batarya tüketir. Yükleme durumu bittiğinde, kullanıcı bildirimi okuduğunda ya da sekme odağı kaybettiğinde animasyonu durdurun.

Basit durumlarda atlayın. Sadece "1 okunmamış mesaj" göstermek istiyorsanız favicon'u statik kırmızı noktalı bir sürüme değiştirin. Animasyona gerek yok. İnsanların animasyonlu favicon için kullandıklarının çoğu fazlasıyla abartılıdır.

Bunu ne zaman tercih etmeli

Animasyonlu favicon'lar şu durumlarda iyi oturur:

Animasyon kullanıcının önemsediği gerçek bir durumu yansıtıyorsa (yükleme, işlem, yeni mesaj)
Sayfa arka plan sekmesinde yaşayan türden ise
Statik bir rozet veya yalnızca sekme başlığı değişikliği aynı şeyi iletmiyorsa

Şu durumlarda kötü oturur:

Sadece süslemeyse
Sekme açık olduğu sürece animasyon hiç durmuyorsa
Safari ve mobil kullanıcılarını hedefliyorsanız, ki orada zar zor çalışır

Yukarıdaki demoyu kendi projenize taşıyın, renkleri ve şekilleri markanıza göre değiştirin ve yayınlayın. Tüm kaynak kodu bu sayfada — view source açın, kopyalayın, uyarlayın.

Kaynaklar

Aymkdn/animated-favicon GitHub'da — pasif sekmelerde de animasyona devam eden Web Worker tabanlı animasyonlu favicon kütüphanesi
The Making of an Animated Favicon — CSS-Tricks — Chris Coyier'ın canvas-favicon tekniğini adım adım anlatımı
How to animate a favicon? — Stack Overflow — birden fazla yaklaşım ve tarayıcı destek notları içeren klasik konu
OffscreenCanvas — MDN — Web Worker animasyon desenini mümkün kılan API