Gambar di sebelah judul halaman di tab browser - bagaimana Anda bisa menghubungkan gambar di sini?
Gambar di sebelah judul halaman di tab browser - bagaimana Anda bisa menghubungkan gambar di sini?
Jawaban:
Gambar itu disebut ' favicon ' dan ini adalah .icofile berbentuk persegi kecil , yang merupakan jenis file standar untuk favicon. Anda bisa menggunakan .pngatau.gif juga, tetapi Anda harus mengikuti standar untuk kompatibilitas yang lebih baik.
Untuk menetapkan satu untuk situs web Anda, Anda harus:
Buat gambar persegi logo Anda (sebaiknya 32x32 atau 16x16 piksel, sejauh yang saya tahu tidak ada ukuran maksimal *), dan ubah menjadi .icofile. Anda dapat melakukan ini pada Gimp, Photoshop (dengan bantuan dari Plugin ) atau website seperti Favicon.cc atau RealFaviconGenerator .
Kemudian, Anda memiliki dua cara untuk menyiapkannya:
A) Menempatkannya di folder / direktori root situs web Anda (di sebelah index.html) dengan namafavicon.ico .
atau
B) Tautkan ke sana di antara <head></head>tag setiap .htmlfile di situs Anda, seperti ini:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>Jika Anda ingin melihat favicondari situs web mana pun, cukup tulis www.url.com/favicon.icodan Anda (mungkin) akan melihatnya. Favicon Stackoverflow berukuran 16x16 piksel dan Wikipedia 32x32.
*: Bahkan ada masalah browser tanpa batasan ukuran file. Anda dapat dengan mudah merusak browser dengan favicon yang sangat besar, info selengkapnya ada di sini
Ini disebut ' favicon ' dan Anda perlu menambahkan kode di bawah ini ke header situs web Anda.
Cukup tambahkan ini ke <head>bagian tersebut.
<link rel="icon" href="/your_path_to_image/favicon.jpg">Ini adalah favicon dan dijelaskan di tautan.
misalnya dari W3C
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">Plus, tentu saja file gambar di tempat yang sesuai.
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file:
'apple-touch-icon-retina.png')}">atau Anda bisa menggunakan yang ini
<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">Tambahkan file ikon bernama "favicon.ico" ke root situs Anda.
16x16 px.