Konten Pemasaran

Praktik Terbaik untuk Menerapkan Favicon Untuk Situs Web Anda

Ketika mereka pertama kali diperkenalkan, itu favicon menunjuk gambar untuk ditampilkan saat pengguna menyimpan a URL pintasan di desktop mereka. Saat ini, favicon situs web Anda dapat ditampilkan di tab browser, klien email, share media sosial, dan hasil pencarian.

Favicon sekarang menjadi elemen branding yang penting di setiap situs web, tetapi sering kali diabaikan… padahal seharusnya tidak demikian. Favicon biasanya ditampilkan di berbagai tempat dalam browser web untuk membantu pengguna mengidentifikasi dan menandai situs web. Berikut beberapa poin penting tentang favicon:

  • Tab Peramban: Saat pengguna membuka situs web di browser web, favicon ditampilkan di tab browser di sebelah judul halaman. Ini memberikan pengenal visual untuk tab yang terbuka, sehingga memudahkan pengguna untuk menemukan dan beralih di antara beberapa tab.
  • Bookmark dan Favorit: Saat pengguna mem-bookmark atau menyimpan situs web sebagai favorit, favicon sering kali ditampilkan di samping nama situs web di menu bookmark atau favorit. Ini membantu pengguna dengan cepat mengidentifikasi dan mengakses situs web mereka yang disimpan.
  • Bilah Alamat Browser: Di beberapa browser, saat pengguna mengunjungi situs web, favicon ditampilkan di bilah alamat browser atau omnibox. Ini menambahkan elemen visual ke URL situs web.
  • Hasil Pencarian: Beberapa mesin pencari mungkin menampilkan favicon di samping hasil pencarian, membantu pengguna dengan mudah mengidentifikasi situs web dalam daftar pencarian.

Favicon adalah representasi kecil dan ikonik dari situs web yang meningkatkan pengalaman pengguna dengan memberikan isyarat visual untuk identifikasi situs web, bookmark, dan manajemen tab dalam browser web. Ini adalah elemen penting dari desain web dan branding.

Jenis File Ikon

Awalnya, mereka membutuhkan sebuah ICO file, tetapi telah berevolusi dengan banyak platform yang dapat ditampilkan PNG dan SVG file. File ICO dapat dianggap sebagai kompilasi beberapa gambar ikon menjadi satu file. Saat Anda membuat file ICO, Anda mengkompilasi gambar ikon berbeda dengan berbagai ukuran dan kedalaman warna ke dalam satu file dengan struktur tertentu. Berikut cara kerja file ICO:

  1. Beberapa Gambar Ikon: File ICO biasanya berisi beberapa gambar ikon dengan dimensi dan kedalaman warna berbeda. Gambar-gambar ini mewakili ikon yang sama tetapi dirancang untuk ditampilkan dalam ukuran berbeda tanpa kehilangan kualitas.
  2. Direktori Ikon: Di dalam file ICO, terdapat direktori ikon yang menentukan atribut setiap gambar ikon, termasuk ukurannya, kedalaman warna, dan lokasi di dalam file.
  3. Informasi Tajuk: File ICO juga menyertakan informasi header yang memberikan detail penting tentang file tersebut, seperti jumlah gambar ikon yang disimpan dalam file.
  4. Data Gambar: Setiap gambar ikon dalam file ICO disimpan sebagai data gambar mentah tanpa kompresi. Hal ini memungkinkan gambar ikon individual diakses dan ditampilkan dengan cepat oleh perangkat lunak.
  5. Pengambilan Ikon: Ketika suatu aplikasi atau sistem operasi perlu menampilkan ikon yang terkait dengan file, folder, pintasan, atau aplikasi, aplikasi atau sistem operasi dapat mengambil gambar ikon yang sesuai dari file ICO berdasarkan ukuran dan kedalaman warna yang diinginkan.

ICO

Kelebihan:

  • Dukungan Luas: ICO adalah format favicon tradisional yang didukung secara luas oleh berbagai browser web, termasuk versi lama. Ini adalah pilihan yang aman untuk memastikan kompatibilitas.
  • Berbagai Ukuran dan Kedalaman Warna: File ICO dapat berisi beberapa gambar ikon dengan ukuran dan kedalaman warna berbeda, memungkinkan favicon ditampilkan dengan baik dalam berbagai konteks.

Kekurangan :

  • Skalabilitas Terbatas: Ikon ICO tidak berskala sebaik format vektor seperti SVG. Saat ditampilkan dalam ukuran non-standar, ikon ICO mungkin tampak berpiksel.

PNG

Kelebihan:

  • Kompresi Lossless: Favicon PNG menawarkan kompresi lossless, memastikan kualitas gambar tinggi dengan ukuran file kecil. Ini sangat berguna untuk ikon yang tajam dan detail.
  • Transparansi: PNG mendukung transparansi alfa, memungkinkan desain kompleks dan semi-transparan yang menyatu sempurna dengan latar belakang.
  • Dukungan di Peramban Modern: PNG didukung dengan baik oleh browser web modern dan menawarkan kompatibilitas yang baik.

Kekurangan :

  • Banyak File: Untuk mencakup berbagai ukuran dan resolusi, Anda mungkin perlu menyediakan beberapa file PNG dalam dimensi berbeda, yang dapat meningkatkan jumlah permintaan HTTP.
  • Kurangnya Dukungan Vektor: PNG adalah format raster, sehingga skalanya tidak seindah format vektor seperti SVG.

SVG

Kelebihan:

  • Berbasis Vektor: SVG adalah format vektor, artinya dapat diskalakan tanpa kehilangan kualitas. Ini ideal untuk membuat ikon yang tajam dan berkualitas tinggi dalam berbagai ukuran.
  • Ukuran File Kecil: File SVG seringkali berukuran lebih kecil dibandingkan file rasternya, sehingga efisien untuk penggunaan web.
  • Multifungsi: SVG memungkinkan desain yang kompleks dan artistik, termasuk ikon multi-warna, gradien, dan bentuk yang rumit.
  • Gaya CSS: Favicon SVG dapat ditata dengan mudah menggunakan CSS, sehingga menawarkan fleksibilitas desain yang lebih baik.

Kekurangan :

  • Kompatibilitas Browser: Meskipun browser modern mendukung favicon SVG, browser lama mungkin memiliki dukungan terbatas atau tidak sama sekali. Penting untuk menyediakan format cadangan seperti ICO atau PNG untuk kompatibilitas yang lebih luas.
  • Kompleksitas: Mendesain ikon SVG bisa jadi lebih rumit, terutama bagi mereka yang tidak terbiasa dengan perangkat lunak grafik vektor.

Pilihan format favicon bergantung pada kebutuhan desain Anda dan tingkat kompatibilitas yang ingin Anda capai. ICO adalah pilihan yang aman untuk kompatibilitas yang lebih luas, PNG menawarkan kualitas dan transparansi yang lossless, dan SVG ideal untuk skalabilitas dan desain yang rumit namun memerlukan pertimbangan yang cermat terhadap dukungan browser dan fallback. Menggunakan kombinasi format, seperti yang ditunjukkan dalam contoh berikut, dapat memastikan kompatibilitas dan kualitas maksimal untuk favicon situs web Anda.

Cara Membuat File ICO

Menurut pendapat saya, cukup aneh bahwa Adobe Illustrator dan Photoshop tidak membuat file .ICO secara default (tersedia plugin). Namun, Anda dapat menampilkan setiap ukuran gambar yang berbeda dengan menggunakannya… dan kemudian membuatnya menggunakan salah satu metode berikut:

  • GIMP secara asli mendukung file ICO. Ini adalah platform sumber terbuka gratis yang tersedia untuk semua sistem operasi.
  • ImageMagick adalah layanan sumber terbuka gratis yang dapat Anda muat ke PC atau Mac, memungkinkan Anda menggabungkan beberapa file ke dalam file ICO. Contoh perintah:
convert image1.png image2.png image3.png favicon.ico
  • Ada juga alat online yang dapat membantu Anda membuat file .ICO, namun Anda sebaiknya memilih dengan hati-hati. Banyak yang mengubah ukuran satu file gambar yang diunggah dan mengompresnya dengan buruk. Favicon.io adalah situs online gratis yang memungkinkan Anda mengunggah dan membuat file ICO Anda. Selalu gunakan ukuran dan resolusi file terbesar saat menggunakan platform ini, karena ini akan membuat ukuran gambar lebih kecil secara otomatis.

Anda ingin bereksperimen dengan file ICO Anda. Cukup memperkecil ukuran logo Anda menjadi ikon berukuran 16 piksel persegi dapat membuatnya tidak dapat dibedakan. Anda bahkan akan melihat bahwa logo kami bukanlah keseluruhan logo kami, hanya saja M dari logo kami.

Periksa Favicon Situs Web Anda

Praktik Terbaik HTML Favicon

Browser memprioritaskan pemilihan favicon berdasarkan beberapa faktor, termasuk format, ukuran, dan keberadaan deklarasi tertentu. Berikut cara browser biasanya memprioritaskan dan memilih favicon:

  1. Prioritas Format File: Browser biasanya memprioritaskan file .ico jika ada, karena ini adalah format favicon tradisional. Jika Anda menyediakan favicon .ico menggunakan <link rel="icon" type="image/x-icon" href="favicon.ico">, format ini sering kali lebih diutamakan dibandingkan format lain.
  2. Prioritas Ukuran: Browser juga mempertimbangkan atribut ukuran untuk memilih favicon yang paling sesuai dengan konteksnya. Jika Anda menentukan ukuran berbeda untuk favicon .png atau .svg, browser akan memilih salah satu yang paling sesuai dengan persyaratan tampilan perangkat.
  3. SVG Ukuran "apa pun".: Saat Anda menggunakan nilai “apa saja” untuk sizes atribut dalam deklarasi favicon SVG (sizes="any"), ini menunjukkan bahwa SVG dapat beradaptasi dengan ukuran apa pun. Browser dapat memprioritaskan SVG dengan ukuran “apa pun” untuk memastikan skalanya baik agar sesuai dengan berbagai resolusi layar.
  4. Deklarasi Terakhir Diutamakan: Jika Anda memberikan beberapa deklarasi favicon dengan format dan ukuran yang sama, browser biasanya memilih deklarasi terakhir yang ditemuinya di HTML. Oleh karena itu, pesanan Anda <link> elemen penting. Yang terakhir ditemukan akan diprioritaskan.
  5. Penggantian ke Ikon Default: Jika tidak ada favicon yang ditentukan sesuai dengan kriteria browser atau tidak ada deklarasi favicon, browser dapat menggunakan ikon default (misal, ikon browser) atau tanpa ikon.
  6. Preferensi Pengguna: Beberapa browser mengizinkan pengguna mengatur preferensi mereka untuk favicon. Pilihan pengguna dapat mengesampingkan favicon yang ditentukan situs web dalam kasus tersebut.

Jika Anda mencantumkan deklarasi favicon ICO terlebih dahulu tetapi ingin agar SVG digunakan sebagai favicon pilihan, deklarasi tersebut mungkin tidak selalu berfungsi sebagaimana mestinya karena beberapa browser memprioritaskan deklarasi favicon valid pertama yang mereka temui. Namun, Anda masih dapat memastikan bahwa SVG adalah favicon pilihan dengan menentukannya terakhir dan menggunakan Apa pun atribut ukuran.

Inilah cara Anda melakukannya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website Title</title>

    <!-- Favicon Declarations -->

    <!-- .ico Format (for maximum compatibility) -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- .png Format (for modern browsers) -->
    <link rel="icon" type="image/png" href="favicon.png" sizes="32x32">

    <!-- .svg Format (preferred) -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

    <!-- Alternative Text for Accessibility -->
    <link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" alt="Your Website Favicon">

    <!-- Additional Sizes (optional) -->
    <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="favicon-48x48.png" sizes="48x48">

    <!-- End of Favicon Declarations -->

    <!-- Your other meta tags, styles, and scripts go here -->

</head>
<body>
    <!-- Your website content goes here -->
</body>
</html>

Dalam contoh ini, format .ico tetap disertakan untuk kompatibilitas maksimum, namun format SVG ditentukan terakhir dengan .ico Apa pun atribut ukuran. Pengaturan ini memberikan preferensi yang lebih tinggi terhadap format SVG sambil tetap menyediakan format .ico sebagai cadangan untuk browser yang memprioritaskannya. Dengan menentukan SVG terakhir dengan Apa pun atribut size, Anda meningkatkan kemungkinan browser modern akan memilih SVG sebagai format favicon pilihan, karena dapat beradaptasi dengan berbagai ukuran.

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.