Favicon
***
Pengertian dan Fungsi Favicon
- Favicon adalah kependekan dari Favorite Icon dan sering kali disebut sebagai :
- shortcut icon
- website icon
- tab icon
- URL icon
- bookmark icon.
- Secara visual Favicon sebenarnya sama dengan icon pada umumnya,
- Bedanya, favicon diperlakukan lebih detail sebagai grafik atau gambar yang membawa identitas suatu blog / situs / aplikasi.
- Favicon umumnya berformat PNG & ICO
- Ukuran dimensi favicon adalah persegi sempurna.
- Favicon bisa dibuat dari satu gambar asal dengan format umum (JPG / JPEG / PNG / SVG) untuk kemudian di-generate dan menghasilkan beberapa ikon dengan beberapa macam ukuran dimensi
- Favicon bisa diaplikasikan ke berbagai platform & browser.
Favicon untuk blog / situs
Dalam penggunaanya, favicon sebenarnya tidak harus ada dalam blog ataupun website, namun lebih ke penyesuaian kebutuhannya saja.Jika suatu blog atau situs hanya berfokus untuk publikasi online saja maka kebutuhan favicon cukup untuk tampilan browser saja, misal : tab dan url.
Berbeda jika blog / web tersebut akan diarahkan sebagai aplikasi yang bisa diakses tidak hanya melalui browser, tapi juga bisa diinstal dalam beberapa jenis perangkat tertentu. Maka kebutuhan favicon harus dilengkapi lebih detail dan lebih banyak tentunya. Menyesuaikan kebutuhan masing-masing platform perangkat yang menjadi targetnya.
Sehingga bagi blogger yang hanya berfokus publikasi di browser, tidak perlu ribet membuat favicon sebanyak mungkin karena jika ternyata tidak terpakai justru hanya akan menjadi sampah / junk (unused file) dalam template.
Untuk pengguna Blogger - Blogspot, untuk mensetting favicon cukup menggunakan setelan di dasboard Blogger.
Setelan Favicon
Konfigurasi favicon Blogger
Dibawah ini contoh link favicon hasil dari favicon generator yang menjadikan ikon ke beberapa ukuran dimensi.
<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">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">Generator favicon : Favicon-Generator.org