Favicon Animasi dan ICO Statis sebagai Cadangan

Favicon animasi merupakan perilaku situs web yang perlu Anda periksa di browser tujuan. ImgConvert dapat membuat ICO statis sebagai cadangan dari frame pertama GIF. Alat ini tidak memiliki opsi untuk mempertahankan animasi dan tidak menghasilkan ICO animasi.

Apa Itu Favicon Animasi?

Favicon (singkatan dari "favorite icon") adalah ikon kecil yang ditampilkan pada tab browser, bookmark, dan bilah alamat Anda. Favicon animasi menampilkan beberapa frame secara bergantian untuk menghasilkan efek gerakan yang terlihat pada tab browser.

Contoh penggunaan yang umum:

• Indikator notifikasi — Berdenyut atau berkedip untuk menandakan pesan baru
• Animasi pemuatan — Ikon berputar saat konten diproses
• Ekspresi merek — Animasi logo yang halus untuk menyampaikan karakter merek
• Acara musiman — Ikon animasi sementara untuk hari raya atau promosi

Menyiapkan frame pertama yang berguna

Pilih simbol sederhana yang tetap mudah dikenali pada ukuran 16×16 atau 32×32. Jika GIF dimulai dengan frame kosong atau efek fade-in, pilih gambar diam yang lebih sesuai di editor gambar terlebih dahulu. Konverter ini tidak memiliki pemilih frame.

Prinsip Desain Animasi

Panduan ini merupakan titik awal untuk merancang animasi di editor terpisah, bukan batasan atau pengaturan konverter ICO. Sesuaikan durasi dengan gerakan yang sebenarnya dan hindari kedipan yang tidak diperlukan.

Buat Tetap Sederhana

Favicon animasi yang baik menggunakan gerakan secukupnya. Pada ukuran 16×16 hingga 32×32 piksel, desain yang rumit justru mengganggu tampilan:

• Maksimal 2-4 frame untuk sebagian besar efek
• Gerakan sederhana — berdenyut, berkedip, berputar, atau bergeser
• Siluet yang jelas pada setiap frame
• Durasi yang lambat — 500ms atau lebih per siklus frame

Sesuaikan Durasi dengan Jenis Animasi

Aturan Frame Pertama

Konverter menggunakan frame pertama untuk hasil ICO statisnya. Frame tersebut harus tetap berfungsi sebagai ikon tersendiri, baik animasi yang diterapkan secara terpisah berjalan maupun tidak:

• Simbol merek dapat dikenali tanpa konteks tambahan
• Jelas pada ukuran 16×16 maupun 32×32 piksel
• Kontras yang baik pada antarmuka browser terang maupun gelap
• Tanpa teks (tidak terbaca pada ukuran favicon)

Proses Pembuatan Langkah demi Langkah

Panduan ini merupakan titik awal untuk merancang animasi di editor terpisah, bukan batasan atau pengaturan konverter ICO. Sesuaikan durasi dengan gerakan yang sebenarnya dan hindari kedipan yang tidak diperlukan.

Langkah 1: Rancang Frame Anda

Buat 2-4 frame berbeda untuk animasi Anda:

Untuk denyut notifikasi:

• Frame 1: Ikon normal (kondisi awal)
• Frame 2: Ikon dengan sedikit cahaya atau tampilan lebih besar
• Frame 3: Kembali normal (agar pengulangan mulus)

Untuk animasi pemuatan:

• Frame 1: Ikon pada posisi pukul 12
• Frame 2: Ikon pada posisi pukul 3
• Frame 3: Ikon pada posisi pukul 6
• Frame 4: Ikon pada posisi pukul 9

Langkah 2: Ekspor Setiap Frame

Ekspor setiap frame sebagai PNG berukuran 32×32 piksel:

• Ekspor PNG dengan alpha channel jika Anda memerlukan frame transparan.
• Pertahankan latar belakang transparan jika diperlukan
• Usahakan ukuran setiap frame di bawah 5KB

Langkah 3: Susun GIF

Gabungkan frame menjadi GIF animasi:

Membuat paket ICO statis

1. Buka GIF ke ICO dan pilih satu GIF berukuran maksimal 20 MB.
2. Pilih ukuran yang Anda perlukan: 16, 32, 48, 64, 128, atau 256 px. Pilihan awalnya adalah 32, 64, dan 128.
3. Konversi, unduh, lalu ekstrak icons.zip.
4. Gunakan ikon individual atau favicon.ico yang disertakan dan berisi semua ukuran yang dipilih. Semuanya adalah variasi ukuran dari satu gambar diam, bukan frame animasi.

Gambar persegi panjang dimuat di dalam bidang persegi dengan ruang kosong transparan di sekelilingnya. Latar belakang tidak transparan pada gambar sumber akan tetap tidak transparan. Untuk paket situs web berisi ikon PNG dan manifest, gunakan Pembuat Favicon.

Memasang ikon cadangan di situs web Anda

Setelah menempatkan file hasil ekstraksi di direktori utama situs web Anda, tambahkan referensinya pada bagian head halaman:

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

Sesuaikan jalur dengan lokasi file di situs Anda. Konverter tidak memasang file atau menyunting situs web Anda. Referensi ikon MDN menjelaskan deklarasi HTML tersebut.

Jika favicon harus bergerak

Simpan animasi aslinya. Menggunakan gambar animasi sebagai favicon atau mengganti frame ikon melalui JavaScript situs web merupakan pekerjaan implementasi yang terpisah. Jangan berasumsi bahwa file yang bergerak di penampil gambar juga akan bergerak pada tab browser, bookmark, atau pintasan. Uji setiap browser yang dibutuhkan dan sediakan ikon statis cadangan yang mudah dikenali.

Contoh JavaScript untuk situs web

Pengembang situs web dapat mencoba mengganti URL pada tautan favicon yang sudah ada. Ini merupakan kode situs web tersendiri; mengunggah GIF di sini tidak menambahkannya ke situs web atau memasang animasi. Siapkan file statis untuk setiap frame dan mulai dengan ikon statis yang berguna.

Contoh di bawah mengganti dua URL PNG setiap 500 ms saat halaman terlihat. Animasi berhenti ketika halaman tersembunyi atau pengguna meminta pengurangan gerakan. Contoh ini memperlihatkan mekanisme pembaruan, bukan jaminan bahwa setiap tab browser, bookmark, atau pintasan sistem operasi akan menampilkan animasi. Uji pada tujuan penggunaan yang sebenarnya sebelum mengandalkannya.

<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>

Kapan Sebaiknya Menggunakan Favicon Animasi dan Kapan Sebaiknya Menghindarinya

Penggunaan yang Tepat

Penggunaan yang Kurang Tepat

Optimasi Kinerja

Gunakan sedikit frame, hentikan animasi ketika notifikasinya tidak lagi relevan, dan uji halaman dengan animasi aktif maupun nonaktif. Timer yang lebih cepat belum tentu menghasilkan favicon yang lebih baik. Hindari menjalankan beberapa timer untuk ikon yang sama. Jika diterapkan dalam komponen, hapus event listener dan hentikan timer saat komponen dilepas. Contoh di atas merupakan kode halaman yang berdiri sendiri.

Panduan Page Visibility API dari MDN menjelaskan sinyal visibilitas yang digunakan di sini. Animasi visual sebaiknya melengkapi pesan status di halaman yang dapat diakses, karena ikon saja mungkin tidak terlihat atau tidak diumumkan oleh teknologi bantu.

Memeriksa hasil

• Buka URL ikon yang sudah dipasang dan periksa ukuran kecilnya.
• Periksa deklarasi ikon yang sudah ada dan cache browser jika ikon lama masih muncul.
• Uji animasi secara terpisah dari unduhan ICO statis.

Periksa setiap browser dan perangkat yang benar-benar Anda dukung, termasuk sesi baru dan sesi yang menggunakan cache. Uji frame pertama, gerakan yang diterapkan secara terpisah, preferensi pengurangan gerakan, dan perilaku saat kembali dari tab tersembunyi. Periksa simbol pada ukuran 16×16 dan 32×32 di antarmuka browser terang dan gelap. Jika animasi tidak berjalan secara konsisten, pertahankan ikon statis cadangan. Target ukuran file adalah batas anggaran proyek, bukan batas universal browser.

Pertanyaan Umum

Apakah memilih beberapa ukuran ICO mempertahankan animasi GIF?

Tidak. Semua ukuran berasal dari frame pertama. Tidak ada pengaturan untuk mempertahankan animasi.

Apakah Anda bisa memilih frame lain di sini?

Tidak. Siapkan gambar diam yang diinginkan di aplikasi lain, lalu gunakan PNG ke ICO jika Anda menyimpannya sebagai PNG.

Mengapa favicon lama masih muncul?

Pastikan URL file yang sudah dipasang dapat dimuat, periksa deklarasi ikon yang saling bersaing, lalu bandingkan sesi browser baru dengan sesi yang menggunakan cache. Ikon tab, bookmark, dan pintasan yang terpasang bisa menggunakan aset atau cache berbeda. Memperbarui tautan di satu halaman tidak mengganti semua ikon yang tersimpan.

Apakah CSS saja dapat menganimasikan ikon tab?

Animasi CSS pada gambar di dalam halaman web tidak menganimasikan ikon tab browser. Perlakukan file animasi yang ditautkan langsung atau percobaan penggantian URL melalui JavaScript sebagai implementasi terpisah, lalu uji perilaku browser yang dibutuhkan.

Seberapa banyak gerakan yang sebaiknya Anda gunakan?

Gunakan gerakan secukupnya untuk menyampaikan status yang dimaksud. Penanda statis terkadang dapat menyampaikannya dengan lebih jelas. Hindari kedipan cepat, pertahankan gambar diam yang mudah dikenali, dan periksa perilaku pengurangan gerakan. Uji durasi pada ukuran tampilan kecil yang sebenarnya, bukan hanya menilai pratinjau berukuran besar.