Sunucu çöktüğünde görüntülediğimiz sadece saf HTML olan birkaç statik sayfam var. Yaptığım bir favicon'u (16x16px ve HTML dosyasıyla aynı dizinde oturuyor; buna favicon.ico denir) nasıl "sekme" simgesi olarak koyabilirim? Wikipedia'da okudum ve birkaç eğiticiye baktım ve aşağıdakileri uyguladım:

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

Ama yine de çalışmak istemiyor. Siteleri test etmek için Chrome kullanıyorum. Wikipedia'ya göre .ico, tüm tarayıcı türlerinde çalışan en iyi resim biçimidir.

Güncelleme

Her ne kadar kod kontrol sadece sunucu site hizmet vermeye başladığında gerçekten düzgün çalışacaktır rağmen yerel olarak çalışmak için alamadım. Sadece sunucuya itmek ve önbelleğinizi yenilemek deneyin ve iyi çalışması gerekir.

html static favicon

— Efsane
kaynak

Kim arkadaşınıza başka bir sistemde sizin için kontrol etmesini söylemezsiniz, aynı sorun müşterimden biriyle sistemimin iyi görünmesini ve faviconun görünmemesinden şikayet ediyor, çoğunlukla ilk örneğinizi kullanıyorum ve bu doğru. iyi şanslar.

— mt

3

Olası yinelenen bir web sitesi için bir tarayıcı sekmesi simgesine (favicon) nasıl eklenir?

— Michał Perłakowski

Örneğiniz şu anda Chrome'da çalışıyor.

— Damjan Pavlica

İlginç, canlı web sitesi favicon gayet iyi hizmet, ama dosyayı yerel olarak görüntülerken ve yerel bir sunucu (b / c basit statik site - evet!) Üzerinden hizmet değil, favicon göstermedi. Gez, bu mantıklı, sunucular otomatik olarak hizmet vermektedir. Ekleme <link rel="icon" type="image/x-icon" href="favicon.ico">için head(bir sonraki 32, 16, ve 180 Favico varyasyon için link, yerel olarak sorun çözüldü s). Daha linkbüyük simge boyutları ve manifest için s'yi dahil ettiğim için, neden görünmediğini iki kez düşünmedim favicon.ico! :-)

— SherylHohman

932

Bir .png görüntüsü oluşturabilir ve ardından <head>statik HTML belgelerinizin etiketleri arasında aşağıdaki snippet'lerden birini kullanabilirsiniz :

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— Puslu McGee
kaynak

3

ico bağlantılarınız için rel = 'kısayol simgesini' koymayı ve sadece webroot dizininde olduğunu belirtmek için her ikisine de favicon.ico yazmayı denediniz mi?

— Hazy McGee

1

yip de denedim .. adam lol i oranı ben tüm yeniden başlatmak ve sonra önyükleme deneyin ve belki onun nakit ya da yanlış bir şey olup olmadığını görmek ..

— TheLegend

5

Yemin ederim - kodu ekledikten sonra aynı sorunları yaşadım - tarayıcının genellikle sahip olduğu gri kutu yerine simgeyi görüntülemesi belki bir gün sürdü - ur tarayıcı önbellek geçmişi vb. example.com'u ur etki alanına lol olarak değiştir

— Hazy McGee

2

Üst satırda href argümanında gereksiz / var. Bir kez kaldırıldı bir cazibe gibi çalışır. Olması gereken: <link rel = "kısayol simgesi" href = "favicon.png" type = "image / png">

— drpawelo

4

w3.org/2005/10/howto-favicon etikete bir profileözellik eklemeyi söylüyor head... bu gerekli mi?

— Rakib

228

Çoğu tarayıcı favicon.ico, sitenin kök dizininden söylemeye gerek kalmadan onu alır; ancak hemen her zaman yenisiyle güncellemezler.

Ancak, genellikle örneklerinizin ikincisine gidiyorum:

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

— Codecraft
kaynak

meta veri veya komut dosyası etiketleri befoer olması gerekiyor mu ?? ya da sorun değil

— TheLegend

2

<head> bölümünde olduğu sürece, önemli değil - çünkü çalışmak için başka bir şeye bağımlı değil.

— Codecraft

126

Aslında, favicon'unuzun tüm tarayıcılarda çalışmasını sağlamak için doğru boyut ve formatlarda 10'dan fazla resminizin olması gerekir.

Bir uygulama ( faviconit.com ) oluşturdum, böylece insanlar tüm bu görüntüleri ve doğru etiketleri elle oluşturmak zorunda kalmazlar .

Umarım beğenirsin.

— Eduardo Russo
kaynak

6

Uygulamayı sevdim, hiçbir bs - doğrudan ona ve görüntü bana bir demet zaman tasarrufu için tüm favicons +1 oluşturmadan önce düzenlenebilir :)

— SidOfc

1

Kabul, bu harika bir uygulama. Tüm bu görüntü boyutlarının oldukça gerekli göründüğünü düşünmese de, onları ve gerekli biçimlendirmeyi vb.

— andrhamm

Gerçekten harika bir uygulama: +1 :. Helped a lot o /

— Renato Gomes

1

Ama tescilli.

— ctrl-alt-delor

Whoops, looks like something went wrong.

— Çalışmıyor

68

Aşağıdakiler benim için çalışıyor ...

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

— Jet Mavisi
kaynak

40

Böyle bir araç ile Base64 dizeye görüntü dosyası dönüştürme Bu ve daha sonra yerini YourBase64StringHeredizenizle aşağıda snippet'inizdeki yer tutucu ve HTML başlık bölümünde satırı koyun:

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

Bu tarayıcılarda% 100 çalışacaktır.

— Farshid
kaynak

3

Sunucuya veri aktarmadan JavaScript'te dönüştürme yapan başka bir araç buldum: jpillora.com/base64-encoder Ayrıca, sürükle ve bırak yöntemiyle birden fazla dosyayı işler. Yerel olarak kullanmak için sayfayı kaydedin.

— sap

1

imho, en iyi çözümdür, çünkü "statik html" sayfasını onurlandırır ve tamamen belgenin içinde yer alır.

— Buffalo Rabor

1

En iyi çözüm. Png dosyaları ile de çalışır. <link href = "veri: image / png; base64, YourBase64StringHere" rel = "simge" type = "image / png" />

— Saksonya

1

Bu, her sayfaya uzun bir dize eklenmesine neden olur. Kullanıcıya nadiren gönderilen küçük resimler için satır içi base64 kullanın.

— frodeborli

Bu şekilde favicon'unuz asla önbelleğe alınmaz, tüm dizeyi istemciye her seferinde gönderirsiniz, IHMHO bir url kullanır ve bu nedenle tarayıcı önbelleği 'daha temiz / daha iyi' hisseder

— Michiel

34

Kullanım dizimi: _{^{.ico, .gif, .png,.svg}}

Bu tablo faviconana tarayıcılarda nasıl kullanılacağını gösterir . Standart uygulama, dosya biçimini ve dosya adını ve konumunu belirtmek için belgenin bölümünde rel özniteliğine sahip bir bağlantı öğesi kullanır.

Çoğu tarayıcının web sitesinin kökünde bulunan bir favicon.icodosyaya öncelik vereceğini unutmayın (bu nedenle herhangi bir simge bağlantı etiketini yoksayar ).

                                           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">

Dosya formatı desteği

Aşağıdaki tabloda aşağıdakiler için görüntü dosyası biçimi desteği gösterilmektedir 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

Tarayıcı Uygulaması

Aşağıdaki tablo tarayıcının favicon'ların görüntülendiği farklı alanlarını göstermektedir:

                      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

Simge dosyaları 16 × 16 , 32 × 32 , 48 × 48 veya 64 × 64 piksel boyutunda ve 8 bit , 24 bit veya 32 bit renk derinliğinde olabilir.

Yukarıdaki bilgiler genellikle doğru olmakla birlikte, bazı durumlarda bazı değişiklikler / istisnalar vardır.

^{Wikipedia'daki kaynaktaki tam makaleye bakın .}

Güncelleme: ("daha fazla bilgi")

Arama sonuçlarında gösterilecek bir favori simgesi tanımlamak için Google'ın "yeni" (2019) ölçütlerine bakın .
URL'si olan herhangi bir alan adı için Google'ın önbelleğe alınmış favicon'unu (programlı veya manuel olarak) alabilirsiniz :https://www.google.com/s2/favicons?domain=stackoverflow.com

Yukarıdaki URL'yi doğrudan bir <img>etikette kullanmak : " " döndürür .
Ben birkaç kez realfavicongenerator.net kullandım ; maksimum uyumluluk için ihtiyaç duyabileceğiniz her olası favicon varyasyonunu oluşturmak / özelleştirmek çok kapsamlı. (Eğer bir arayan konum Ancak, tek favori simge görüntüsünü, bu olabilir olduğu değil sizin için bir araç olun!) Basit dosya dönüşüm için (örn., PNGİçin ICO, vs) ben gibi onlineconvertfree.com .

— ashleedawg
kaynak

15

Favicon bir png türü resim ise, Chrome'un eski sürümlerinde çalışmaz. Ancak FireFox'ta iyi çalışır. Ayrıca, bu tür şeyler üzerinde çalışırken tarayıcı önbelleğinizi temizlemeyi de unutmayın. Çoğu zaman, kod gayet iyi, ama önbellek gerçek suçlu.

— Tanveer Shaikh
kaynak

1

Bu iyi; yine de Chrome'un eski bir sürümünü yüklemek / tutmak çok zor

— Ben Leggiero

14

W3.org tarafından önerildiği gibi , bunu relbaşarmak için özelliği kullanabilirsiniz .

Misal:

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

— Rahul Desai
kaynak

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
kaynak

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Bu benim için çalıştı

— Anand Dwivedi
kaynak

4

Bu işe yarayabilirken, MIME Türü olarak image / png kullanamazsınız. Çünkü .ico kullandığınızı düşünmek yanlıştır

— zanderwar

5

Eski gönderisini biliyorum ama yine de benim gibi biri için gönderiyor. Bu benim için çalıştı

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

favicon simgenizi kök dizine koyun ..

— Cyclotron3x3
kaynak

4

ek not olarak bir gün birine yardımcı olabilir.

Daha önce sayfaya hiçbir şey ekleyemezsiniz:

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

ico yüklemeyecek

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

iyi çalışıyor

— bart2puck
kaynak

3

Bunun nedeni, bir HTML belgesinin baş bölümünde olması gerekiyordu ve olmasa da çoğu tarayıcı tarafından yok sayılıyor.

— Eric Sebasta

Evet, birisinin bir sorunla karşılaşması durumunda bunu buraya koymak istedim. Benim sorunum "merhaba" bazı hata ayıklama kodu ve beni biraz güdük vardı.

— bart2puck

3

convert -resize 16x16 img.png favicon.icoResmimi dönüştürmek için (linux konsole üzerinde) kullandım ve başlığımı ekledim <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">ve her şey mükemmel çalışıyor.

— dmx
kaynak

2

Siteniz bir subfolderie olarak çalışıyorsa :

http://localhost/MySite/

Bunu hesaba katmanız gerekecek. Bunu bir ASP.NETuygulamadan yapıyorsanız ~, URL'nin önüne bir ekleme yapmanız yeterlidir :

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

— Serj Sagan
kaynak

2

OP'nin güncellemesine göre, Yerel olarak görünmüyordu, ancak OP'nin güncellemesine göre, bir kez sunucuya yüklediğimde, iyiydi.

Bu basit, statik bir html web sitesi olduğundan, yerel bir web sunucusu çalıştırmadan üzerinde çalışma lüksüne sahibim.
Bir web sunucusu varsayılan olarak favicon'u otomatik olarak sunar.

Ancak bir web sunucusu çalıştırılmadığında, html belgesinde listelenmedikçe, tarayıcının kendisi ek dosyaları arayan dizini okumaz, bir favicon.ico diyelim.

Yani, headetikette aşağıdaki öğeleri vardı :

    <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">

Ben de düz 'ol için bir referans dahil etmedi favicon.ico.
Yine de, favicon.icoyukarıda listelenen resimlere ek olarak dosya dahil edildi.

Aşağıdaki satırı ekledikten sonra:

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

Aynı zamanda vermedi ben izlerken, benim tarayıcıda göstermek yerel dosya bile, değil yerel bir sunucu üzerinden sunumunun yapılmasıdır.

Böylece, canlı sunucuda çalıştırıldığında simge yerel olarak değil, iyi görünüyordu.

Bunu açıkça belirtiyorum çünkü kullandığım favicon jeneratörü kodu, simgeleri, manifest'i ve talimatları sağladı. Ancak, favicon.icogörüntüyü <link>içermekle birlikte, htmlbelgeye eklemek için kodda o dosyaya bir içermiyordu .
Hizmet varsayımlarının varsayılan favicon.icoolarak tüm tarayıcılar tarafından otomatik olarak sunulacağını ve kullanılacağını tahmin ediyorum , bu nedenle yalnızca "alternatif" sürümlerin başlık etiketine açıkça eklenmesi gerekiyordu.
Açıkçası, dosyaları yerel olarak görüntülerken (aka yerel olarak sunulmuyorsa), favicon'u görmekle ilgilenmediğimizi düşünmüyorlar mı?

— SherylHohman
kaynak

1

Favicon'u kök / images klasörüne eklerseniz, favicon.ico tarayıcısı otomatik olarak anlayacak ve favicon olarak alacaktır. bağlantınız www.website.com/images/favicon.ico olmalıdır

Daha fazla bilgi için şu cevaba bakınız:

<Link rel = "icon" href = "favicon.ico" type = "image / x-icon" /> eklemeniz gerekiyor mu?

— Sarkhan
kaynak

0

FF'nin //URL'de yedekli bir simge yükleyemediğini unutmayın /img//favicon.png. FF 53 üzerinde test edilmiştir. Chrome iyi.

— Étienne Bersac
kaynak

Bu bir yorum kadar gerçekten bir cevap değil . (Bkz. " Nasıl

— Yanıtlanır

0

Kullanmaya çalışın <link rel="icon" type="image/ico" href="images/favi.ico"/>

— subindas pm
kaynak

-2

Ben sadece bir png kullandım. Beyaz arka planı çıkardığınızdan emin olun. daha iyi bir Simge yapar

— Tom
kaynak

Statik bir HTML sayfasına sık kullanılan simgesi ekleme