แนวทางปฏิบัติที่ดีที่สุดในการสร้างไอคอน Fav บนเว็บไซต์คืออะไร?

103

คำถาม

  • แนวทางปฏิบัติที่ดีที่สุดในการสร้างไอคอน Favบนเว็บไซต์คืออะไร?
  • และเป็นไฟล์. ic ที่มีทั้งภาพขนาด 16x16 และ 32x32 ดีกว่าไฟล์. png ที่มี 16x16 เท่านั้นหรือไม่?
  • วิธีการที่ถูกต้องในปัจจุบันใช้ไม่ได้กับเบราว์เซอร์รุ่นเก่า ๆ

วิธีที่ 1

การวางไฟล์ที่มีชื่อfavicon.icoในไดเร็กทอรีหลักเป็นวิธีหนึ่ง เบราว์เซอร์จะร้องขอไฟล์นั้นเสมอ คุณจะเห็นสิ่งนั้นในไฟล์บันทึกของ apache

วิธีที่ 2

แท็ก HTML ใน<head>ส่วน:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html  favicon 
— bytecode77
แหล่งที่มา

คำตอบ:

154

มีหลายวิธีในการสร้างไอคอน Fav วิธีที่ดีที่สุดสำหรับคุณขึ้นอยู่กับปัจจัยต่างๆดังนี้

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

วิธีแรก: ใช้เครื่องกำเนิด Favicon

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

ข้อดีของโซลูชันดังกล่าว: รวดเร็วและการพิจารณาความเข้ากันได้ทั้งหมดได้รับการแก้ไขแล้วสำหรับคุณ

วิธีที่สอง: สร้าง favicon.ico (เบราว์เซอร์บนเดสก์ท็อปเท่านั้น)

ตามที่คุณแนะนำคุณสามารถสร้างfavicon.icoไฟล์ที่มีรูปภาพขนาด 16x16 และ 32x32 (โปรดทราบว่าMicrosoft แนะนำ 16x16, 32x32 และ 48x48 )

จากนั้นประกาศในโค้ด HTML ของคุณ:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

วิธีนี้จะใช้ได้กับเบราว์เซอร์เดสก์ท็อปทุกรุ่นทั้งเก่าและใหม่ แต่เบราว์เซอร์บนมือถือส่วนใหญ่จะไม่สนใจไอคอน Fav

เกี่ยวกับคำแนะนำของคุณในการวางfavicon.icoไฟล์ในรูทและไม่ประกาศ: ระวังแม้ว่าเทคนิคนี้จะใช้ได้กับเบราว์เซอร์ส่วนใหญ่ แต่ก็ไม่น่าเชื่อถือ 100% ตัวอย่างเช่น Windows Safari ไม่พบ (ได้รับ: เบราว์เซอร์นี้เลิกใช้แล้วบน Windows แต่คุณเข้าใจ) เทคนิคนี้มีประโยชน์เมื่อใช้ร่วมกับไอคอน PNG (สำหรับเบราว์เซอร์สมัยใหม่)

วิธีที่สาม: สร้าง favicon.ico ไอคอน PNG และไอคอน Apple Touch (ทุกเบราว์เซอร์)

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

คุณสามารถเข้ากันได้ดีกับ:

  • favicon.ico, ดูด้านบน.
  • ไอคอน PNG 192x192 สำหรับ Android Chrome
  • ไอคอน Apple Touch ขนาด 180x180 (สำหรับ iPhone 6 Plus อุปกรณ์อื่น ๆ จะลดขนาดลงตามต้องการ)

ประกาศด้วย 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

นี่ไม่ใช่เรื่องราวทั้งหมด แต่ก็ดีพอในกรณีส่วนใหญ่

— Philippe_b
แหล่งที่มา
9
อันที่จริง <link rel = "ไอคอนทางลัด" href = "/ path / to / icons / favicon.ico"> ที่ยังใช้บ่อยไม่ใช่ตัวเลือกที่ถูกต้อง มันไม่ได้เป็นมาตรฐานและมีเพียง IE เท่านั้นที่รองรับ และสำหรับ IE 9 IE สนับสนุนวิธีการ 'look at root' เริ่มต้น ดังนั้นจึงไม่ใช่วิธีที่จะรองรับเบราว์เซอร์ทั้งหมด แต่เป็นเพียงวิธีการสนับสนุน IE <9 โดยอาศัยเมธอด 'place in root' (now standard) หรือถ้าคุณยืนยันให้เพิ่ม: <link rel = "icon" href = "/ favicon.ico"> (แม้ว่านี่จะไม่ใช่มาตรฐานก็ตาม)
— HappyMe
7
กลไก favicon มีการพัฒนาอย่างแน่นอนในช่วงหลายปีที่ผ่านมา วันนี้ฉันสังเกตเห็นว่าข้อมูลจำเพาะที่ MDN ระบุว่า: ประเภทลิงก์ทางลัดมักจะปรากฏก่อนไอคอน แต่ประเภทลิงก์นี้ไม่เป็นไปตามข้อกำหนดไม่สนใจและผู้เขียนเว็บจะต้องไม่ใช้อีกต่อไป ใช้ความหมาย<link ref="icon" ...>มากกว่า<link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
— broc.seib
1
ขอบคุณ @ broc.seib สำหรับคำติชม ในขณะที่เขียนความคิดเห็นนี้ฉันหลงทางว่าเหตุใดจึงเป็น "ไอคอนทางลัด" ไม่ใช่ "ไอคอน" แน่นอนว่า Mozilla มีเสียงในเรื่องนี้ แต่เราต้องไม่ลืมว่าเหตุใดจึงมีการประกาศนี้ตั้งแต่แรก: เพื่อสนับสนุนเบราว์เซอร์เดิมเช่น IE 8 เบราว์เซอร์ล่าสุดส่วนใหญ่ใช้ไอคอน PNG ซึ่งสะอาดและเบากว่า ICO แผนของฉันสำหรับ RealFavicon คือการลบการประกาศนี้โดยสิ้นเชิง ก่อนหน้านี้ฉันต้องทำการทดสอบบน IE 7, 8 และ 9
— philippe_b
ไม่ต้องพูดถึงว่าถ้าคุณ "ดูแหล่งที่มา" ในหน้านี้บน Stack Overflow ref="shortcut icon"คือสิ่งที่พวกเขาใช้
— Steven Ventimiglia
1
@laggingreflex /favicon.icoเป็นวิธีที่ต้องการ www.google.comนี่คือสิ่งที่คุณได้รับเมื่อเข้ามาเยี่ยมชม แต่คุณอาจไม่ต้องการสร้างมลพิษในไดเรกทอรีรากของคุณด้วยไอคอน ในกรณีนี้มาร์กอัปใช้งานได้ดี
— philippe_b
2
  1. คุณสามารถทำงานกับเว็บไซต์นี้เพื่อสร้างfavin.ico
  2. ฉันแนะนำให้ใช้รูปแบบ. ico เนื่องจาก png ไม่ทำงานกับวิธีที่ 1 และ ico อาจมีรายละเอียดมากกว่านี้!
  3. ทั้งสองวิธีทำงานกับเบราว์เซอร์ทั้งหมด แต่เมื่อมันทำงานโดยอัตโนมัติสิ่งที่คุณต้องการพิมพ์รหัสสำหรับมัน? ดังนั้นฉันคิดว่าวิธีที่ 1 ดีกว่า
— a828h
แหล่งที่มา
2

ฉันใช้https://iconifier.net ฉันอัปโหลดรูปภาพดาวน์โหลดไฟล์ zip รูปภาพเพิ่มรูปภาพไปยังเซิร์ฟเวอร์ของฉันทำตามคำแนะนำบนไซต์รวมถึงการเพิ่มลิงก์ไปยัง index.html ของฉันและมันใช้งานได้ ตอนนี้ไอคอน Fav ของฉันแสดงบน iPhone ของฉันใน Safari เมื่อ 'เพิ่มลงในหน้าจอหลัก'

— Hblegg
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.