ฟาวิคอน(ย่อจากภาษาอังกฤษ FAVorites ICON - "ไอคอนสำหรับรายการโปรด" จากชื่อโฟลเดอร์บุ๊กมาร์กใน MSIE) - ไอคอนสำหรับเว็บไซต์หรือหน้าเว็บ โดยเบราว์เซอร์จะแสดงในแถบที่อยู่ก่อน URL ของหน้า เช่นเดียวกับรูปภาพที่อยู่ถัดจากบุ๊กมาร์ก ในแท็บและในองค์ประกอบอินเทอร์เฟซอื่นๆ
นี่คือตัวอย่างการแสดงไอคอน Fav เบราว์เซอร์ Googleโครเมียม:
ฉันอยากจะดึงความสนใจไปยังประเด็นสำคัญอีกประการหนึ่งของการใช้ favicons: ในการออกบางส่วน เครื่องมือค้นหาแคตตาล็อกและบริการบุ๊กมาร์กโซเชียล:
ตามเนื้อผ้าจะใช้รูปภาพขนาด 16 × 16 พิกเซลในรูปแบบ ICO โดยวางไว้ที่รูทของไซต์ภายใต้ชื่อ favicon.icoทั้งหมด เบราว์เซอร์ที่ทันสมัยเข้าใจการระบุตำแหน่งไอคอนอย่างชัดเจนในโค้ด (X)HTML (ภายในองค์ประกอบ
) ซึ่งอนุญาตให้ใช้ไอคอนที่แตกต่างกันสำหรับแต่ละหน้าได้ (หากไม่มี /favicon.ico): , ที่ไหน:ดังนั้นจึงไม่ควรพูดเกินจริง สรุป: มีหลายวิธีในการเพิ่มประสิทธิภาพหน้าเว็บ ไม่ใช่ทุกคนที่จำเป็น แต่จากรายการมาตรการนี้ สามารถรวบรวมตัวเลือกการเพิ่มประสิทธิภาพที่ถูกต้องสำหรับเกือบทุกไซต์ได้ คุณสามารถทดสอบความเร็วของหน้าได้ตลอดทาง
ไอคอนมาตรฐานและประเภทและขนาดไฟล์ต่างๆ
หากไฟล์นี้หายไป ก็จะไม่มีผลกระทบใดๆ มากนัก และยังสามารถแสดงหน้าเว็บได้โดยไม่ต้องใช้ไฟล์อีกด้วย ชื่อไฟล์มาจากรายการโปรดและไอคอน นอกจากนี้ ไอคอนนี้ยังปรากฏในรายการเบราว์เซอร์ที่คุณชื่นชอบอีกด้วย ทำให้ง่ายต่อการเน้นรายการ อาจมีไอคอนเพิ่มเติมให้ มักจะแตกต่างจากรูปแบบและรูปแบบของไฟล์ และควรตั้งชื่อให้แตกต่างออกไป จนถึงขณะนี้ความหลากหลายของอุปกรณ์และระบบได้เพิ่มขึ้นจนไอคอนมาตรฐานที่มีขนาดเล็กไม่เพียงพออีกต่อไป
คุณสามารถระบุภาพได้หลายภาพ รูปแบบที่แตกต่างกัน- เช่น บรรทัดที่มีไอคอนทางลัดและไอคอนเข้า รูปแบบ ICOสำหรับ Internet Explorer และบรรทัดที่มีไอคอนและไอคอนในรูปแบบ GIF หรือ PNG สำหรับเบราว์เซอร์สำรอง
- rel ยังสามารถมี “ไอคอนทางลัด” (Microsoft อินเทอร์เน็ตเอ็กซ์พลอเรอร์จะตอบสนองต่อสตริง "ไอคอนทางลัด" และเบราว์เซอร์ที่ตรงตามมาตรฐานกับคำว่า "ไอคอน")
- href มี URI สัมบูรณ์หรือสัมพันธ์กับไฟล์ (in มอซซิลา ไฟร์ฟอกซ์ตัวอย่างเช่น 3.0 รองรับ URI เดียวกันกับแท็ก img)
- รูปแบบไฟล์อาจเป็น PNG หรือ GIF, 16x16 หรือ 32x32 และมีความลึกของสี 8 บิตหรือ 24 บิต (เช่น ใน Mozilla Firefox อาจเป็นได้ไม่เพียงเท่านี้ แต่ยังเหมือนกับแท็ก img ด้วย) ในกรณีนี้ แอตทริบิวต์ type ต้องมีประเภท MIME ของรูปแบบ (เช่น image/png สำหรับ PNG) หาก Internet Explorer ใช้รูปแบบ ICO ประเภท MIME ควรเป็น image/vnd.microsoft.icon ประเภทรูปภาพ/ไอคอน x เลิกใช้แล้วในปี 2546 หลังจากที่ประเภทดังกล่าวได้รับมาตรฐานสำหรับ ICO
ส่วนที่สอง favicon ควรเป็นอย่างไร
ดังนั้นเราจึงหาได้ว่า favicon คืออะไรและใช้ที่ไหน ตอนนี้เกี่ยวกับสิ่งที่ favicon ที่ดีควรจะเป็น1. เห็นได้ชัดว่า ไอคอน Fav- มันเป็นแบบนั้น นามบัตรจึงต้องดำเนินการ ในรูปแบบเดียวกับไซต์- ยิ่งไซต์และ favicon มีบ่อยมากเท่าไรก็ยิ่งดีเท่านั้น เมื่อพัฒนา favicon ขอแนะนำให้ใช้สีและองค์ประกอบการออกแบบของเว็บไซต์หรือโลโก้ที่เกี่ยวข้อง ไอคอน Fav ต้องเชื่อมโยงกับไซต์ - นี่คือฟังก์ชันหลัก
การสร้างไอคอนเริ่มต้น
คุณสามารถเลือกหนึ่งในสามประเภทไฟล์ต่อไปนี้ เบราว์เซอร์มักจะเรียกไฟล์โดยอัตโนมัติเมื่อคุณเข้าถึงหน้าเว็บจากไดเรกทอรีราก หลีกเลี่ยงความขัดแย้งกับเบราว์เซอร์บางตัวที่ควรดูด้วยไอคอนอื่น ค่าที่เป็นไปได้คือ:
ดังนั้นจึงต้องคำนึงถึงกลุ่มดาวจำนวนมาก นี่คือความเป็นไปได้บางประการ นี่คือตัวเลือกที่แนะนำ ไม่แนะนำสิ่งนี้ อย่างไรก็ตาม บางครั้งอาจจำเป็น เช่น รหัสตัวอย่างสำหรับทั้งสองรายการจะเป็นดังนี้ นี่เป็นกลุ่มดาวที่ไม่เอื้ออำนวยมาก
2. ฟาวิคอนจะต้องเป็น เข้าใจง่าย: ผู้ใช้ควรเข้าใจทันทีว่าอะไรถูกวาดบน favicon คุณไม่ควรพยายามวางรูปภาพทั้งหมดไว้ใน favicon เพราะองค์ประกอบที่จดจำได้หนึ่งหรือสององค์ประกอบก็เพียงพอแล้ว
3. คุณสามารถแสดงไอคอนของธีมของไซต์บน favicon (เช่น หมายเลขโทรศัพท์สำหรับร้านขายโทรศัพท์ออนไลน์) - แต่เฉพาะในกรณีที่ไอคอนนี้อธิบายไซต์ได้ครบถ้วน (คุณไม่ควรแสดงบน favicon ของของใช้ในครัวเรือน เก็บ เครื่องซักผ้าหากพวกเขาขายเตารีดและเครื่องดูดฝุ่นด้วย)
เมื่อผู้ใช้เพิ่มเว็บเพจลงบนพื้นผิวไทล์ ส่วนย่อยของเว็บเพจจะปรากฏขึ้น ดังนั้นจึงสามารถขยายโค้ดได้ดังนี้ อย่างที่คุณเห็น การระบุไอคอนมาตรฐานอาจมาพร้อมกับความไม่แน่นอนหลายประการ
ทำให้ภาพต้นฉบับเล็กลงหรือใช้ดินสอ
ความท้าทายในการสร้างไอคอนมาตรฐานคือการใช้หรือพัฒนา หัวข้อที่เหมาะสมสำหรับเว็บไซต์ที่ดูดีด้วยขนาดรูปภาพที่เล็กมาก มีสองวิธี เมื่อใช้ดินสอ คุณควรเปิดฟังก์ชันซูมเพื่อให้มองเห็นพิกเซลได้ชัดเจน สิ่งนี้อาจใช้ได้กับเบราว์เซอร์บางตัว
4. เป็นที่พึงปรารถนาอย่างยิ่งที่จะทำให้ไอคอน Fav เป็นที่จดจำ ดังนั้นจึงเป็นการดีกว่าถ้าใช้รูปภาพที่ผู้ใช้คุ้นเคย ซึ่งเขาสามารถเรียกได้ด้วยคำบางคำ (เช่น ไอคอน Fav ของ LJ คือ "ดินสอ")
อภิปรายบทความใน LiveJournal ของฉัน