Hareketli Favicon ve Statik ICO Alternatifleri

Hareketli favicon, hedef tarayıcılarda kontrol edilmesi gereken bir web sitesi davranışıdır. ImgConvert, bir GIF dosyasının ilk karesinden statik bir ICO yedek simgesi hazırlayabilir. Animasyonu koruma seçeneği sunmaz ve hareketli ICO oluşturmaz.

Hareketli Favicon Nedir?

Favicon, İngilizce "favorite icon" (favori simgesi) ifadesinin kısaltmasıdır; tarayıcı sekmenizde, yer imlerinizde ve adres çubuğunda görünen küçük simgedir. Hareketli favicon, birden fazla kareyi sırayla göstererek tarayıcı sekmesinde görülebilen hareket efektleri oluşturur.

Yaygın kullanım alanları şunlardır:

• Bildirim göstergeleri — Yeni mesajları haber vermek için büyüyüp küçülme veya yanıp sönme
• Yükleme animasyonları — İçerik işlenirken dönen bir simge
• Marka kimliğini yansıtma — Markanın karakterini yansıtan hafif bir logo animasyonu
• Dönemsel etkinlikler — Bayramlar, özel günler veya kampanyalar için geçici hareketli simgeler

Kullanışlı Bir İlk Kare Hazırlayın

16×16 veya 32×32 boyutunda da tanınabilen basit bir simge seçin. GIF boş bir kareyle veya kademeli görünme efektiyle başlıyorsa önce bir görsel düzenleyicide daha uygun bir sabit kare seçin. Dönüştürücüde kare seçme özelliği yoktur.

Animasyon Tasarım İlkeleri

Bunlar ayrı bir düzenleyicide animasyon tasarlamak için başlangıç önerileridir; ICO dönüştürücünün sınırları veya ayarları değildir. Zamanlamayı gerçek harekete göre ayarlayın ve gereksiz yanıp sönmelerden kaçının.

Basit Tutun

İyi hareketli favicon tasarımları ölçülüdür. 16×16 ile 32×32 piksel arasında karmaşıklık, görsel kalabalığa dönüşür:

• Çoğu efekt için en fazla 2-4 kare
• Basit hareket — Büyüyüp küçülme, yanıp sönme, dönme veya kayma
• Her karede net bir siluet
• Yavaş zamanlama — Her kare döngüsü için 500 ms veya daha uzun süre

Animasyon Türüne Göre Zamanlama

İlk Kare Kuralı

Dönüştürücü, statik ICO çıktısı için ilk kareyi kullanır. Ayrı olarak uygulanan animasyon oynatılsa da oynatılmasa da bu kare tek başına işlevini yerine getirmelidir:

• Ek bağlam olmadan tanınabilen marka simgesi
• Hem 16×16 hem de 32×32 piksel boyutunda netlik
• Hem açık hem de koyu tarayıcı arayüzünde iyi kontrast
• Yazı içermeyen tasarım (favicon boyutlarında okunamaz)

Adım Adım Oluşturma Süreci

Bunlar ayrı bir düzenleyicide animasyon tasarlamak için başlangıç önerileridir; ICO dönüştürücünün sınırları veya ayarları değildir. Zamanlamayı gerçek harekete göre ayarlayın ve gereksiz yanıp sönmelerden kaçının.

1. Adım: Karelerinizi Tasarlayın

Animasyonunuz için 2-4 farklı kare oluşturun:

Büyüyüp küçülen bir bildirim simgesi için:

• Kare 1: Normal simge (temel durum)
• Kare 2: Hafif parlayan veya daha büyük görünen simge
• Kare 3: Normal duruma dönüş (akıcı bir döngü için)

Bir yükleme animasyonu için:

• Kare 1: Saat 12 yönünde simge
• Kare 2: Saat 3 yönünde simge
• Kare 3: Saat 6 yönünde simge
• Kare 4: Saat 9 yönünde simge

2. Adım: Kareleri Ayrı Ayrı Dışa Aktarın

Her kareyi 32×32 piksel boyutunda PNG olarak dışa aktarın:

• Şeffaf bir kare gerektiğinde PNG dosyasını alfa kanalıyla dışa aktarın.
• Gereken yerlerde şeffaf arka planları koruyun
• Kare başına 5 KB altında kalmayı hedefleyin

3. Adım: GIF Dosyasını Oluşturun

Kareleri hareketli bir GIF dosyasında birleştirin:

Statik ICO Paketini Oluşturun

1. GIF'ten ICO'ya dönüştürme aracını açın ve en fazla 20 MB boyutunda tek bir GIF seçin.
2. İhtiyacınız olan boyutları seçin: 16, 32, 48, 64, 128 veya 256 px. Başlangıçta 32, 64 ve 128 seçilidir.
3. Dönüştürün, indirin ve icons.zip arşivini açın.
4. Tek bir simgeyi veya seçilen tüm boyutları içeren favicon.ico dosyasını kullanın. Bunlar animasyon kareleri değil, aynı sabit karenin farklı boyutlarıdır.

Dikdörtgen görseller, çevrelerinde şeffaf boşluk bırakılarak kare alana sığdırılır. Kaynak görseldeki opak arka plan opak kalır. PNG simgeleri ve manifest dosyası içeren bir web sitesi paketi için Favicon oluşturucu aracını kullanın.

Yedek Simgeyi Web Sitenize Ekleyin

Arşivden çıkardığınız dosyayı web sitenizin kök dizinine yükledikten sonra sayfanın head bölümünde dosyaya başvurun:

<link rel="icon" href="/favicon.ico">

Yolu sitenizdeki dosya konumuna göre düzenleyin. Dönüştürücü dosya kurulumu yapmaz veya web sitenizi düzenlemez. MDN'nin icon başvurusu, HTML bildirimini açıklar.

Favicon Hareket Etmek Zorundaysa

Orijinal animasyonu saklayın. Hareketli bir görseli favicon olarak kullanmak veya web sitesindeki JavaScript koduyla simge karelerini değiştirmek ayrı bir uygulama işidir. Bir görsel görüntüleyicide hareket eden dosyanın tarayıcı sekmesinde, yer iminde veya kısayolda da hareket edeceğini varsaymayın. Gereken her tarayıcıyı test edin ve kolayca seçilebilen statik bir yedek simge sağlayın.

Web Sitesi İçin JavaScript Örneği

Web sitesi geliştiricileri, mevcut bir favicon bağlantısının URL adresini değiştirmeyi deneyebilir. Bu, ayrı bir web sitesi kodudur; buraya GIF yüklemek dosyayı web sitesine eklemez veya animasyonu kurmaz. Her kare için statik dosyalar hazırlayın ve kullanışlı bir statik simgeyle başlayın.

Aşağıdaki örnek, sayfa görünürken iki PNG URL adresi arasında her 500 ms'de bir geçiş yapar. Sayfa gizlendiğinde veya azaltılmış hareket tercih edildiğinde durur. Bu örnek güncelleme mekanizmasını gösterir; her tarayıcı sekmesinin, yer iminin veya işletim sistemi kısayolunun hareket edeceğini garanti etmez. Kullanmadan önce gerçek hedef ortamda test edin.

<link id="favicon-demo" rel="icon" type="image/png" href="/icon-1.png">
<script>
  const icon = document.getElementById('favicon-demo');
  const frames = ['/icon-1.png', '/icon-2.png'];
  const motion = window.matchMedia('(prefers-reduced-motion: reduce)');
  let timer = null;
  let frameIndex = 0;

  function stopAnimation() {
    if (timer !== null) window.clearInterval(timer);
    timer = null;
    frameIndex = 0;
    icon.href = frames[0];
  }

  function syncAnimation() {
    stopAnimation();
    if (document.hidden || motion.matches) return;
    timer = window.setInterval(() => {
      frameIndex = (frameIndex + 1) % frames.length;
      icon.href = frames[frameIndex];
    }, 500);
  }

  document.addEventListener('visibilitychange', syncAnimation);
  motion.addEventListener('change', syncAnimation);
  syncAnimation();
</script>

Hareketli Favicon Ne Zaman Kullanılmalı, Ne Zaman Kullanılmamalı?

Uygun Kullanım Alanları

Uygun Olmayan Kullanım Alanları

Performans İçin Optimizasyon

Kare sayısını düşük tutun, bildirim artık gerekli olmadığında animasyonu durdurun ve sayfayı animasyon açıkken ve kapalıyken test edin. Daha hızlı bir zamanlayıcı, mutlaka daha iyi bir favicon anlamına gelmez. Aynı simge için birden fazla zamanlayıcı çalıştırmayın. Bunu bir bileşene entegre ediyorsanız bileşen kaldırıldığında olay dinleyicilerini kaldırın ve zamanlayıcıyı durdurun. Örnek, bağımsız bir sayfa kodudur.

MDN'nin Page Visibility API rehberi, burada kullanılan görünürlük sinyalini açıklar. Tek başına bir simge görülmeyebileceği veya ekran okuyucu tarafından duyurulmayabileceği için görsel animasyon, sayfadaki erişilebilir bir durum mesajını tamamlamalıdır.

Sonucu Kontrol Edin

• Yayına alınan simgenin URL adresini açın ve küçük boyutları kontrol edin.
• Eski simge görünmeye devam ediyorsa mevcut simge bildirimlerini ve tarayıcı önbelleğini kontrol edin.
• Animasyonu, indirilen statik ICO dosyasından ayrı olarak test edin.

Gerçekte desteklediğiniz her tarayıcıyı ve cihazı hem yeni hem de önbellek içeren bir oturumla kontrol edin. İlk kareyi, ayrıca uygulanan hareketi, azaltılmış hareket tercihini ve gizlenmiş sekmeye geri dönüşü test edin. Simgeyi 16×16 ve 32×32 boyutlarında, açık ve koyu tarayıcı arayüzlerinde inceleyin. Animasyon güvenilir çalışmıyorsa statik yedek simgeyi koruyun. Dosya boyutu hedefleri projeye ait sınırlardır; tüm tarayıcılar için geçerli evrensel sınırlar değildir.

Sık Sorulan Sorular

Birden fazla ICO boyutu seçmek GIF animasyonunu korur mu?

Hayır. Tüm boyutlar ilk kareden oluşturulur. Animasyonu Koru seçeneği yoktur.

Burada başka bir kare seçebilir miyim?

Hayır. İstediğiniz sabit kareyi başka bir yerde hazırlayın; PNG olarak kaydettiyseniz ardından PNG'den ICO'ya dönüştürme aracını kullanın.

Eski favicon neden hâlâ görünüyor?

Yayına alınan dosyanın URL adresinin yüklendiğini doğrulayın, çakışan simge bildirimlerini inceleyin ve yeni bir tarayıcı oturumunu önbellek içeren bir oturumla karşılaştırın. Sekme simgeleri, yer imleri ve kaydedilmiş kısayollar farklı dosyalar veya önbellekler kullanabilir. Bir sayfadaki bağlantıyı güncellemek, kaydedilmiş tüm simgeleri değiştirmez.

Yalnızca CSS ile sekme simgesini hareketlendirebilir miyim?

Web sayfasının içindeki bir görsele uygulanan CSS animasyonu, tarayıcının sekme simgesini hareketlendirmez. Doğrudan bağlantı verilen hareketli dosyayı veya JavaScript ile URL değiştirme denemesini ayrı uygulamalar olarak ele alın ve gerekli tarayıcı davranışını test edin.

Ne kadar hareket kullanmalıyım?

Yalnızca amaçlanan durumu anlatacak kadar hareket kullanın. Statik bir rozet bazen bunu daha açık anlatabilir. Hızlı yanıp sönmelerden kaçının, tanınabilen sabit bir kareyi koruyun ve azaltılmış hareket davranışını kontrol edin. Zamanlamayı büyük bir önizlemeye göre değerlendirmek yerine gerçek küçük görüntüleme boyutunda test edin.