Panduan Lengkap Icon Favicon untuk Browser, iOS, dan Android

Favicon sebuah icon kecil, tampil pada tab browser saat situs web dibuka. Logo image yang berukuran kecil kecil cabe rawit ini berfungsi untuk identifikasi tab halaman website yang masih online.

Oya.. kata ‘Favicon’ sendiri merupakan kependekan dari kata “favorite icon”.

Dari mana favicon muncul pertama sekali di dunia web. Dari beberbagai penelurusan, ini dia sejarah singkat awal mula favicon ada.

Favicon pertama kali diperkenalkan oleh Microsoft pada Maret 1999 bersama dengan Internet Explorer 5. Pada awalnya, Microsoft menyebut bookmark dalam Internet Explorer sebagai “Favorites” dan memungkinkan situs web untuk menampilkan ikon kustom jika mereka memiliki file favicon.ico di root direktori domain mereka. Favicon kemudian menjadi umum di seluruh web, dengan browser lain seperti Firefox dan Safari juga mendukung format PNG untuk favicon. Pada tahun 2008, Apple mengenalkan “apple-touch-icon.png” untuk iOS, yang membuka jalan bagi favicon dengan berbagai ukuran dan memperkuat format PNG sebagai pilihan utama.

Seiring perkembangan teknologi, standar favicon dalam HTML5 mengakomodasi kebutuhan akan ukuran favicon yang berbeda, terutama untuk layar resolusi tinggi dan perangkat mobile. Saat ini, favicon kustom digunakan di berbagai platform, dari Google TV hingga tile Metro Windows Microsoft.

Begitulah evolusi menarik dari favicon. Logo kecil memiliki peran sangat penting dunia web developer, bukan hanya sebagai penanda, tapi juga untuk branding sebuah website.

Kadangkala, favorite icon ini sering terjadi perdebatan para pengembang website, terutama berapa ukuran favicon yang tepat dan format yang ideal untuk proyek web.

Berikut beberapa informasi yang mungkin belum banyak diketahui tentang Favicon secara mendalam, siapa tahu berguna terkait dengan pengembangan website kamu.

Ukuran Favicon

Ukuran favicon browser dektop klasik memiliki size 16x16 piksel atau 32x32 piksel. Ini harus cukup kecil untuk memastikan bahwa ikon tersebut tampil dengan baik di tab browser jadul zaman dulu.

Untuk browser modern, termasuk di perangkat iPhone dan Android, ukuran favicon makin beragam mengikuti format dan tampilan di berbagai perangkat dan platform.

Berikut ukuran favicon yang disarankan untuk dukungan yang lebih luas browser modern:

1. 16x16 Piksel => Ukuran favicon yang umum dan digunakan oleh sebagian besar browser desktop. Ini mencakup kebanyakan tab browser desktop.

2. 32x32 Piksel => Ukuran ini sama dengan 16x16 piksel, tetapi dengan resolusi yang lebih tinggi. Size ini dapat memberikan tampilan yang lebih tajam pada perangkat Retina atau resolusi tinggi.

3. 64x64 Piksel => Beberapa browser dan platform mungkin menggunakan ukuran favicon yang lebih besar, seperti 64x64 piksel, untuk menghadirkan ikon yang lebih jelas pada perangkat dengan resolusi tinggi.

4. 128x128 Piksel => Ukuran ini digunakan oleh beberapa platform dan tampilan yang lebih besar, seperti dalam hasil pencarian situs web atau pada layar beranda perangkat Android.

5. 192x192 Piksel (untuk Android) => Ini adalah ukuran favicon yang disarankan untuk perangkat Android. Favicons dengan ukuran ini digunakan dalam ikon aplikasi beranda dan layar multitasking pada perangkat Android.

Berikut ukuran favicon berdasarkan tujuan platform

Untuk Browser Desktop:

• 16x16px dan 32x32px => Ukuran favicon standar yang muncul di tab browser.

Untuk Android:

• 192x192px => Icon di layar beranda
• 512x512 piksel => Icon resolusi tinggi di layar beranda

Untuk iOS:

• 57x57px => Icon aplikasi di layar beranda iPhone 5 kebawah
• 60x60px => Icon aplikasi di layar beranda iPhone 6 dan 6 Plus
• 76x76px => Icon aplikasi di layar beranda iPad Mini dan iPad Air
• 114x114px => Icon aplikasi di layar beranda iPhone Retina lama
• 120x120px => Icon aplikasi di layar beranda iPhone Retina
• 152x152px => Icon aplikasi di layar beranda iPad
• 180x180px => Icon aplikasi di layar beranda

Berikut ukuran favicon untuk format PWA

• Favicon => Ikon yang akan muncul di tab browser. Ukuran yang paling umum adalah 16x16 piksel atau 32x32 piksel.

• Ikon Aplikasi => Ikon ini digunakan ketika pengguna menyimpan PWA Anda di layar beranda. Ukuran yang umum adalah 192x192 piksel untuk Android dan 180x180 piksel untuk iOS.

• Ikon untuk Layar Beranda iOS => Untuk dukungan iOS, perlu menyertakan ikon tambahan dengan ukuran yang sesuai untuk layar beranda iPhone dan iPad, seperti 57x57 piksel, 60x60 piksel, 72x72 piksel, 76x76 piksel, 114x114 piksel, 120x120 piksel, 144x144 piksel, dan 152x152 piksel.

• Ikon Resolusi Tinggi => Ukuran ini akan digunakan ketika pengguna menambahkan PWA ke layar beranda Android. Ukuran yang umum adalah 512x512 piksel.

• Ikon untuk Windows => Jika Anda ingin mendukung format PWA di Windows, dapat menyertakan ikon khusus Windows dengan ukuran seperti 70x70 piksel, 150x150 piksel, dan 310x310 piksel.

• Ikon Maskable => Ini adalah ikon yang dioptimalkan untuk berbagai bentuk dan tema layar beranda. Ini diperlukan untuk beberapa platform, terutama Android. Ikon maskable harus memiliki ukuran yang sama atau lebih besar dari 192x192 piksel dan harus memiliki latar belakang transparan.

Format Favicon

Format .ico adalah yang paling umum digunakan sejak browser dektop klasik. Meskipun semua browser modern mendukung format .ico, format .png bisa lebih disukai.

Format grafis lain seperti .jpg, atau .gif juga bisa digunakan. Browser modern juga sudah mendukung format .svg untuk favicon.

Saya sendiri sangat suka dengan format SVG untuk favicon. Beberapa webdev lebih memilih format PNG atau ICO karena dukungan browser untuk format tersebut sudah mature. Idealnya, harus menyertakan beberapa format favicon, termasuk SVG, untuk memastikan tampilan yang konsisten di berbagai browser.

Cara Penempatan Favicon di dalam HTML

Favicon biasanya ditempatkan dalam direktori root halam web. Ia berada pada bagian dokumen HTML Anda dengan menggunakan tag seperti ini:

<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<link rel="icon" type="image/png" sizes="64x64" href="favicon-64x64.png">

Tiga baris kode diatas adalah standar minimal-maksimal untuk memanggil file image favicon yang direkomendasikan hingga saat ini untuk yang mendukung berbagai platform, termasuk perangkat iOS dan Android.

Nah, bagi webdev atau projek manager yang mengalami masalah dengan OCD (obsesif kompulsif disorder)—ngotot insert banyak icon biar sempurna—berikut daftar lengkap favicon yang dapat dipanggil:

<!-- Favicon untuk browser desktop -->
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!-- Favicon untuk browser desktop dengan ukuran 16x16 piksel -->
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

<!-- Favicon untuk browser desktop dengan ukuran 32x32 piksel -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

<!-- Favicon untuk perangkat iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

<!-- Favicon untuk perangkat iOS dengan Retina -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">

<!-- Favicon untuk perangkat iOS dengan Retina dan iPhone sebelumnya -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">

<!-- Favicon untuk perangkat iOS dengan Retina dan iPad Mini -->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">

<!-- Favicon untuk perangkat iOS dengan Retina dan iPhone 6/6 Plus -->
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">

<!-- Favicon untuk perangkat iOS dengan Retina dan iPhone sebelumnya -->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">

<!-- Favicon untuk perangkat iOS dengan Retina dan iPhone sebelumnya -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">

<!-- Favicon untuk perangkat Android -->
<link rel="icon" type="image/png" sizes="192x192" href="android-icon.png">

<!-- Favicon untuk perangkat Android (ikon resolusi tinggi) -->
<link rel="icon" type="image/png" sizes="512x512" href="android-icon-512x512.png">

Ukuran-ukuran favicon tersebut masih relevan dan sesuai dengan rekomendasi untuk mendukung berbagai platform, termasuk perangkat iOS dan Android.

Kesimpulan apa?

Jumlah favicon yang wajib ada untuk laman web sangat bervariasi tergantung platform yang di targetkan dan tingkat dukungan browser yang diinginkan.

Idealnya, insert beberapa variasi ukuran favicon: icon aplikasi dan ikon hight resolusi untuk memastikan tampilan yang sempurna di berbagai perangkat dan platform.

Demikian. Semoga bermanfaat.