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
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">

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

13 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat