Menambahkan Gambar pada Title Bar

Menambahkan Gambar pada Title Bar - Hallo semuanya, pada artikel kali ini DUMET School akan membahas tentang bagaimana cara menambahkan gambar pada title bar. Sebagian besar situs web menambahkan ikon atau logo gambar di title bar. Logo ikon tersebut juga biasa disebut sebagai favicon.

Favicon, juga dikenal sebagai ikon shortcut, ikon situs web, ikon tab, ikon URL, atau ikon bookmark, ikon-ikon tersebut adalah file yang berisi satu atau lebih ikon kecil, yang terkait dengan situs web atau halaman web tertentu. Favicon digunakan di sudut kiri atas tab. Favicons cukup penting dan dapat berguna untuk pengingat bagi pengguna / pengunjung web. Tahukah kalian bahwa ada 2 cara untuk menambahkan favicon pada website?

Terdapat dua cara menambahkan favicon

• Buat file gambar dan harus persegi (ex: 32 x 32 pixel), dan convert menjadi ekstensi .ico (banyak tools online yang menyediakannya)
• Beri nama file tersebut dengan nama favicon.ico
• Upload file tersebut ke website kalian (sejajar dengan index/ root halaman utama)
• Browser akan secara otomatis mengambil file tersebut sebagai icon

Cara Kedua Menambahkan Favicon

• Buat file gambar dan harus persegi (ex: 32 x 32 pixel), dan convert menjadi ekstensi .ico (banyak tools online yang menyediakannya)
• Beri nama file tersebut dengan nama favicon.ico atau boleh dengan nama lainnya juga.
• Upload file tersebut ke website kalian (boleh di dalam subfolder)
• Tahap terakhir adalah gunakan gambar yang kalian upload pada kode berikut

Kode HTML diatas harus diletakkan dalam tag <head>, contoh:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul halaman</title>
    <link rel="shortcut icon" href="href="assets/favicon1.ico">
  </head>
  <body>
    <h1 style = "color: #1c98c9;">
      W3docs icon
    </h1>
    <p>
      Dumetschool.com menambahkan icon pada title bar
    </p>
  </body>
</html>

Atribut Type harus sesuai dengan ekstensi gambar

• For PNG gunakan image/png.
• For GIF gunakan image/gif.
• For JPEG gunakan image/gif.
• For ICO gunakan image/x-icon.
• For SVG gunakan image/svg+xml.

Baiklah teman-teman demikian artikel DUMET School ini yang membahas tentang Cara Menambahkan Gambar pada Title Bar, Pada artikel lainnya juga saya akan membahas tentang menyesuaikan icon dengan device tertentu. Semoga bermanfaat

Artikel Terkait:

Standard Ukuran Favicon Pada Semua Platform