Cara menyiapkan favicon pada 2025

 (evilmartians.com)
50 poin oleh xguru 2025-02-13 | 4 komentar | Bagikan ke WhatsApp
  • Seiring cara membuat favicon menjadi makin rumit, sering kali diperlukan lebih dari 20 file PNG hanya untuk menampilkan logo situs di tab browser atau layar sentuh
  • Sebagai gantinya, artikel ini mengusulkan cara yang bisa mencakup sebagian besar lingkungan dengan jumlah file ikon yang relatif sedikit dan konfigurasi minimal

Versi yang sangat sederhana

  • Tanpa pengaturan yang rumit, cukup siapkan lima ikon inti dan satu file JSON

  • Berikut contoh tautan dasar yang dimasukkan ke HTML

    <link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->

  • Jika mendukung PWA(Progressive Web App), tambahkan juga yang berikut

    <link rel="manifest" href="/manifest.webmanifest">

  • Berikut struktur contoh file manifest.webmanifest

    {  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}

  • Karena ikon maskable bisa terpotong di sebagian tepinya, sebaiknya sisakan area lingkaran 409×409 sebagai zona aman

  • Dengan susunan ini saja, favicon sudah bisa bekerja baik di sebagian besar browser dan perangkat utama

Versi penjelasan detail

  • favicon berasal dari “favorite icon”, yaitu ikon kecil yang ditampilkan di tab browser dan tempat serupa
  • Safari belakangan ini juga sudah mendukung favicon dengan baik
  • Alih-alih membuat satu set ikon untuk berbagai resolusi, hal ini bisa ditangani secara efisien dengan SVG, beberapa ikon PNG, dan manifest sederhana

Konfigurasi Favicon terbaik

  • Dengan satu file SVG, beberapa file PNG minimum, dan file web manifest, ikon dapat ditampilkan secara konsisten di berbagai browser dan perangkat
  • SVG adalah format vektor sehingga bisa diperbesar atau diperkecil dengan bebas sesuai kebutuhan, dan beban performanya juga kecil karena diunduh di latar belakang
  • PNG hanya perlu disiapkan untuk ukuran yang benar-benar diperlukan, seperti ikon untuk Apple (apple-touch-icon) dan ikon untuk PWA
  • Format lama seperti ikon tile Windows, Safari Pinned Icon, dan rel=“shortcut” kini tidak lagi terlalu diperlukan di browser modern
  • Namun, di browser atau tool lama ada yang langsung mengambil ikon dari path /favicon.ico, jadi favicon.ico di path root tetap penting

Cara membuat Ultimate Favicon Set

  • Langkah-langkah berikut adalah proses membuat dan mengoptimalkan ikon secara langsung
  • Langkah 1: Menyiapkan SVG
    • Perlu menyiapkan file icon.svg dengan rasio persegi
    • Di dalam <svg>, perubahan warna untuk mode terang dan gelap bisa diterapkan melalui CSS media query
    • Seperti pada contoh, warna untuk mode gelap bisa ditentukan dengan @media (prefers-color-scheme: dark)
  • Langkah 2: Membuat file ICO
    • Ubah icon.svg menjadi gambar raster berukuran 16×16 atau 32×32 lalu buat favicon.ico
    • Bisa menggunakan tool seperti GIMP atau Inkscape+ImageMagick
    • Perlu berhati-hati agar logo tidak terlalu pecah pada resolusi kecil
  • Langkah 3: Membuat gambar PNG
    • Siapkan ikon PNG berukuran 512×512, 192×192, 180×180, dan 512×512(maskable)
    • Untuk apple-touch-icon di iOS, gunakan ukuran 180×180, dan sebaiknya tambahkan warna latar atau beri ruang kosong yang memadai
    • Ikon maskable harus menyisakan area 409×409 sebagai zona aman
  • Langkah 4: Mengoptimalkan PNG dan SVG
    • SVG dikompresi dengan alat seperti SVGO, dan PNG ditingkatkan rasio kompresinya dengan Squoosh
    • Karena pengguna bisa saja berada di lingkungan dengan pembatasan data, meminimalkan ukuran file akan menguntungkan
  • Langkah 5: Menghubungkan ikon ke HTML
    • Pada dasarnya, hubungkan favicon.ico, icon.svg, dan apple-touch-icon.png di tag <head> 
      <link rel="icon" href="/favicon.ico" sizes="32x32">  
<link rel="icon" href="/icon.svg" type="image/svg+xml">  
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
    • Jika menggunakan Webpack dan sejenisnya, cache juga bisa dikelola dengan menyertakan hash saat build
    • Favicon yang berbeda juga bisa dipakai untuk membedakan lingkungan staging(pengembangan) dan produksi
  • Langkah 6: Membuat Web Manifest
    • Masukkan informasi ikon untuk PWA ke file manifest.webmanifest, lalu hubungkan dengan <link rel="manifest" href="/manifest.webmanifest">
    • Contoh berikut menentukan ikon 192×192, 512×512(maskable), dan 512×512 
      {  
  "name": "My website",  
  "icons": [  
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },  
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },  
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }  
  ]  
}
    • Di lingkungan Webpack, otomatisasi bisa dilakukan dengan plugin seperti webpack-pwa-manifest
  • Melalui proses seperti di atas, favicon yang sesuai dapat ditampilkan di sebagian besar browser dan perangkat hanya dengan jumlah file yang sedikit
  • Akan lebih praktis jika dioperasikan dengan membuat tool otomatisasi

Bacaan terkait

4 komentar

 
carnoxen 2025-02-15

SVG Favicon masih belum didukung di Firefox...
 
carnoxen 2025-02-15

Ah, ternyata Safari.
 
yeppyshiba 2025-02-13

Saya pernah membuat web game sebagai proyek di perusahaan lama.
Karena iseng, saya membuat favicon animasi sebagai easter egg.
Saat animasinya dibuat dengan spritesheet, hasilnya ternyata cukup meyakinkan.
 
xguru 2025-02-13

Ringkasan favicon untuk tahun 2021
Saya pernah mengunggahnya sekali 4 tahun lalu, dan sekarang sudah diperbarui agar sesuai dengan kondisi saat ini.