Showing posts with label favicon. Show all posts
Showing posts with label favicon. Show all posts

Monday, 23 February 2026

Buat Favicon.ico dengan PixelLab dan imagemagick

Written by  |   |  Published in: , ,  |  No comments  

 

Baik, Guru Duan!
Saya jelaskan langkah paling aman dan bersih untuk mengganti favicon Moodle menggunakan desain yang Guru buat di PixelLab.

🟩 LANGKAH 1 — Buat Desain di PixelLab

Di PixelLab:

  1. Buat kanvas 1:1 (square), misalnya 512×512 px atau 1024×1024 px

  2. Setelah selesai desain → Export sebagai PNG (transparan atau tidak)

  3. Transfer PNG itu ke laptop (via WhatsApp, Telegram, kabel, dsb.)

Setelah PNG ada di laptop, kita lanjut.

🟩 LANGKAH 2 — Ubah PNG menjadi favicon.ico

Ada dua cara:

Cara A — Konversi lewat terminal (disarankan)

Install ImageMagick:

sudo apt install imagemagick

Konversi PNG menjadi ICO multi-size:

convert icon.png -define icon:auto-resize=64,48,32,16 favicon.ico

Atau, jika PNG besar:

convert icon.png -resize 256x256 favicon.ico

Hasilnya: favicon.ico.

Cara B — Konversi online (lebih mudah)

Bisa pakai:

  • favicon.io

  • convertico.com

  • iconifier.net

Upload PNG → download favicon.ico

🟩 LANGKAH 3 — Upload favicon.ico ke server Moodle

Jika favicon Moodle Anda berada di:

/var/www/html/moodle/favicon.ico

Maka cukup upload menggantikan file itu:

scp favicon.ico admincbt@IP_SERVER:/var/www/html/moodle/

Jika permission error → beri izin dulu:

sudo chmod 644 /var/www/html/moodle/favicon.ico

Lalu SCP lagi.

🟩 LANGKAH 4 — Purge Cache Moodle

Sangat penting karena favicon di-cache kuat oleh Moodle.

sudo -u www-data php /var/www/html/moodle/admin/cli/purge_caches.php

Atau dari web:

Site administration → Development → Purge all caches

🟩 LANGKAH 5 — Refresh browser (harus Ctrl+Shift+R)

Chrome/Firefox menyimpan favicon di cache lama.

Tekan:

Ctrl + Shift + R

atau

Ctrl + F5

Baru favicon akan berubah.


Ganti favicon ico moodle

Written by  |   |  Published in: ,  |  No comments  

 

perhatikan lokasi

=================== 

 $ sudo cp ~/cbt/ico/favicon.ico /var/www/html/moodle/favicon.ico
sudo chmod 644 /var/www/html/moodle/favicon.ico


==========

Siap Guru Duan 👍

Karena di Within HEAD sudah ada <style>...</style>, kita tinggal tambahkan baris favicon di luar tag <style>, jangan dimasukkan ke dalam style.

Jadi gabungnya seperti ini:

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

<style>
  .footer-section .helplink, .footer-section .helplinkbox {
      display: none !important;
  }
</style>

⚠ Penting:

  • <link rel="icon"> tidak boleh di dalam <style>

  • Letakkan di atas atau bawah <style> bebas

  • Pastikan tidak ada tag <head> karena Moodle sudah otomatis di dalam <head>

Setelah Save

  1. Purge cache Moodle:

sudo -u www-data php /var/www/html/moodle/admin/cli/purge_caches.php

  1. Hard refresh browser:

Ctrl + Shift + R

Kalau masih belum berubah, saya bisa cek apakah Moodle tema Boost masih menyuntik favicon sendiri dan kita override secara lebih kuat.

 

Pertanyaan bagus sekali, Guru Duan 👍

Sebenarnya tidak wajib ubah jadi ?v=3.
Itu hanya trik untuk mengatasi cache browser.

🧠 Kenapa perlu ?v=3?

Browser menyimpan favicon sangat lama.
Kalau URL-nya tetap:

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

Browser berpikir:

“Ini file yang sama seperti kemarin, tidak perlu download ulang.”

Padahal isi file sudah berubah.

🔥 Dengan ?v=3

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

Browser menganggap itu URL berbeda, sehingga:

✔ Dipaksa download ulang
✔ Cache lama dilewati
✔ Favicon langsung berubah

🎯 Analogi sederhana

  • /favicon.ico → dianggap file lama

  • /favicon.ico?v=2 → dianggap file baru

  • /favicon.ico?v=3 → dianggap file baru lagi

Isinya sama-sama mengambil file yang sama di server, hanya query string saja yang berubah.

📌 Kapan perlu ubah angka?

Hanya saat:

  • Ganti favicon lagi

  • Browser masih menampilkan favicon lama

Kalau favicon sudah stabil dan tidak akan diganti lagi, angka itu boleh dibiarkan.

🟢 Kesimpulan untuk Guru Duan

Ubah ke ?v=3 hanya supaya:

✔ Browser tidak pakai cache lama
✔ Perubahan terlihat langsung

Kalau sekarang sudah tampil favicon baru tanpa mengubah versi pun, tidak perlu ubah lagi 👍

Kalau Guru mau, saya bisa jelaskan juga bagaimana Nginx kadang ikut menyimpan cache favicon.