Bagaimana cara menjadikan logo situs web saya sebagai gambar ikon di tab browser?

101

Gambar di sebelah judul halaman di tab browser - bagaimana Anda bisa menghubungkan gambar di sini?

html favicon jay
sumber
2
Kata kunci adalah favicon.ico
user956584
en.wikipedia.org/wiki/Favicon
Ry-

Jawaban:

177

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:

  1. 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 .

  2. 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

LasagnaAndroid
sumber
18

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">
Dulith De Costa
sumber
8

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.

Vincent Ramdhanie
sumber
2 
<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">
pengguna3680001
sumber
apple-touch-icon untuk iOS webApps
LasagnaAndroid
1

Tambahkan file ikon bernama "favicon.ico" ke root situs Anda.

Mike Fulton
sumber
Ingat harus tepat 16x16 px.
uınbɐɥs
3
Tidak, itu harus berbentuk persegi dan ukuran berapa pun, itu hanya akan memakan waktu lebih lama untuk memuat
LasagnaAndroid