ฉันจะรับ Favicon ของเว็บไซต์ได้อย่างไร


115

คำถามที่ง่ายพอ: ฉันได้สร้างแอพเล็ก ๆ ที่เป็นเพียงรายการโปรดที่อยู่ในซิสเต็มเทรย์ของฉันเพื่อให้ฉันสามารถเปิดไซต์ / โฟลเดอร์ / ไฟล์ที่ใช้บ่อยจากที่เดียวกันได้ การรับไอคอนเริ่มต้นจากระบบของฉันสำหรับประเภทไฟล์ที่รู้จักนั้นไม่ซับซ้อนมากนัก แต่ฉันไม่รู้วิธีรับไอคอน Fav จากเว็บไซต์ (ดังนั้นจะมีไอคอนสแต็กสีเทา -> สีส้มในแถบที่อยู่เป็นต้น)

มีใครรู้บ้างว่าฉันจะไปถึงจุดนั้นได้อย่างไร?


1
ผมไม่แน่ใจว่าวิธีการที่ง่าย (หรือเป็นไปได้) มันจะทำงานโดยอัตโนมัติในการโหลด / แยกของหน้านี้ แต่ก็ดูเหมือนว่าจะมีทุกอย่าง: Favicon-ตรวจสอบ อย่างน้อยที่สุดคุณสามารถใช้เป็นข้อมูลอ้างอิง / ตรวจสอบได้
Kevin Fegan

คุณสามารถใช้Statvoo Favicon APIซึ่งค่อนข้างรวดเร็วและไม่เจ็บปวด
AO_

Favicon Kitช่วยให้คุณสามารถรับและฝัง Favicons ได้เช่นรูปภาพทั่วไปที่มีขนาดใหญ่กว่า 16 พิกเซลมากหากมี (การเปิดเผยข้อมูล: ฉันเป็นผู้เขียน)
AndreasPizsa

คำตอบ:


235

คุณจะต้องจัดการกับสองสามวิธีนี้:

  1. มองหาไฟล์ favicon.icoที่รากของโดเมน

    www.domain.com/favicon.ico

  2. มองหาไฟล์ <link>แท็กที่มีrel="shortcut icon"แอตทริบิวต์

    <link rel="shortcut icon" href="https://stackoverflow.com/favicon.ico" />

  3. มองหาไฟล์ <link>แท็กที่มีrel="icon"แอตทริบิวต์

    <link rel="icon" href="https://stackoverflow.com/favicon.png" />

สองอย่างหลังมักจะให้ภาพที่มีคุณภาพสูงกว่า


เพื่อให้ครอบคลุมฐานทั้งหมดมีไฟล์ไอคอนเฉพาะอุปกรณ์ที่อาจให้ภาพที่มีคุณภาพสูงขึ้นเนื่องจากอุปกรณ์เหล่านี้มักจะมีไอคอนขนาดใหญ่บนอุปกรณ์มากกว่าที่เบราว์เซอร์ต้องการ:

<link rel="apple-touch-icon" href="images/touch.png" />

<link rel="apple-touch-icon-precomposed" href="images/touch.png" />


และในการดาวน์โหลดไอคอนโดยไม่สนใจว่าไอคอนนั้นคืออะไรคุณสามารถใช้ยูทิลิตี้เช่นhttp://www.google.com/s2/faviconsซึ่งจะช่วยยกของหนักทั้งหมด:

var client = new System.Net.WebClient();

client.DownloadFile(
    @"http://www.google.com/s2/favicons?domain=stackoverflow.com",
    "stackoverflow.com.ico");

1
GetFavIcon ยังใช้งานได้หรือไม่ เมื่อฉันเรียกใช้ตัวอย่างของคุณฉันได้รับข้อผิดพลาด 400
Julien

17
ดูเหมือนว่าตอนนี้ Google จะมีบริการที่คล้ายกัน: google.com/s2/favicons?domain_url=stackoverflow.com
hunter

20
หากใครต้องการทางเลือกอื่นนอกเหนือจาก Google DuckDuckGo มีทางเลือกอื่น: icons.duckduckgo.com/ip2/www.stackoverflow.com.ico
Jose Serodio

1
@hunter google.com/s2/faviconsมันเป็นไอคอนที่มีขนาด 16x16 เป็นไอคอนที่แย่มากคุณรู้หรือไม่ว่าจะนำไอคอนขนาดใหญ่ไปที่ใด
nideba

1
@JoseSerodio - อืม ... นั่นเป็นสิ่งแรกที่ฉันลอง แต่สำหรับโดเมนที่ฉันกำลังตรวจสอบฉันเพิ่งได้ภาพลูกศรชี้ไปทางขวา "สลัว / ทึบ" (มากกว่า) อยู่ในวงกลมภายในสี่เหลี่ยม . หน้าตาเป็นแบบนี้แต่ฉันตรวจสอบให้แน่ใจว่าสะกดถูกต้อง "domain.com.ico" ตอนนี้สิ่งมหัศจรรย์ของอินเทอร์เน็ตมันทำงานได้อย่างถูกต้อง ... ไปคิด =) ดังนั้นไม่เป็นไร
Kevin Fegan

19

อัปเดตเมื่อปี 2020

นี่คือสามบริการที่คุณสามารถใช้ได้ในปี 2020 เป็นต้นไป

<img height="16" width="16" src='https://icons.duckduckgo.com/ip3/www.google.com.ico' />

<img height="16" width="16" src='http://www.google.com/s2/favicons?domain=www.google.com' />

<img height="16" width="16" src='https://api.statvoo.com/favicon/?url=google.com' />

4
Grabicon.com เป็นบริการแบบชำระเงินเริ่มตั้งแต่ $ 9 / เดือน
59

1
อีกอัน: favicon.allesedv.com <img width = "144" height = "144" src = "// f3.allesedv.com/144/www.stackoverflow.com" />
Martin Seitl

บริการนี้ทำงานไม่มีอีกต่อไปคุณสามารถใช้api.statvoo.com/favicon/?url=stackoverflow.com ฉันใช้มาสองปีแล้วและมันไม่เคยทำให้ฉันผิดหวัง
AO_

ขอบคุณ @AO_ ฉันใช้ duckduckgo วันนี้ฉันได้อัปเดตคำตอบของฉัน
Blowsie

1
@saintvixalien ฉันเชื่อว่าสิ่งนี้มีการเปลี่ยนแปลงเมื่อเร็ว ๆ นี้สำหรับผู้ที่ไม่ได้เริ่มต้นด้วยคีย์ API เนื่องจากเซิร์ฟเวอร์กำลังถูกโจมตี;) ฉันใช้บริการหลักด้วยคีย์ API และรับคำตอบโดยตรงโดยไม่ต้องใช้กระดาษห่อหุ้ม ฉันทดสอบโดยไม่มีคีย์ API และเปลี่ยนเส้นทางไปยังบริการของ Google ตามที่คุณกล่าว ..
AO_


6

สิ่งแรกที่ต้องค้นหาคือ /favicon.ico ในรูทไซต์ บางอย่างเช่น WebClientDownloadFile () น่าจะทำได้ดี อย่างไรก็ตามคุณสามารถตั้งค่าไอคอนในข้อมูลเมตาได้ - สำหรับ SO นี่คือ:

<link rel="shortcut icon"
   href="http://sstatic.net/stackoverflow/img/favicon.ico">

และโปรดทราบว่าอาจมีไอคอนอื่น "สัมผัส" มีแนวโน้มที่จะใหญ่ขึ้นและมีความละเอียดสูงขึ้นเช่น:

<link rel="apple-touch-icon"
   href="http://sstatic.net/stackoverflow/img/apple-touch-icon.png">

ดังนั้นคุณจะแยกวิเคราะห์ใน HTML Agility Pack หรือ XmlDocument (ถ้า xhtml) และใช้ WebClientDownloadFile ()

นี่คือรหัสบางส่วนที่ฉันใช้เพื่อรับสิ่งนี้ผ่านชุดความคล่องตัว:

var favicon = "/favicon.ico";
var el=root.SelectSingleNode("/html/head/link[@rel='shortcut icon' and @href]");
if (el != null) favicon = el.Attributes["href"].Value;

สังเกตว่าไอคอนเป็นของพวกเขาไม่ใช่ของคุณ


1
ขอบคุณ Marc. ฉันขอขอบคุณตัวอย่าง เขียนรูปภาพฉันไม่ได้ตั้งใจจะแก้ไขหรือใช้เพื่อสิ่งอื่นใดนอกจากไอคอนในเมนูบริบทข้างป้ายกำกับทางลัด
Steven Evers

4

เป็นแนวทางปฏิบัติที่ดีในการลดจำนวนคำขอที่แต่ละเพจต้องการ ดังนั้นหากคุณต้องการไอคอนหลายไอคอนยานเดกซ์สามารถสร้างรูปแบบของ Favicons ได้ในแบบสอบถามเดียว นี่คือตัวอย่าง http://favicon.yandex.net/favicon/google.com/stackoverflow.com/yandex.net/


3

คุณสามารถรับ URL ไอคอน Fav จาก HTML ของเว็บไซต์

นี่คือแท็ก Favicon:

<link rel="icon" type="image/png" href="/someimage.png" />

คุณควรใช้นิพจน์ทั่วไปที่นี่ หากไม่พบแท็กให้มองหา "favicon.ico" ในไดเรกทอรีรากของไซต์ หากไม่พบสิ่งใดแสดงว่าไซต์นั้นไม่มีไอคอน Fav


2

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

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

นำสตริงเข้าhrefและต่อท้ายเข้ากับ URL พื้นฐานของเว็บไซต์ (สมมติว่าเป็น"http://WEBSITE/") ดังนั้นดูเหมือนว่า

http://WEBSITE/SOMERELATIVEPATH/favicon.ico

ซึ่งเป็นเส้นทางที่แน่นอนไปยังไอคอน Fav หากคุณไม่พบวิธีนี้ก็สามารถอยู่ในรูทได้เช่นกันซึ่งในกรณีนี้ URL คือhttp://WEBSITE/favicon.icoที่เป็น

ใช้ URL ที่คุณกำหนดและแทรกลงในรหัสต่อไปนี้:

<html>
  <head>
   <title>Capture Favicon</title>   
  </head>
  <body>
    <a href='http://WEBSITE/SOMERELATIVEPATH/favicon.ico' alt="Favicon"/>Favicon</a> 
  </body>
</html>

บันทึกโค้ด HTML นี้ไว้ในเครื่อง (เช่นบนเดสก์ท็อปของคุณ) GetFavicon.htmlแล้วดับเบิลคลิกเพื่อเปิด มันจะแสดงเฉพาะการเชื่อมโยงชื่อFavicon คลิกขวาที่ลิงค์นี้และเลือก"บันทึกเป้าหมายเป็น ... "เพื่อบันทึก Favicon บนพีซีในพื้นที่ของคุณ - เท่านี้ก็เสร็จแล้ว!


1
        HttpWebRequest w = (HttpWebRequest)HttpWebRequest.Create("http://stackoverflow.com/favicon.ico");

        w.AllowAutoRedirect = true;

        HttpWebResponse r = (HttpWebResponse)w.GetResponse();

        System.Drawing.Image ico;
        using (Stream s = r.GetResponseStream())
        {
            ico = System.Drawing.Image.FromStream(s);
        }

        ico.Save("favicon.ico");

1

นี่เป็นคำตอบที่ล่าช้า แต่เพื่อความสมบูรณ์: มันค่อนข้างยากที่จะดึง Favicons ทั้งหมดเข้าใกล้ถึง 90%

เมื่อไม่นานมานี้ฉันเขียนปลั๊กอิน WordPress: http://wordpress.org/extend/plugins/wp-favicons/ซึ่งพยายามเข้าใกล้

ก. มันเริ่มต้นด้วยการดูที่เก็บ favicon เช่น google favicons, getfavicons ฯลฯ ...

ข. หากไม่มีไอคอนใดส่งคืนไอคอน (ฉันตรวจสอบสิ่งนี้โดยจับคู่กับไอคอนเริ่มต้นที่พวกเขาส่งคืน) ฉันเริ่มต้นด้วยการพยายามรับไอคอนด้วยตัวเอง

ค. สิ่งนี้เกี่ยวข้องกับการข้ามหน้าเว็บ แต่ยังตรวจสอบการเปลี่ยนเส้นทางด้วย NO autoredirect เช่นเดียวกับการข้ามผ่าน 404 เพราะอาจมีไอคอนอยู่ใน 404 ในท้ายที่สุดหมายความว่าคุณจะต้องแยกวิเคราะห์การเปลี่ยนเส้นทางในส่วนหัว html เช่นเดียวกับการเปลี่ยนเส้นทางจาวาสคริปต์เพื่อให้เข้าใกล้ 100% มากขึ้น

ง. หลังจากนั้นฉันทำการตรวจสอบไฟล์ภาพทางกายภาพเพราะบางครั้งในบางเซิร์ฟเวอร์ (ฉันทดสอบมากกว่า 300.000+ ไฟล์) ได้รับการส่งคืนด้วยประเภท mime ที่ไม่ถูกต้องเป็นต้น

โค้ดยังไม่สมบูรณ์แบบเพราะในรายละเอียดมันบ้ามากคุณจะพบกับสถานการณ์แปลก ๆ มากมาย: ผู้คนมีเส้นทางที่เข้ารหัสผิด (img / favicon.ico โดยที่ img ไม่ได้อยู่ในรูท) ส่วนหัวที่ซ้ำกันในเอาต์พุต html การตอบสนองของเซิร์ฟเวอร์ที่แตกต่างกัน จากศีรษะและลำตัว ฯลฯ ...

แกนหลักของส่วนที่ดึงข้อมูลอยู่ที่นี่: http://plugins.svn.wordpress.org/wp-favicons/trunk/includes/server/class-http.phpเพื่อให้คุณสามารถทำวิศวกรรมย้อนกลับได้ แต่โปรดทราบว่าการตรวจสอบการตอบสนองควร ทำได้จริงๆ (ตรวจสอบประเภทไฟล์ภาพละครใบ้ ฯลฯ .. )


1

ฉันพบว่า 'SHGetFileInfo' (ตรวจสอบ 'www.pinvoke.net' สำหรับลายเซ็น) ช่วยให้คุณสามารถดึงไอคอนขนาดเล็กหรือใหญ่ได้เช่นเดียวกับที่คุณจัดการกับรายการไฟล์ / โฟลเดอร์ / เชลล์

เจนส์;)


0

http://realfavicongenerator.net/favicon_checker?site=http://stackoverflow.comให้การวิเคราะห์ Favicon ระบุว่า favicons ใดมีอยู่ในขนาดเท่าใด คุณสามารถประมวลผลข้อมูลเพจเพื่อดูไอคอน Fav คุณภาพดีที่สุดและต่อท้ายชื่อไฟล์เข้ากับ URL เพื่อรับมัน


0

คุณสามารถใช้Getfv.co :

ในการดึงไอคอน Fav คุณสามารถ hotlink ได้ที่ ... http://g.etfv.co/[URL]

ตัวอย่างสำหรับหน้านี้: http://g.etfv.co//programming/5119041/how-can-i-get-a-web-sites-favicon

ดาวน์โหลดเนื้อหาแล้วไปกันเลย!

แก้ไข:

Getfv.co และ fvicon.com หน้าตาเฉย หากคุณต้องการผมพบว่าเป็นทางเลือกที่ไม่ใช่ฟรี: grabicon.com


1
ลิงก์เสียข้อผิดพลาด: ไม่พบ
tttony

@tttony แน่นอน. fvicon.com ก็หน้าตาเฉยเหมือนกัน ฉันจะแก้ไขความคิดเห็นของฉันด้วยเนื้อหาที่ต้องชำระเงิน หากคุณพบลิงค์ที่ใช้งานได้ฟรีโปรดแชร์!
aloisdg ย้ายไปที่ codidact.com


0

ในปี 2020 โดยใช้บริการของ duckduckgo.com จาก CLI

curl -v https://icons.duckduckgo.com/ip2/<website>.ico > favicon.ico

ตัวอย่าง

curl -v https://icons.duckduckgo.com/ip2/www.cdc.gov.ico > favicon.ico
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.