Menambahkan favicon ke halaman HTML statis

641

Saya memiliki beberapa halaman statis yang hanya HTML murni, yang kami tampilkan ketika server turun. Bagaimana saya bisa meletakkan favicon yang saya buat (ini 16x16px dan itu duduk di direktori yang sama dengan file HTML; itu disebut favicon.ico) sebagai ikon "tab" seolah-olah? Saya telah membaca di Wikipedia dan melihat beberapa tutorial dan telah menerapkan yang berikut:

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

Tetapi masih tidak mau bekerja. Saya menggunakan Chrome untuk menguji situs. Menurut Wikipedia .ico adalah format gambar terbaik yang berjalan di semua jenis browser.

Memperbarui

Saya tidak bisa menjalankan ini secara lokal meskipun kode memeriksa hanya akan benar-benar berfungsi dengan baik setelah server mulai melayani situs. Coba saja mendorongnya ke server dan menyegarkan cache Anda dan itu akan berfungsi dengan baik.

html static favicon Legenda
sumber
siapa yang tidak Anda beritahu teman Anda untuk memeriksanya untuk Anda di beberapa sistem lain, masalah yang sama adalah dengan salah satu klien saya sistem saya muncul dengan baik dan dia mengeluh favicon tidak muncul, saya lebih sering menggunakan salah satu dari Anda contoh pertama dan itu benar. semoga berhasil.
mt
3
Kemungkinan duplikat dari Bagaimana cara menambahkan ikon tab browser (favicon) untuk situs web?
Michał Perłakowski
Contoh Anda sekarang berfungsi di Chrome.
Damjan Pavlica
Menarik, situs web langsung menyajikan favicon dengan baik, tetapi ketika melihat file secara lokal, dan tidak melayani melalui server lokal (b / c itu situs statis sederhana - ya!), Favicon tidak muncul. Kalau dipikir-pikir, server otomatis menyajikannya. Menambahkan <link rel="icon" type="image/x-icon" href="favicon.ico">ke head(di samping variasi favicon 32, 16, dan 180 links) menyelesaikan masalah secara lokal. Karena saya memasukkan links untuk ukuran ikon yang lebih besar, dan manifes, saya tidak berpikir dua kali tentang mengapa favicon.icotidak muncul! :-)
SherylHohman

Jawaban:

934

Anda dapat membuat gambar .png dan kemudian menggunakan salah satu cuplikan berikut di antara <head>tag dokumen HTML statis Anda:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
Hazy McGee
sumber
3
apakah Anda mencoba meletakkan "ikon pintasan" di rel = untuk tautan ico Anda dan meletakkan / sebelum favicon.ico pada keduanya hanya untuk menyatakan bahwa itu ada di dir webroot?
Hazy McGee
1
yip mencoba itu juga .. man lol saya menilai saya akan me-restart semuanya dan kemudian coba boot dan lihat apakah mungkin itu salah menguangkan atau sesuatu ..
TheLegend
5
Saya bersumpah - saya memiliki masalah yang sama setelah menambahkan kode - butuh mungkin sehari untuk browser untuk menampilkan ikon, bukan kotak abu-abu yang biasanya - coba membuang riwayat cache browser Anda dll Dan jika Anda menyalin kode saya pastikan Anda ubah example.com ke domain Anda lol
Hazy McGee
2
Ada argumen href redundan / di baris atas. Setelah saya menghapusnya itu berfungsi seperti pesona. Seharusnya: <link rel = "ikon pintasan" href = "favicon.png" type = "image / png">
drpawelo
4
w3.org/2005/10/howto-favicon mengatakan untuk menyertakan profileatribut dalam headtag ... apakah itu perlu?
Rakib
228

Sebagian besar browser akan mengambil favicon.icodari direktori root situs tanpa perlu diberi tahu; tetapi mereka tidak selalu memperbaruinya dengan yang baru segera.

Namun, saya biasanya memilih contoh kedua:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
Codecraft
sumber
apakah itu harus lebih dari data meta atau tag skrip ?? atau tidak masalah
TheLegend
2
Selama di bagian <head>, itu tidak masalah - karena tidak bergantung pada sesuatu yang lain untuk bekerja.
Codecraft
127

Sebenarnya, untuk membuat favicon Anda berfungsi di semua browser, Anda harus memiliki lebih dari 10 gambar dalam ukuran dan format yang benar.

Saya membuat Aplikasi ( faviconit.com ) sehingga orang tidak perlu membuat semua gambar ini dan tag yang benar dengan tangan.

Harap Anda menyukainya.

Eduardo Russo
sumber
6
Menyukai aplikasi, tidak ada bs - langsung saja, dan gambar dapat diedit sebelum membuat semua favicons +1 untuk Anda karena telah menyelamatkan saya banyak waktu :)
SidOfc
1
Setuju, ini adalah aplikasi hebat. Meskipun saya tidak berpikir semua ukuran gambar itu tampaknya cukup diperlukan, saya suka itu menghasilkan mereka dan markup yang diperlukan dll. Terima kasih!
andrhamm
Indeead aplikasi hebat: +1 :. Membantu banyak o /
Renato Gomes
1
Tapi itu milik.
ctrl-alt-delor
Tidak berfungsi, beriWhoops, looks like something went wrong.
daka
68

Berikut ini berfungsi untuk saya ...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Jet Blue
sumber
40

Konversikan file gambar Anda menjadi string Base64 dengan alat seperti ini lalu ganti YourBase64StringHereplaceholder di snippet di bawah ini dengan string Anda dan letakkan baris di bagian kepala HTML Anda:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Ini akan bekerja 100% di browser.

Farshid
sumber
3
Saya menemukan alat lain yang melakukan konversi dalam JavaScript tanpa mentransfer data ke server: jpillora.com/base64-encoder Selain itu, ia menangani banyak file dengan cara drag and drop. Simpan halaman untuk menggunakannya secara lokal.
tangani
1
imho, solusi terbaik, karena itu menghormati halaman "html statis" dan benar-benar mandiri dalam dokumen.
Buffalo Rabor
1
Solusi terbaik. Bekerja dengan file png juga. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />
Rolf of Saxony
1
Ini akan menyebabkan string panjang ditambahkan ke setiap halaman. Gunakan inline base64 untuk gambar kecil yang jarang dikirim ke pengguna.
frodeborli
Dengan cara ini favicon Anda tidak pernah di-cache, Anda mengirim seluruh string ke klien setiap kali, IHMHO menggunakan url dan oleh karena itu cache browser terasa 'lebih bersih / lebih baik'
Michiel
34

Penggunaan Sintaks: .ico, .gif, .png,.svg

Tabel ini menunjukkan cara menggunakan faviconbrowser utama. Implementasi standar menggunakan elemen tautan dengan atribut rel di bagian dokumen untuk menentukan format file dan nama file serta lokasi.

Perhatikan bahwa sebagian besar browser akan memprioritaskan favicon.icofile yang terletak di root situs web (karena itu mengabaikan semua tag tautan ikon).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Dukungan format file

Tabel berikut menggambarkan dukungan format file gambar untuk favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Implementasi Browser

Tabel di bawah menggambarkan berbagai area browser tempat favicon's ditampilkan:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

File ikon dapat berukuran 16 × 16 , 32 × 32 , 48 × 48 , atau 64 × 64 piksel, dan kedalaman warna 8-bit , 24-bit , atau 32-bit .

Meskipun informasi di atas secara umum benar, ada beberapa variasi / pengecualian dalam situasi tertentu.

img Lihat artikel lengkapnya di sumber di Wikipedia.

Perbarui: ("info lebih lanjut")

ashleedawg
sumber
15

Jika favicon adalah gambar jenis png, itu tidak akan berfungsi di versi Chrome yang lebih lama. Namun itu akan bekerja dengan baik di FireFox. Juga, jangan lupa untuk menghapus cache browser Anda saat mengerjakan hal-hal seperti itu. Banyak kali, kode baik-baik saja, tetapi cache adalah penyebab sesungguhnya.

Tanveer Shaikh
sumber
1
Tidak apa-apa; itu sangat sulit untuk menginstal / menyimpan Chrome versi lama
Ben Leggiero
14

Seperti yang direkomendasikan oleh W3.org , Anda dapat menggunakanrel atribut untuk mencapai ini.

Contoh:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
Rahul Desai
sumber
8 
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
shilovk
sumber
7 
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Ini berhasil untuk saya

Anand Dwivedi
sumber
4
Meskipun ini mungkin berhasil, Anda tidak dapat menggunakan gambar / png sebagai Tipe MIME - karena itu salah mengingat Anda menggunakan .ico
zanderwar
5

Saya tahu posting yang lebih lama tetapi masih memposting untuk orang seperti saya. Ini berhasil untuk saya

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />

letakkan ikon favicon Anda di direktori root ..

Cyclotron3x3
sumber
4

sebagai catatan tambahan yang dapat membantu seseorang suatu hari.

Anda tidak dapat mengulangi apa pun ke halaman sebelumnya:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

tidak akan memuat ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

bekerja dengan baik

bart2puck
sumber
3
Itu karena seharusnya berada di bagian kepala dokumen HTML, dan diabaikan oleh sebagian besar peramban jika tidak.
Eric Sebasta
Ya, saya hanya ingin meletakkan ini di sini kalau-kalau ada yang mengalami masalah. Masalah saya adalah "halo" adalah beberapa kode debug dan membuat saya sedikit bingung.
bart2puck
3

Saya menggunakan convert -resize 16x16 img.png favicon.ico(di linux konsole) untuk mengonversi gambar saya, dan menambah <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">header saya dan semuanya berfungsi dengan baik.

dmx
sumber
2

Perhatikan bahwa jika situs Anda berjalan sebagai contoh subfolder:

http://localhost/MySite/

Anda harus memperhitungkannya. Jika Anda melakukannya dari ASP.NETaplikasi, yang perlu Anda lakukan adalah menambahkan a ~ke depan URL:

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
Serj Sagan
sumber
2

Sesuai pembaruan OP, itu tidak muncul secara lokal, tetapi seperti pembaruan OP, setelah saya mengunggahnya ke server, itu baik-baik saja.

Karena ini adalah situs web html statis yang sederhana, saya memiliki kemewahan untuk mengerjakannya tanpa menjalankan server web lokal.
Server web umumnya akan secara otomatis menayangkan favicon, jika ada, secara default.

Tetapi ketika tidak menjalankan server web, browser itu sendiri tidak hanya akan membaca direktori mencari file tambahan, katakanlah favicon.ico, kecuali jika terdaftar dalam dokumen html.

Jadi, sementara saya memiliki item berikut dalam headtag: 

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

Saya tidak juga menyertakan referensi untuk polos 'ol favicon.ico.
Meskipun, favicon.icofile itu dimasukkan, di samping gambar yang tercantum di atas.

Setelah saya tambahkan baris berikut: 

    <link rel="icon" type="image/x-icon" href="favicon.ico">

Itu juga muncul di browser saya, ketika saya melihat file lokal , bahkan ketika tidak melayani melalui server lokal.

Jadi ikon muncul dengan baik ketika dijalankan di server langsung, tetapi tidak secara lokal.

Saya menyebutkan ini secara eksplisit karena generator favicon yang saya gunakan, dengan ramah menyediakan kode, ikon, manifes, dan instruksi. Namun, sementara itu termasuk favicon.icogambar, itu tidak termasuk <link>ke file itu dalam kode untuk ditambahkan ke htmldokumen.
Saya kira anggapan layanan favicon.icosecara otomatis akan disajikan dan digunakan oleh semua browser secara default, jadi hanya versi "pengganti" yang perlu ditambahkan secara eksplisit ke tag kepala.
Jelas, mereka tidak menganggap bahwa ketika melihat file secara lokal (alias tidak menyajikannya secara lokal), kami tidak tertarik melihat favicon?

SherylHohman
sumber
0

Perhatikan bahwa FF gagal memuat ikon dengan //URL yang redundan seperti /img//favicon.png. Diuji pada FF 53. Chrome OK.

Étienne Bersac
sumber
Itu tidak benar-benar jawaban sebanyak itu adalah komentar . (Lihat " Cara Menjawab ".)
ashleedawg
0

Coba gunakan <link rel="icon" type="image/ico" href="images/favi.ico"/>

subindas pm
sumber
-2

Saya hanya menggunakan png. Pastikan untuk menghapus latar belakang putih. membuat Ikon yang lebih baik

Tom
sumber