Favicon คืออะไร – วิธีสร้างแบรนด์สำหรับเว็บไซต์

ข้อผิดพลาดที่ใหญ่ที่สุดที่เว็บไซต์สามารถทำได้คือการไม่มีไอคอน Fav นั้น

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

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

Favicon คืออะไร?

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

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

ประวัติของ Favicons:

Favicons คือไอคอนทางลัดที่ปรากฏใน Internet Explorer 5 ในที่นี้ รวมถึงไอคอน favicon .ico ที่รูทของไซต์จะส่งผลให้รูปภาพสี่เหลี่ยมจัตุรัสขนาด 16 พิกเซลแสดงถัดจาก URL ในแถบที่อยู่เว็บรวมถึงรายการบุ๊กมาร์กที่ไม่มี ต้องการ HTML

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

ไอคอนแอปพลิเคชันและ Favicons ต่างกันอย่างไร

บางคนสับสนระหว่างไอคอน Fav และไอคอนแอปพลิเคชัน แต่มีความแตกต่างอย่างมากระหว่างทั้งสอง!

Favicons ไม่ได้มีวัตถุประสงค์เพื่อสรุปการกระทำใดๆ หรือต่อสู้กับอุปสรรคทางภาษา เป้าหมายของพวกเขาคือการแสดงเว็บไซต์เป็นป้ายบอกทางและปรับปรุงการสร้างแบรนด์บนเบราว์เซอร์ ด้วยเหตุนี้ favicons จึงเป็นโลโก้ของเว็บไซต์เวอร์ชันที่เล็กกว่าเสมอ

ข้อดีคือมันค่อนข้างง่ายที่จะสร้าง favicon

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

ลองตรวจสอบพวกเขาด้านล่าง

Favicon มีความสำคัญอย่างไร?

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

เว็บไซต์ที่ไม่มี favicon ถือว่าไม่เป็นมืออาชีพ และถ้าคุณใช้ favicon เสีย เว็บไซต์ของคุณก็อาจเสียหายได้

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

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

นอกจากนี้ favicon สามารถปรากฏในพื้นหลังประเภทต่างๆ ดังนั้นจึงสามารถแสดงผลบน Mac OS X UI, Windows Aero glass หรือธีมของเบราว์เซอร์อื่นๆ

ขนาดที่ต้องการสำหรับ Favicon คืออะไร?

คุณสามารถสร้าง favicon สำหรับการใช้งานที่แตกต่างกัน ดังนั้น ขนาดที่จะสร้างจะขึ้นอยู่กับฟังก์ชันที่จะให้บริการ

16 พิกเซล:

นี่คือขนาดมาตรฐานสำหรับ favicon และเหมาะสำหรับใช้ในเบราว์เซอร์ทั่วไป favicon ขนาดนี้สามารถแสดงได้อย่างง่ายดายในแท็บ แถบที่อยู่ และมุมมองบุ๊กมาร์ก

24 พิกเซล:

favicons ดังกล่าวเหมาะสำหรับการปักหมุดเว็บไซต์ใน Internet Explorer 9

32 พิกเซล:

Favicon ขนาดนี้เหมาะสำหรับหน้าแท็บใหม่ใน Internet Explorer, แถบด้านข้างของ Safari และปุ่มแถบงานใน Windows 7+

57 พิกเซล:

ขนาดนี้เหมาะสำหรับสร้าง favicons สำหรับหน้าจอหลัก iOS มาตรฐาน iPhone รุ่นแรกถึง 3G และ iPod Touch

72 พิกเซล:

Favicons ขนาดนี้เหมาะสำหรับไอคอนหน้าจอหลักของ iPad

96 พิกเซล:

ขนาด favicon นี้ใช้โดยแพลตฟอร์มของ Google TV

114 พิกเซล:

มีขนาดเป็นสองเท่าสำหรับจอแสดงผลเรตินาและใช้สำหรับหน้าจอหลักของ iPhone 4+

128 พิกเซล:

ใช้สำหรับ Chrome เว็บสโตร์

195 พิกเซล:

ขนาดนี้เหมาะสำหรับ Opera Speed ​​Dial

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

รูปแบบที่ต้องการสำหรับ Favicons คืออะไร

ในครั้งแรก รูปแบบ ICO ของ Windows เป็นไฟล์ประเภทเดียวที่รองรับ และมีเคล็ดลับการประหยัดเวลาเล็กน้อยที่เราสามารถพึ่งพาได้ ก่อนหน้านี้การแฮ็กบันทึก favicon เป็น 16 x 16 GIF และเปลี่ยนชื่อด้วยนามสกุลไฟล์ .ico ที่เคยทำงานได้ดี

แต่ในปัจจุบัน เคล็ดลับนี้ใช้ไม่ได้ผล ดังนั้นวิธีนี้จึงไม่ควรใช้เพื่อสร้างไฟล์ ICO ดังนั้นอีกสองรูปแบบที่รองรับการใช้ favicon มีดังนี้:

• รูปแบบไฟล์ ICO ยังคงได้รับการสนับสนุนอย่างกว้างขวางที่สุด รูปแบบนี้สามารถรวมความละเอียดและความลึกของบิตได้หลายแบบ ทำให้มีประโยชน์อย่างมากใน Windows รูปแบบและขนาดสำหรับ favicon อาจแตกต่างกันไปสำหรับ Internet Explorer รูปแบบ ICO สามารถให้ความสะดวกนี้และเป็นรูปแบบเดียวที่ระบุโดยไม่ต้องใช้องค์ประกอบ
• รูปแบบที่สะดวกอื่น ๆ คือ PNG เป็นเพราะไม่จำเป็นต้องใช้เครื่องมือพิเศษใดๆ ในการสร้างรูปแบบนี้ รองรับความโปร่งใสของอัลฟ่าและให้ขนาดไฟล์ที่เล็กที่สุดแก่เรา ข้อจำกัดของรูปแบบนี้คือไม่สนับสนุน Internet Explorer
• อีกรูปแบบหนึ่งคือ GIF และ GIF แบบเคลื่อนไหว ประโยชน์เพียงอย่างเดียวของรูปแบบนี้คือสนับสนุนเบราว์เซอร์ที่เก่ามาก
• รูปแบบ JPG จะดีที่สุดแม้ว่ารูปภาพจะเป็นรูปถ่ายก็ตาม มันไม่มีความคมชัดอย่างที่เสนอโดยรูปแบบ PNG แต่เข้ากันได้ดีในขนาดที่เล็ก
• รูปแบบ SVG เป็นตัวเลือกที่ยอดเยี่ยมหากคุณต้องการใช้ไอคอน Fav บน Opera
• นอกจากนี้ยังมีรูปแบบ APNG หรือ PNG แบบเคลื่อนไหวซึ่งรองรับโดย Opera และ Firefox แต่ยูทิลิตี้ของมันน่าสงสัย

เคล็ดลับที่ต้องพิจารณาขณะออกแบบ Favicon:

1. ออกแบบ Favicon ตามรูปลักษณ์ของเว็บไซต์ของคุณ:

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

2. ไปหาพื้นหลังโปร่งใส:

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

3. Favicon ของคุณต้องอ่านง่าย:

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

4. ออกแบบโครงสร้างที่สวยงามน่าพอใจ:

โครงสร้าง favicon ของคุณเรียกว่าแบบฟอร์ม Favicon สามารถอยู่ในรูปแบบต่างๆ เช่น สี่เหลี่ยมจัตุรัสหรือวงกลม ตรวจสอบให้แน่ใจว่าการออกแบบไอคอน Fav ของคุณเข้ากันได้ดีกับรูปแบบใดรูปแบบหนึ่งเหล่านี้ นอกจากนี้ จะต้องมีการออกแบบที่สมดุลที่ดึงดูดความสนใจ อ่านง่าย และสวยงาม

5. ใช้สีที่เกี่ยวข้องกับแบรนด์:

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

ขั้นตอนในการสร้าง Favicon:

ขั้นตอนง่ายๆ ในการสร้าง favicon มีดังนี้

1. สร้าง Favicon โดยใช้ซอฟต์แวร์แก้ไขรูปภาพ:

ควรใช้ซอฟต์แวร์แก้ไขภาพ เช่น Illustrator หรือ Adobe Photoshop เพื่อสร้างภาพ favicon ของคุณ การใช้โปรแกรมซอฟต์แวร์ดังกล่าวจะมีตัวเลือกในการปรับขนาดและส่งออกภาพในรูปแบบที่ถูกต้อง

มีซอฟต์แวร์บางตัวที่ให้คุณสร้าง favicon ได้ด้วยมือ คุณยังสามารถตรวจสอบโปรแกรมแก้ไขพิเศษที่สามารถแก้ไขการออกแบบไอคอน Fav ได้ ตรวจสอบให้แน่ใจว่าคุณออกแบบ favicon ของคุณในขนาดที่เบราว์เซอร์ส่วนใหญ่รองรับ

2. ปรับขนาด Favicon ของคุณ:

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

พิจารณาทุกแพลตฟอร์มและเบราว์เซอร์ที่เว็บไซต์ของคุณน่าจะใช้ และสร้าง favicon เพื่อให้ครอบคลุมพื้นฐาน

3. แปลงนามสกุลไฟล์เป็นไฟล์ .ico:

ตอนนี้ใช้ตัวแปลง .ico และเปลี่ยนรูปแบบของไอคอน Fav ของ OWA (Outlook Web App) ในรูปแบบที่ต้องการ เมื่อเปลี่ยนรูปแบบแล้ว ให้บันทึก เพื่อให้แน่ใจว่าไอคอน Fav ของคุณจะแสดงผลได้ดีในแพลตฟอร์มต่างๆ คุณสามารถใช้ตัวแปลงต้นทุนออนไลน์ได้ฟรีเพื่อจุดประสงค์นี้

การใช้งาน / ส่งออก Favicon ของคุณ:

เมื่อคุณสร้าง favicon แล้ว ขั้นตอนสุดท้ายคือการส่งออกไปยังเบราว์เซอร์ที่ต้องการ

1. อัปโหลด Favicon หากคุณใช้ตัวแก้ไขเว็บไซต์:

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

2. อัปโหลดไฟล์ของคุณไปยังไดเรกทอรีรากของเว็บไซต์ของคุณ:

สิ่งนี้มีประโยชน์สำหรับเว็บไซต์ที่รองรับ FTP หรือ File Transfer Protocol สามารถใช้เพื่ออัปโหลดไฟล์ favicon ใหม่ไปยังดัชนีหรือไดเรกทอรีรากของคุณ หากตัวเลือกนี้ไม่พร้อมใช้งาน คุณต้องตรวจสอบการอัปโหลดรูปภาพด้วยตนเองบนหน้าโฮสต์เว็บ

3. เพิ่มไฟล์ในส่วนหัว:

ค้นหาตำแหน่งที่เหมาะสมในการเข้าถึงไฟล์ CSS และ PHP สำหรับเว็บไซต์ของคุณ ไปที่ไฟล์ header.php ของเว็บไซต์ แก้ไขแบบเดียวกัน ในประเภทแท็ก
/favicon.ico/>.

สิ่งนี้จะต้องเชื่อมต่อเว็บไซต์ของคุณกับไอคอน Fav เนื่องจากคุณใช้ PHP แสดงว่าเว็บไซต์ใด ๆ ที่ใช้ไฟล์ส่วนหัวขณะนี้มี favicon ที่คล้ายคลึงกัน

4. รีเฟรชเบราว์เซอร์:

เมื่อคุณอัปโหลด favicon แล้ว ก็ถึงเวลารีเฟรชเบราว์เซอร์เพื่อดูรูปภาพใหม่ข้างแถบที่อยู่ หากต้องการเยี่ยมชมรูปภาพประเภทและ favicon ที่อัปเดต 'http://www.yourdomain.com/favicon.ico' หาก favicon ไม่ปรากฏขึ้น คุณต้องรีเซ็ตแคชของเบราว์เซอร์ ในการล้างแคช ให้ตรวจสอบการตั้งค่าของเบราว์เซอร์ ลบไฟล์อินเทอร์เน็ตชั่วคราว ประวัติ และคุกกี้

บทสรุป:

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

หากคุณต้องการสร้างแบรนด์ส่วนบุคคลอย่างแท้จริง ให้ใช้วิธีสร้างไอคอน Fav อย่างจริงจัง!