ในการออกแบบเว็บ อย่างที่คุณรู้ ทุกรายละเอียดมีความสำคัญ บุคคลที่เปลี่ยนไปใช้ทรัพยากรของคุณจะไม่เห็นองค์ประกอบแต่ละอย่างแยกจากกัน แต่จะมองเห็นภาพทั้งหมดเป็นแพ็คเกจที่ประกอบด้วยรายละเอียดเล็กๆ น้อยๆ อื่นๆ ดังนั้น หากคุณพลาดบางสิ่งบางอย่างในกระบวนการพัฒนาทรัพยากรของคุณ รายละเอียดนี้อาจทำให้ทั้งคอมเพล็กซ์และองค์ประกอบทั้งหมดเสียหายได้ในภายหลัง
เรื่องเล็กๆ น้อยๆ เช่นนี้อาจเป็นได้ เช่น พื้นหลังของปุ่ม ฟอนต์ที่เลือกไม่ถูกต้องขององค์ประกอบเล็กๆ บางรายการ หรือแม้แต่ favicon ดูด้วยตัวคุณเอง - เว็บไซต์ขนาดใหญ่ที่มีชื่อเสียงมีไอคอนส่วนบุคคลที่ระบุในส่วน "บุ๊กมาร์ก" ของเบราว์เซอร์ของผู้ใช้ หากไม่มีสิ่งนี้ ผู้พัฒนาทรัพยากรจะไม่สามารถสร้างองค์ประกอบที่พวกเขาต้องการได้ในตอนแรก
ดังนั้น เมื่อสร้างการออกแบบสำหรับไซต์ของคุณ คุณควรดูแลรายละเอียดเช่น favicon ในบทความนี้ เราจะพูดถึงวิธีจับคู่กับสไตล์ทั่วไปของทรัพยากร รวมถึงขนาดรูปภาพนี้ที่ควรจะมี
ไอคอนเว็บไซต์
ก่อนอื่น มากำหนดว่าองค์ประกอบนี้คืออะไร ตอนนี้ ให้ดูที่ชื่อแท็บเบราว์เซอร์ของคุณ อย่างที่คุณเห็น มีรูปภาพเล็กๆ ทางด้านซ้าย ซึ่งแสดงถึงโลโก้ของทรัพยากรในเวอร์ชันที่ง่ายขึ้น รูปภาพเดียวกันนี้อยู่ใกล้กับชื่อของไซต์ที่แสดงในผลการค้นหา นี่คือสิ่งที่ผู้ใช้จะได้รับคำแนะนำเมื่อเห็นชื่อ
เว็บมาสเตอร์หลายคนเข้าใจว่าจำเป็นต้องใช้ภาพดังกล่าว แต่มีเพียงไม่กี่คนที่รู้ว่า favicon ขนาดใดสำหรับเว็บไซต์จะเหมาะสมที่สุด ดังนั้น ในบทความนี้ เราจะไม่เพียงแต่ให้ข้อมูลเกี่ยวกับวิธีการสร้างไอคอนดังกล่าวและวิธีติดตั้งบนทรัพยากรของคุณ แต่ยังพูดถึงขนาดภาพด้วย
จุดประสงค์ของไอคอน Fav
ดังนั้น รูปภาพบริเวณส่วนหัวของไซต์จึงถูกใช้เพื่อระบุตัวตน นี่คือจุดประสงค์ดั้งเดิม: เพื่อแสดงชื่อไซต์ที่เราเห็น และเพื่อให้โดดเด่นในสายตาของผู้อื่น สิ่งนี้ทำได้ง่ายๆ โดยใช้กราฟิก: เรารับรู้ข้อมูลในรูปภาพได้เร็วและง่ายกว่าในรูปแบบข้อความโดยสัญชาตญาณ Favicons ช่วยให้เราทำอย่างนั้นได้ แต่อย่าลืมว่าขนาดของ favicon นั้นเล็กที่สุดในสายตาของผู้ใช้ นี่ไม่ใช่โลโก้ใน "ส่วนหัว" ของไซต์ ซึ่งอาจมีข้อมูลเพิ่มเติมในรูปแบบของจารึก คำอธิบายบางอย่าง หรือข้อมูลติดต่อ ทุกอย่างที่สามารถแสดงในไอคอนถัดจากชื่อควรพอดีกับขนาดของ favicon ให้มากที่สุด และตามที่ระบุไว้แล้ว เขาก็มีขนาดเล็ก (เพียง 16 x 16 พิกเซลเท่านั้น)
วิธีเลือกfavicon?
แล้วเว็บมาสเตอร์จะออกแบบไอคอนสำหรับไซต์ของเขาได้อย่างไร ควรสังเกตว่าการบีบอัดโลโก้ของเว็บไซต์บ่อยครั้งจะไม่ทำงาน บนตราสัญลักษณ์ที่วางในรูปแบบของโลโก้ของทรัพยากรเฉพาะ องค์ประกอบต่างๆ มักจะมองเห็นได้ ซึ่งจะไม่แสดงอย่างถูกต้องในรูปแบบย่อส่วนเสมอไป เป็นการดีกว่าที่จะละทิ้งกิจการดังกล่าวทันที
แน่นอนว่าขนาดของไอคอน Fav ไม่อนุญาตให้พูดถึงเพียงแค่การใส่คำจารึกที่นั่น ข้อความใด ๆ จะไม่ปรากฏให้เห็นในความละเอียดนี้ เราจำเป็นต้องพัฒนาไอคอนใหม่ที่จะสื่อถึงสไตล์ของเว็บไซต์ เพื่อหาทางแก้ไข กลับมาที่เว็บไซต์ที่ใหญ่ที่สุดกันอีกครั้ง
หลายคนใช้อักษรตัวแรกของชื่อบริการเป็นไอคอน Fav นี่เป็นวิธีเช่น Bing, Yahoo, Yandex, Wikipedia, Google มีแนวทางอื่น - หากคุณมีชื่อไซต์แบบสั้น คุณสามารถกำหนดให้เป็นพื้นหลังของไอคอนได้ เพื่อให้ขนาดของ favicon (เป็นพิกเซลถึงฉันทำซ้ำ 16 x 16 พิกเซล) เพื่อแสดงคำจารึกนี้อย่างถูกต้อง ไม่ควรยาวเกิน 3 ตัวอักษร นี่คือสิ่งที่ ตัวอย่างเช่น บริการ Aol ทำ
จะสร้าง favicon ได้อย่างไร
มีหลายวิธีในการสร้างไอคอนสำหรับชื่อไซต์ แน่นอนว่าวิธีที่ง่ายที่สุดคือการทำงานกับโซลูชันสำเร็จรูปต่างๆ เราสามารถพูดคุยเกี่ยวกับบริการหรือโปรแกรมบางอย่างที่อนุญาตให้คุณสร้างไอคอนจากภาพที่เต็มเปี่ยมด้วยการลดขนาดลง อย่างไรก็ตาม เราขอแนะนำให้คุณพัฒนาโลโก้ดังกล่าวด้วยตัวเอง สิ่งนี้จะให้.ก่อนโอกาสในการเรียนรู้บางสิ่ง และประการที่สองจะมีเครื่องมือเพิ่มเติม สิ่งที่คุณต้องรู้สำหรับสิ่งนี้คือสิ่งที่ต้องวาด และรู้ด้วยว่า favicon ควรมีขนาดเท่าใดในเวอร์ชันสุดท้าย เราจะพูดถึงขนาดไอคอนสำหรับไซต์ในภายหลัง แต่สำหรับตอนนี้ เราจะสังเกตเห็นรายละเอียดปลีกย่อยบางประการของการทำงานกับภาพดังกล่าว โดยเฉพาะอย่างยิ่ง ไม่ควรระบุขนาดของ favicon สำหรับไซต์ รูปแบบของรูปภาพดังกล่าวควรได้รับการชี้แจง ตามที่นักออกแบบที่มีประสบการณ์ทราบ รูปภาพจะต้องบันทึกเป็น-p.webp
คุณสามารถบันทึกรูปภาพได้ เช่น ใช้ Photoshop โดยที่สัญลักษณ์จะถูกวาด
ขนาด Favicon
เอาล่ะ เรามาพูดถึงภาพที่เราเห็นข้างชื่อเว็บไซต์ในผลการค้นหากันว่าจะใหญ่ขนาดไหน ตามค่าเริ่มต้น ขนาดของมันคือ 16 พิกเซลเท่านั้น (ในแต่ละด้าน) อย่างไรก็ตาม หากคุณพยายามแก้ไขภาพนี้ใน Photoshop คุณจะเห็นว่าไม่สะดวกเพียงใด ดังนั้น เราแนะนำให้ทำงานกับภาพขยาย ซึ่งในอนาคตสามารถบีบอัดตามขอบและบันทึกในรูปแบบที่ต้องการได้
หลายแพลตฟอร์ม
อย่างไรก็ตาม เมื่อพูดถึงขนาด favicon ควรอยู่บนไซต์ของคุณ มีอีกสิ่งหนึ่งที่ควรคำนึงถึง ไม่ใช่ทุกแพลตฟอร์มจะแสดงอิมเมจทรัพยากรในลักษณะเดียวกัน ตัวอย่างเช่น อุปกรณ์ที่มีจอภาพ Retina “เห็น” ไอคอน Fav ของคุณที่ขนาด 32 x 32 พิกเซล และใน Safari และบนแพลตฟอร์ม Windows ใหม่ และทั้งหมดไอคอนเหล่านี้มีขนาดถึง 64พิกเซล
ดังนั้น เราขอแนะนำให้คุณบันทึกเวอร์ชันต่างๆ ของไอคอนและจัดเตรียมการเปลี่ยนแปลงโดยขึ้นอยู่กับแพลตฟอร์มของผู้ใช้ในอนาคต อีกจุดที่น่าสนใจ - คุณสามารถลองโหลดไอคอนในรูปแบบที่ใหญ่ที่สุดโดยนับว่ามันจะ "ย่อ" ขึ้นอยู่กับเบราว์เซอร์
บรรณาธิการภายนอก
แน่นอนว่ามันดีถ้าคุณใช้ Photoshop เก่ง และรู้ว่าไอคอน Fav ควรมีขนาดเท่าไร และทำอย่างไรจึงจะบรรลุผลในขณะที่บันทึกภาพของคุณ อย่างไรก็ตาม มีผู้เริ่มต้นจำนวนมากที่ไม่เคยใช้โปรแกรมแก้ไขกราฟิกมาก่อน ดังนั้นพวกเขาจึงไม่สามารถวาดภาพที่ต้องการได้อย่างง่ายดาย เพื่อช่วยผู้ดูแลเว็บดังกล่าว มีบริการต่างๆ ที่ช่วยให้คุณสามารถสร้างไอคอนที่คุณสนใจได้โดยอัตโนมัติ หลายคนฟรีด้วยซ้ำซึ่งไม่ต้องการการลงทุนใด ๆ จากผู้ใช้
บางครั้งคุณจำเป็นต้องลงทะเบียนเพื่อทำงาน แต่อย่างที่คุณเข้าใจ สิ่งนี้ทำเพียงครั้งเดียว เพราะบริษัทต่างๆ จะไม่เปลี่ยน favicon บ่อยนัก ลองดูที่ Google ซึ่งเปลี่ยนโลโก้ทุกวันแต่ไม่แตะไอคอน
จะติดตั้ง favicon ได้อย่างไร
โดยทั่วไป การตั้งค่าเว็บไซต์ของคุณให้แสดงภาพที่คุณต้องการได้อย่างถูกต้องนั้นง่ายมาก เพียงทำตามขั้นตอนง่ายๆ หลายขั้นตอนเพื่อให้เครื่องมือค้นหาและเบราว์เซอร์ทั่วไปสามารถอ่านข้อมูลได้
ในการดำเนินการนี้ รูปภาพที่ได้จะต้องบันทึกด้วยชื่อ favicon.ico และวางไว้ในรูทของทรัพยากรของคุณ เพียงเท่านี้ ภาพของคุณจะเป็นที่รู้จักโดยอัตโนมัติ และหลังจากนั้นไม่นาน ภาพก็จะเชื่อมโยงกับเว็บไซต์ของคุณ
นอกเหนือจากการเชื่อมโยงนี้ คุณสามารถเพิ่มอีกหนึ่งบรรทัดที่จะ "แนะนำ" ว่าไอคอนของคุณอยู่ที่ใด หน้าตาเป็นแบบนี้:
ติดตั้งรหัสในส่วนหัวของเว็บไซต์
สรุป
ดังนั้น หลังจากอ่านบทความของเราแล้ว คุณก็พบว่า favicon ควรมีขนาดเท่าใดสำหรับไซต์และขนาดคืออะไร นอกจากนี้ ฉันคิดว่าคุณเข้าใจดีว่าการค้นหาไอคอนที่เหมาะสมสำหรับทรัพยากรของคุณเป็นสิ่งจำเป็น เพราะมันอยู่ในมือคุณทั้งในแง่ของการเพิ่มการรับรู้และในแง่ของความโดดเด่นเพิ่มเติมในหมู่คู่แข่งของคุณ อย่างน้อยไซต์ที่ใหญ่ที่สุดก็ทำเช่นเดียวกัน ซึ่งสามารถนำมาเป็นตัวอย่างที่สำคัญได้ นอกจากนี้ มันไม่ได้ใช้ความพยายามมากนัก - เมื่อสร้าง favicon เพียงครั้งเดียวและติดตั้งอย่างถูกต้องบนไซต์ของคุณแล้ว คุณก็จะลืมมันไปได้ในอีกไม่กี่เดือนข้างหน้า
ดังนั้น ทดลองทำสิ่งใหม่ๆ ได้ตามสบาย แล้วทุกอย่างจะออกมาดี!
