Favicon

  1. › 
  2. Favicon

Apa itu Favicon

Perhatikan gambar dibawah ini.
Pengertian Favicon

Favicon adalah :

Favourite icon (ikon favorit) merupakan sebuah logo atau grafik berukuran kecil yang umumnya berada bersebalahan dengan judul halaman.
Fungsi favicon adalah sebagai pengganti teks judul halaman apabila teks judul tidak ditampilkan.

Misal, tampilan tab browser seperti screenshot dibawah ini, selalu terdapat favicon bersebelahan dengan judul halaman.

Contoh penggunaan favicon

Favicon biasanya juga tersimpan di bookmark browser :

Favicon bookmark

Cara menambahkan favicon

  1. Menentukan / membuat file ikon.
    • Cari / edit file image berukuran persegi (misal 300 x 300, 512 x 512) dengan format apapun (disarankan JPG / PNG).
    • Lalu konfersikan file tersebut dengan favicon generator di:
      favicon-generator.org atau favicon.cc.
    • Generate favicon lalu simpan diperangkat.
  2. Mengupload file ikon.
    3. Upload favicon yang sudah di-generate di layanan hosting atau melalui settingan favicon (jika ada).
  3. Menambahkan favicon.
    4. Favicon dapat ditambahkan ke template HTML halaman pada tag <head> menggunakan tag <link> seperti tertera dibawah ini.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
File favicon disediakan dengan ukuran yang berbeda-beda tujuannya untuk menyesuaikan apabila halaman diakses menggunakan platform atau browser tertentu yang menerapkan aturan khusus.
Contoh umum, pada saat menambahkan suatu halaman ke layar pada perangkat android atau iphone, apabila tidak tersedia favicon yang sesuai spesifikasi platform maka hanya akan ditampilkan logo dengan inisial (huruf depan) dari judul website saja.
Tapi jika disediakan favicon yang sesuai spesifikasi platform, maka akan ditampilkan layaknya aplikasi lainnya dilayar ponsel.

Komentar

Posting Komentar