ฉันมีหน้าสแตติกไม่กี่ที่เป็นเพียง HTML บริสุทธิ์ที่เราแสดงเมื่อเซิร์ฟเวอร์ล่ม ฉันจะวาง favicon ที่ฉันทำไว้ได้ (เป็น 16x16px และอยู่ในไดเรกทอรีเดียวกับไฟล์ HTML เรียกว่า favicon.ico) เป็นไอคอน "แท็บ" เหมือนเดิมหรือไม่ ฉันได้อ่านวิกิพีเดียแล้วและดูบทเรียนบางส่วนและได้ดำเนินการดังนี้:

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

แต่ก็ยังไม่อยากทำงาน ฉันใช้ Chrome เพื่อทดสอบเว็บไซต์ Wikipedia .ico เป็นรูปแบบภาพที่ดีที่สุดที่ทำงานบนเบราว์เซอร์ทุกประเภท

ปรับปรุง

ฉันไม่สามารถให้มันทำงานได้ในพื้นที่แม้ว่ารหัสจะตรวจสอบว่ามันจะทำงานได้อย่างถูกต้องเมื่อเซิร์ฟเวอร์เริ่มให้บริการเว็บไซต์ เพียงแค่พยายามผลักดันมันขึ้นไปยังเซิร์ฟเวอร์และรีเฟรชแคชของคุณและมันก็ใช้ได้ดี

html static favicon

— ตำนาน
แหล่งที่มา

ผู้ที่คุณไม่บอกเพื่อนของคุณให้ตรวจสอบให้กับคุณในระบบอื่นปัญหาเดียวกันคือหนึ่งในลูกค้าของฉันระบบของฉันปรากฏขึ้นได้ดีและเขาบ่นว่า favicon ไม่ปรากฏฉันมักใช้ตัวอย่างแรกของคุณและ ถูกต้อง. ขอให้โชคดี

— mt

3

ซ้ำกันเป็นไปได้ของวิธีการเพิ่มไอคอนแท็บเบราว์เซอร์ (favicon) สำหรับเว็บไซต์?

— MichałPerłakowski

ตัวอย่างของคุณกำลังทำงานบน Chrome

— Damjan Pavlica

น่าสนใจเว็บไซต์ถ่ายทอดสดให้บริการ favicon ได้ดี แต่เมื่อดูไฟล์ในเครื่องและไม่ให้บริการผ่านเซิร์ฟเวอร์ท้องถิ่น (b / c เป็นเว็บไซต์คงที่เรียบง่าย - ใช่!) favicon ไม่แสดง ในความเข้าใจย้อนหลังมันสมเหตุสมผลเซิร์ฟเวอร์จะให้บริการอัตโนมัติ การเพิ่ม<link rel="icon" type="image/x-icon" href="favicon.ico">ไปยังhead(ถัดจาก 32, 16 และ 180 รูปแบบ favicon link) แก้ไขปัญหาในพื้นที่ เนื่องจากฉันรวมlinkขนาดไอคอนที่ใหญ่ขึ้นและรายการฉันไม่คิดเลยว่าทำไมถึงfavicon.icoไม่ปรากฏ! :-)

— SherylHohman

932

คุณสามารถสร้างภาพ. png จากนั้นใช้ตัวอย่างข้อมูลต่อไปนี้ระหว่าง<head>แท็กของเอกสาร HTML แบบคงที่ของคุณ:

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

— Hazy McGee
แหล่งที่มา

3

คุณลองวาง "ไอคอนทางลัด" ใน rel = สำหรับลิงก์ ico ของคุณแล้วใส่ a / ก่อนหน้า favicon.ico ทั้งสองเพื่อระบุว่ามันอยู่ใน webroot dir หรือไม่?

— Hazy McGee

1

เจี๊ยกก็พยายามเช่นกัน .. คน lol ฉันให้คะแนนฉันจะเริ่มต้นใหม่ทั้งหมดแล้วลองบูตขึ้นและดูว่าบางทีมัน cashing ผิดหรือบางสิ่งบางอย่าง ..

— TheLegend

5

ฉันสาบาน - ฉันมีปัญหาเดียวกันหลังจากเพิ่มรหัส - มันอาจใช้เวลาหนึ่งวันสำหรับเบราว์เซอร์ที่จะแสดงไอคอนแทนกล่องสีเทามันมักจะมี - ลองทิ้งประวัติแคชเบราว์เซอร์ ur ฯลฯ และหากคุณคัดลอกรหัสของฉัน เปลี่ยน example.com เป็น ur domain lol

— Hazy McGee

2

มีการซ้ำซ้อน / ในอาร์กิวเมนต์ href ของบรรทัดบนสุด เมื่อฉันลบมันมันทำงานเหมือนมีเสน่ห์ ควรเป็น: <link rel = "ไอคอนทางลัด" href = "favicon.png" type = "image / png">

— drpawelo

4

w3.org/2005/10/howto-faviconบอกว่าจะรวมprofileคุณลักษณะในheadแท็ก ... เป็นสิ่งที่จำเป็น?

— Rakib

228

เบราว์เซอร์ส่วนใหญ่จะรับfavicon.icoจากไดเรกทอรีรากของเว็บไซต์โดยไม่จำเป็นต้องบอก แต่พวกเขามักจะไม่อัปเดตด้วยใหม่ทันที

อย่างไรก็ตามฉันมักจะไปตัวอย่างที่สองของคุณ:

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

— Codecraft
แหล่งที่มา

มันจะต้องเป็นข้อมูล meta หรือแท็กสคริปต์หรือไม่? หรือไม่ใช่ปัญหา

— TheLegend

2

ตราบใดที่มันอยู่ในส่วน <head> มันก็ไม่สำคัญเพราะมันไม่ได้พึ่งพาอย่างอื่นในการทำงาน

— Codecraft

126

ที่จริงแล้วเพื่อให้ favicon ของคุณทำงานในเบราว์เซอร์ทั้งหมดคุณต้องมีมากกว่า 10 ภาพในขนาดและรูปแบบที่ถูกต้อง

ฉันสร้างแอพ ( faviconit.com ) เพื่อให้ผู้คนไม่ต้องสร้างภาพเหล่านี้ทั้งหมดและแท็กที่ถูกต้องด้วยมือ

หวังว่าคุณจะชอบมัน.

— Eduardo Russo
แหล่งที่มา

6

รักแอปไม่มี bs - ตรงไปตรงมาและสามารถแก้ไขภาพได้ก่อนที่จะสร้าง favicons ทั้งหมด +1 ให้กับคุณเพื่อช่วยฉันประหยัดเวลา :)

— SidOfc

1

ตกลงนี่เป็นแอพที่ยอดเยี่ยม ในขณะที่ฉันไม่คิดว่าขนาดภาพเหล่านั้นจะค่อนข้างจำเป็น แต่ฉันชอบที่มันสร้างขึ้นและมาร์กอัปที่จำเป็น ฯลฯ ขอบคุณ!

— andrhamm

Indeead แอปที่ยอดเยี่ยม: +1: ช่วยได้มาก o /

— Renato Gomes

1

แต่มันเป็นกรรมสิทธิ์

— ctrl-alt-delor

มันใช้งานไม่ได้ให้Whoops, looks like something went wrong.

— daka

68

งานต่อไปนี้สำหรับฉัน ...

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

— เจ็ตบลู
แหล่งที่มา

40

แปลงไฟล์รูปภาพของคุณเป็นสตริง Base64 ด้วยเครื่องมือเช่นนี้จากนั้นแทนที่YourBase64StringHereตัวยึดตำแหน่งในตัวอย่างด้านล่างด้วยสตริงของคุณและใส่บรรทัดในส่วนหัว HTML ของคุณ:

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

สิ่งนี้จะทำงานได้ 100% ในเบราว์เซอร์

— farshid
แหล่งที่มา

3

ฉันพบเครื่องมืออื่นที่ทำการแปลงใน JavaScript โดยไม่ถ่ายโอนข้อมูลไปยังเซิร์ฟเวอร์: jpillora.com/base64-encoderนอกจากนี้ยังจัดการไฟล์หลายไฟล์โดยการลากและวาง บันทึกหน้าเพื่อใช้ภายในเครื่อง

— จัดการ

1

imho, ทางออกที่ดีที่สุดเพราะมันให้เกียรติหน้า "คง html" และเป็นตัวเองอย่างสมบูรณ์ภายในเอกสาร

— Buffalo Rabor

1

ทางออกที่ดีที่สุด ทำงานกับไฟล์ png ได้เช่นกัน <link href = "data: image / png; base64, YourBase64StringHere" rel = "ไอคอน" type = "image / png" />

— Rolf of Saxony

1

สิ่งนี้จะทำให้สตริงยาวถูกเพิ่มไปยังทุกหน้า ใช้ inline base64 สำหรับรูปภาพขนาดเล็กที่ไม่ค่อยส่งถึงผู้ใช้

— frodeborli

วิธีนี้ favicon ของคุณจะไม่ถูกแคชคุณส่งสตริงทั้งหมดไปยังไคลเอนต์ทุกครั้ง IHMHO ใช้ url ดังนั้นแคชของเบราว์เซอร์จะรู้สึกว่า 'สะอาดกว่า / ดีกว่า'

— Michiel

34

การใช้ไวยากรณ์: _{^{.ico, .gif, .png,.svg}}

ตารางนี้แสดงวิธีใช้faviconในเบราว์เซอร์หลัก ๆ การนำมาตรฐานไปใช้จะใช้องค์ประกอบลิงก์ที่มีแอตทริบิวต์ rel ในส่วนของเอกสารเพื่อระบุรูปแบบไฟล์และชื่อไฟล์และที่ตั้ง

โปรดทราบว่าเบราว์เซอร์ส่วนใหญ่จะให้ความสำคัญกับfavicon.icoไฟล์ที่อยู่ในรูทของเว็บไซต์ (ดังนั้นจะไม่สนใจแท็กลิงก์ไอคอนใด ๆ )

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

การสนับสนุนรูปแบบไฟล์

ตารางต่อไปนี้แสดงการสนับสนุนรูปแบบไฟล์ภาพสำหรับ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

การใช้งานเบราว์เซอร์

ตารางด้านล่างแสดงพื้นที่ต่าง ๆ ของเบราว์เซอร์ที่แสดงของ favicon:

                      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

ไฟล์ไอคอนสามารถมีขนาด 16 × 16 , 32 × 32 , 48 × 48 , หรือ64 × 64พิกเซลและขนาด8 บิต , 24 บิตหรือ32 บิตในระดับความลึกของสี

แม้ว่าโดยทั่วไปข้อมูลข้างต้นจะถูกต้อง แต่ก็มีบางรูปแบบ / ข้อยกเว้นในบางสถานการณ์

^{ดูบทความเต็มได้ที่แหล่งที่มาใน Wikipedia}

อัปเดต: ("ข้อมูลเพิ่มเติม")

โปรดดูที่ "ใหม่" (2019) เกณฑ์ของ Google ในการกำหนด favicon ที่จะแสดงในผลการค้นหา
คุณสามารถดึงข้อมูล (โดยทางโปรแกรมหรือด้วยตนเอง) favicon ที่แคชไว้ของ Googleสำหรับโดเมนใด ๆ ที่มี URL เช่น:https://www.google.com/s2/favicons?domain=stackoverflow.com

การใช้ URL ด้านบนโดยตรงใน<img>แท็กจะคืนค่า: " "
ฉันเคยใช้realfavicongenerator.netสองครั้ง มันละเอียดมากสร้าง / กำหนดรูปแบบ favicon ทุกรูปแบบที่คุณอาจต้องการเพื่อความเข้ากันได้สูงสุด ( แต่ถ้าคุณกำลังมองหาเดียวภาพ favicon นี้เป็นอาจจะไม่ได้เป็นเครื่องมือสำหรับคุณ!) สำหรับการแปลงไฟล์ง่าย (เช่น. PNGไปICOฯลฯ ) ผมชอบonlineconvertfree.com

— ashleedawg
แหล่งที่มา

15

หาก favicon เป็นรูปภาพประเภท png มันจะไม่ทำงานใน Chrome รุ่นเก่ากว่า อย่างไรก็ตามมันจะทำงานได้ดีใน FireFox นอกจากนี้อย่าลืมล้างแคชเบราว์เซอร์ของคุณขณะทำงานกับสิ่งต่าง ๆ หลายครั้งรหัสก็ใช้ได้ แต่แคชเป็นตัวการที่แท้จริง

— Tanveer Shaikh
แหล่งที่มา

1

ไม่เป็นไร; เป็นเรื่องยากมากที่จะติดตั้ง / เก็บ Chrome เวอร์ชันเก่าอยู่ดี

— Ben Leggiero

14

ตามที่แนะนำโดย W3.orgคุณสามารถใช้relคุณสมบัติเพื่อให้บรรลุเป้าหมายนี้

ตัวอย่าง:

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

— ราหุล Desai
แหล่งที่มา

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
แหล่งที่มา

7

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

สิ่งนี้ใช้ได้สำหรับฉัน

— อานันท์ดเวเวดี
แหล่งที่มา

4

ขณะนี้อาจใช้งานได้คุณไม่สามารถใช้ภาพ / png เป็นประเภท MIME - เนื่องจากการพิจารณาว่าคุณใช้. ico

— zanderwar

5

ฉันรู้ว่าโพสต์เก่า แต่ยังโพสต์สำหรับคนอย่างฉัน สิ่งนี้ใช้ได้สำหรับฉัน

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

วางไอคอน favicon ของคุณในไดเรกทอรีราก ..

— Cyclotron3x3
แหล่งที่มา

4

เป็นบันทึกเพิ่มเติมที่อาจช่วยใครซักคนในบางวัน

คุณไม่สามารถสะท้อนสิ่งใด ๆ ในหน้าก่อนหน้า:

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

จะไม่โหลด ico

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

ทำงานได้ดี

— bart2puck
แหล่งที่มา

3

นั่นเป็นเพราะมันควรจะอยู่ในส่วนหัวของเอกสาร HTML และจะถูกละเว้นโดยเบราว์เซอร์ส่วนใหญ่หากไม่ได้

— Eric Sebasta

ใช่ฉันแค่อยากจะใส่สิ่งนี้ไว้ในกรณีที่ใครก็ตามประสบปัญหา ปัญหาของฉันคือ "สวัสดี" เป็นรหัสการแก้ปัญหาบางอย่างและฉันก็นิ่งงันสำหรับเล็กน้อย

— bart2puck

3

ฉันใช้convert -resize 16x16 img.png favicon.ico(บน linux konsole) เพื่อแปลงภาพของฉันและเพิ่ม<link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">ส่วนหัวของฉันและทุกอย่างทำงานได้อย่างสมบูรณ์แบบ

— DMX
แหล่งที่มา

2

โปรดสังเกตว่าหากไซต์ของคุณใช้งานได้subfolderเช่น:

http://localhost/MySite/

คุณจะต้องคำนึงถึงเรื่องนั้นด้วย หากคุณทำเช่นนั้นจากASP.NETแอพสิ่งที่คุณต้องทำคือเพิ่ม~หน้า URL:

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

— Serj Sagan
แหล่งที่มา

2

ตามการอัปเดตของ OP มันไม่ปรากฏขึ้นในเครื่อง แต่ตามการอัปเดตของ OP เมื่อฉันอัปโหลดไปยังเซิร์ฟเวอร์มันก็ใช้ได้

เนื่องจากนี่เป็นเว็บไซต์ html แบบคงที่ที่เรียบง่ายฉันมีความหรูหราในการทำงานโดยไม่ต้องเรียกใช้เว็บเซิร์ฟเวอร์ในท้องถิ่น
เว็บเซิร์ฟเวอร์โดยทั่วไปจะให้บริการ favicon โดยอัตโนมัติหากมีหนึ่งโดยค่าเริ่มต้น

แต่เมื่อไม่ได้เรียกใช้เว็บเซิร์ฟเวอร์เบราว์เซอร์จะไม่เพียงแค่อ่านไดเรกทอรีที่กำลังมองหาไฟล์เพิ่มเติมพูด favicon.ico ยกเว้นว่ามันจะอยู่ในรายการในเอกสาร html

ดังนั้นในขณะที่ฉันมีรายการต่อไปนี้ในheadแท็ก:

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

ผมไม่ได้นอกจากนี้ยังรวมถึงการอ้างอิงสำหรับธรรมดา favicon.ico'เฒ่า
แม้ว่าfavicon.icoไฟล์ดังกล่าวจะถูกรวมไว้นอกเหนือจากภาพที่แสดงไว้ด้านบน

เมื่อฉันเพิ่มบรรทัดต่อไปนี้:

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

มันไม่ยังแสดงในเบราว์เซอร์ของฉันเมื่อฉันดูท้องถิ่นไฟล์แม้ในขณะที่ไม่ได้ให้บริการผ่านเซิร์ฟเวอร์ท้องถิ่น

ดังนั้นไอคอนจะแสดงขึ้นมาได้ดีเมื่อมันรันบนเซิร์ฟเวอร์ที่ใช้งานจริง แต่ไม่ใช่ในเครื่อง

ฉันพูดถึงเรื่องนี้อย่างชัดเจนเพราะตัวสร้าง favicon ที่ฉันใช้โปรดระบุรหัสไอคอนรายการและคำแนะนำ อย่างไรก็ตามในขณะที่รวมfavicon.icoรูปภาพไว้มันไม่ได้รวม<link>ไฟล์ไว้ในรหัสเพื่อเพิ่มลงในhtmlเอกสาร
ฉันเดาว่าบริการfavicon.icoเริ่มต้นจะใช้บริการโดยอัตโนมัติโดยเบราว์เซอร์ทั้งหมดตามค่าเริ่มต้นดังนั้นเฉพาะรุ่น "ทางเลือก" ที่จำเป็นต้องเพิ่มอย่างชัดเจนในแท็กส่วนหัว
เห็นได้ชัดว่าพวกเขาไม่พิจารณาว่าเมื่อดูไฟล์ในเครื่อง (หรือไม่ให้บริการไฟล์ในเครื่อง) เราไม่สนใจที่จะเห็น favicon ใช่ไหม

— SherylHohman
แหล่งที่มา

1

หากคุณเพิ่ม favicon ลงในโฟลเดอร์รูท / รูปภาพด้วยเบราว์เซอร์ชื่อ favicon.ico จะเข้าใจโดยอัตโนมัติและรับเป็น favicon.I ทดสอบและทำงาน ลิงค์ของคุณต้องเป็น www.website.com/images/favicon.ico

สำหรับข้อมูลเพิ่มเติมดูคำตอบนี้:

คุณต้องรวม <link rel = "icon" href = "favicon.ico" type = "image / x-icon" /> หรือไม่

— Sarkhan
แหล่งที่มา

0

โปรดทราบว่า FF ล้มเหลวในการโหลดไอคอนที่มีการซ้ำซ้อน//ใน URL /img//favicon.pngเช่น ทดสอบกับ FF 53 แล้ว Chrome ใช้ได้

— Étienne Bersac
แหล่งที่มา

นั่นคือไม่ได้จริงๆคำตอบมากที่สุดเท่าที่จะเป็นความคิดเห็น (ดู " วิธีการตอบ ")

— ashleedawg

0

ลองใช้ <link rel="icon" type="image/ico" href="images/favi.ico"/>

— subindas pm
แหล่งที่มา

-2

ฉันเพิ่งใช้ png อย่าลืมลบพื้นหลังสีขาว ทำให้ไอคอนดีขึ้น

— ทอม
แหล่งที่มา

การเพิ่ม favicon ให้กับหน้า HTML คงที่