favicon คือภาพเล็กๆ ที่ยอดเยี่ยมถัดจากแถบที่อยู่ในเบราว์เซอร์ของคุณ ซึ่งทำให้ไซต์ของคุณแตกต่างในแท็บบุ๊กมาร์ก และสามารถใช้เพื่อเพิ่มการรับรู้ถึงแบรนด์ได้ หากคุณมีไซต์แต่ไม่เคยคิดที่จะสร้าง favicon คุณควรคิดใหม่การตัดสินใจของคุณ นักพัฒนาซอฟต์แวร์กำลังใช้ favicons สำหรับแง่มุมต่างๆ ของแอปพลิเคชันมากขึ้นเรื่อยๆ เช่น ไอคอนหน้าจอหลักบนแท็บเล็ต โชคดีที่การออกแบบ สร้าง และใช้งาน favicon เป็นสิ่งที่เกือบทุกคนสามารถทำได้หากพวกเขาทำตามขั้นตอนที่ถูกต้อง
ขั้นตอน
วิธีที่ 1 จาก 3: การออกแบบ Favicon ของคุณ
ขั้นตอนที่ 1 สร้าง favicon ที่แสดงถึงเว็บไซต์ของคุณ
ประเภทของเว็บไซต์ที่คุณมีควรกำหนดรูปลักษณ์ของไอคอน Fav ของคุณ พยายามออกแบบบางสิ่งที่จะยึดมั่นในภาพลักษณ์ของแบรนด์และเป็นที่จดจำและเป็นที่จดจำของผู้คน ไอคอน Fav ของคุณจะเป็นสิ่งแรกที่ผู้คนเห็นเมื่อพวกเขาดูแท็บในเบราว์เซอร์และจะปรากฏในบุ๊กมาร์กของผู้คนด้วย
- ตัวอย่างเช่น หากคุณมีเว็บไซต์อาหาร การเลือกไอคอน Fav ที่มีผลไม้หรือผักเนื่องจากการออกแบบอาจทำให้น่าจดจำยิ่งขึ้น
- หากเว็บไซต์ของคุณมีไว้สำหรับสำนักงานกฎหมายหรือบริษัทด้านการลงทุน favicon แบบดั้งเดิมและทันสมัยจะดีที่สุด
- หากเว็บไซต์ของคุณมุ่งเป้าไปที่กลุ่มวัยรุ่น ให้ลองสร้างไอคอน Fav ที่สนุกสนานและมีสีสัน
ขั้นตอนที่ 2 ตัดสินใจว่าคุณต้องการพื้นหลังโปร่งใสหรือไม่
หากคุณไม่กำหนดพื้นหลัง พื้นหลังจะเป็นสีขาว ซึ่งอาจไม่ยึดติดกับแบรนด์ของคุณ พื้นหลังโปร่งใสจะใช้สีของเบราว์เซอร์ของบุคคลนั้นและดูคล่องตัวขึ้นในบางกรณี ในกรณีอื่นๆ การมีสีสำหรับพื้นหลังจะทำให้ตัวอักษรพื้นหน้าหรือกราฟิกปรากฏขึ้น ตัดสินใจว่าอะไรจะดีที่สุดสำหรับการออกแบบของคุณและจำไว้เสมอเมื่อคุณสร้างมันขึ้นมา
favicon พื้นฐานที่สุดคือสี่เหลี่ยมจัตุรัสขนาด 16x16 และมีสีพื้นหลัง
ขั้นตอนที่ 3 สร้าง favicon ที่อ่านง่าย
เนื่องจากรูปภาพ favicon ที่คุณจะใช้มีขนาดเล็ก คุณจึงควรแสดงแบรนด์ของคุณโดยไม่ทำให้ผู้เข้าชมสับสน ไอคอน Fav ที่อ่านยากจะทิ้งความรู้สึกแย่ๆ และสามารถสร้างคำถามในใจของผู้เข้าชมเกี่ยวกับคุณภาพของงานที่คุณสามารถให้ได้ รูปภาพและโลโก้ที่ซับซ้อนเกินไปจะดูไม่ดีเมื่อย่อขนาดลงเหลือ 16x16 หรือ 32x32 พิกเซล
- หากโลโก้ที่มีอยู่ของคุณซับซ้อนเกินไป คุณสามารถใช้กลยุทธ์เพื่อทำให้โลโก้นั้นง่ายขึ้น เพื่อให้สามารถจดจำโลโก้ได้ในขนาด favicon ใช้ชื่อย่อแทนการแสดงชื่อบริษัททั้งหมด หรือออกแบบไอคอนง่ายๆ แทนการใช้รูปภาพ
- หากคุณมีโลโก้ธรรมดาอยู่แล้ว คุณสามารถย่อขนาดรูปภาพและตั้งเป็นไอคอน Fav ของคุณได้ คุณอาจต้องแก้ไขก่อนที่จะแปลงเป็นไฟล์ไอคอน
- คุณยังสามารถใช้รูปภาพของวัตถุที่อธิบายธีมโดยรวมของไซต์ของคุณได้
ขั้นตอนที่ 4 สร้าง favicon ที่สวยงาม
โครงสร้าง favicon ของคุณเรียกว่ารูปแบบ โดยทั่วไปแล้ว Favicons จะมีรูปร่าง เช่น วงกลมหรือสี่เหลี่ยมจัตุรัส เมื่อคุณออกแบบไอคอน Fav โดยทั่วไปจะดีกว่าหากสามารถใส่ลงในแบบฟอร์มพื้นฐานเหล่านี้ได้ เนื่องจากรูปร่างรูปแบบอิสระมักจะสับสนหรือสับสนที่ขนาด 16x16 พิกเซล สิ่งสำคัญอีกประการหนึ่งของการออกแบบของคุณเรียกว่าความสามัคคีด้านสุนทรียศาสตร์ ความสามัคคีด้านสุนทรียศาสตร์ประกอบด้วยรายละเอียดและขนาดของส่วนประกอบต่างๆ ในไอคอน Fav และความสมดุลของไอคอน Fav ยิ่งรายละเอียดมีความสม่ำเสมอมากเท่าไร favicon ของคุณก็จะยิ่งดูเหนียวแน่นมากขึ้นเท่านั้น ตัวอย่างเช่น การใช้แบบอักษรประเภทต่างๆ หรือขนาดต่างๆ ภายในไอคอน Fav ของคุณจะไม่น่าดูและอาจทำให้ไอคอน Fav ของคุณดูสับสนหรือเลอะเทอะได้
- อีกตัวอย่างหนึ่งของความสามัคคีด้านสุนทรียศาสตร์คือการรักษามุมโค้งมนตลอดรูปร่างในไอคอน Fav ของคุณ
- ตัวอย่างที่ดีของไอคอนที่เปลี่ยนรูปแบบคือไอคอน Fav ของ Google เปลี่ยนจากสี่เหลี่ยมเป็นวงกลม
ขั้นตอนที่ 5. ใช้สีที่เข้ากับแบรนด์ของคุณ
เมื่อคุณสร้าง favicon คุณควรสร้างด้วยความลึกของสี 8 บิต (256 สี) หรือ 24 บิต (16.7 ล้านสี) เนื่องจากวิธีนี้ใช้ได้กับเบราว์เซอร์รุ่นใหม่ ตรวจสอบให้แน่ใจว่าสีที่คุณเลือกสามารถพบได้ที่อื่นบนเว็บไซต์ของคุณหรือมีความเกี่ยวข้องกับแบรนด์ของคุณในทางใดทางหนึ่ง ไอคอน favicon ที่มีสีที่ไม่อยู่ในเว็บไซต์ โลโก้ หรือแอปพลิเคชันของคุณจะไม่เป็นที่จดจำ และผู้คนจะไม่สามารถเชื่อมโยงไอคอนกับแบรนด์ของคุณได้
- การใช้สี favicon อย่างสร้างสรรค์ ได้แก่ GitHub ซึ่งจะเปลี่ยนสีตามสถานะระบบของคุณและ Trello ซึ่งจะเปลี่ยนไปตามสีพื้นหลังของคุณ
- สีที่ใช้บ่อยที่สุดในไอคอน Fav คือสีแดงและสีน้ำเงิน
ขั้นตอนที่ 6 พิจารณาผู้ชมของคุณเมื่อออกแบบไอคอน Fav
นอกเหนือจากการระบุแบรนด์ของคุณ favicon ของคุณต้องดูน่าสนใจสำหรับผู้เยี่ยมชมของคุณ ผู้ที่มีรสนิยม ความสนใจ และบรรทัดฐานทางสังคมต่างกันจะมองดูเทวรูปที่ต่างกันจากมุมมองที่ต่างกัน ความแตกต่างทางวัฒนธรรมมีอยู่ในสังคมของเรา และอาจทำให้สับสนหรือขับไล่ผู้ฟังที่คุณพยายามจะดึงดูด
ตัวอย่างเช่น Mac Os X ใช้ตราประทับซึ่งเป็นสัญลักษณ์สากลสำหรับจดหมาย การใช้กล่องจดหมายจะไม่ได้ผลเท่าที่ควร เนื่องจากกล่องจดหมายแตกต่างกันไปตามส่วนต่างๆ ของโลก
ขั้นตอนที่ 7 รับความคิดเห็นจากเพื่อนและเพื่อนร่วมงาน
แม้ว่าจะไม่เน้นกราฟิกอย่างเหลือเชื่อ แต่ favicon ก็เป็นส่วนสำคัญของแบรนด์ของคุณ ตัวอย่างเช่น ลองนึกถึงเว็บไซต์โปรดของคุณ เช่น Twitter, Gmail, Facebook หรือ wikiHow และคุณเชื่อมโยง favicon กับแบรนด์มากน้อยเพียงใด หากคุณไม่มีสายตาที่ดีในการออกแบบ หรือคุณรู้สึกสับสนกับการออกแบบที่คุณควรมีสำหรับไซต์ของคุณ ปรึกษาเพื่อนที่มีความสนใจในการออกแบบหรือผู้ที่ทำงานด้านการออกแบบกราฟิก
- ถามในเครือข่ายเพื่อนของคุณเพื่อดูว่ามีใครสามารถให้คำแนะนำด้านการออกแบบได้ฟรีหรือไม่
- บริษัทขนาดใหญ่มีนักออกแบบกราฟิกภายในองค์กรที่สามารถสร้างภาพไอคอน Fav ได้
วิธีที่ 2 จาก 3: การสร้าง Favicon ของคุณ
ขั้นตอนที่ 1. ใช้ซอฟต์แวร์แก้ไขรูปภาพเพื่อสร้างไอคอน Fav ของคุณ
คุณสามารถใช้ซอฟต์แวร์แก้ไขรูปภาพ เช่น Adobe Photoshop หรือ Illustrator เพื่อสร้างภาพสำหรับ favicon ของคุณ แอปพลิเคชั่นซอฟต์แวร์เหล่านี้ยังช่วยให้คุณปรับขนาดและส่งออกรูปภาพในรูปแบบที่ถูกต้อง ซอฟต์แวร์บางตัวช่วยให้คุณสร้าง favicon ได้ด้วยมือ
- นอกจากนี้ยังมีโปรแกรมแก้ไขเฉพาะของ favicon ที่คุณสามารถหาได้ทางออนไลน์
- ใช้เครื่องมือค้นหาและพิมพ์ "ตัวแก้ไข favicon"
- ทำให้ขนาดแคนวาสของคุณเป็น 512x512 พิกเซล เนื่องจากตัวเลขนี้แบ่งออกเป็นขนาด favicon ที่เกี่ยวข้องมากที่สุด และยังใหญ่พอให้คุณแก้ไขได้อย่างมีประสิทธิภาพ
- ซอฟต์แวร์แก้ไขรูปภาพยอดนิยมอื่น ๆ ได้แก่ GIMP, PhotoScape และ Paint. NET
- เมื่อใช้ซอฟต์แวร์นี้ คุณจะไม่สามารถแก้ไขไฟล์.ico ได้โดยตรง แต่คุณสามารถใช้ไฟล์.png,-j.webp" />
ขั้นตอนที่ 2 ปรับขนาดและบันทึกไอคอน Fav ของคุณ
32x32 px คือขนาดของรายการเดสก์ท็อป Windows ในขณะที่ 16x16 px คือขนาดของ favicons ในแท็บของเบราว์เซอร์ของคุณ หลังจากที่คุณสร้างไอคอน Fav ในรูปแบบที่ใหญ่ขึ้น สิ่งสำคัญคือต้องลดขนาดลง เพื่อให้คุณเห็นว่าหน้าตาเป็นอย่างไรในเบราว์เซอร์ของผู้คน หากไม่สามารถอ่านได้หรือดูไม่สวยงาม ให้เริ่มต้นใหม่กับการออกแบบดั้งเดิมของคุณ ลองนึกถึงแพลตฟอร์มที่เว็บไซต์หรือแอปพลิเคชันของคุณน่าจะใช้งานมากที่สุด แล้วสร้างไอคอน Fav เพื่อให้ครอบคลุมฐานทั้งหมดของคุณ
- สิ่งสำคัญคือต้องสังเกตว่าฮาร์ดแวร์และซอฟต์แวร์ต่างกันใช้ขนาด favicon ที่แตกต่างกัน
- ขนาด favicon อื่นๆ ได้แก่ 57x57px สำหรับหน้าจอหลักของ iOS มาตรฐาน, 72x72px สำหรับ iPad, 96x96px สำหรับ Google TV, 128x128px สำหรับ Chrome Web Store และ 195x195px สำหรับ Opera Speed Dial
- หากคุณต้องการครอบคลุมฐานทั้งหมดของคุณ คุณสามารถสร้างเวอร์ชันของ favicon ของคุณในแต่ละขนาดเหล่านี้
- บันทึก favicon เวอร์ชันแยกต่างหาก เพื่อไม่ให้งานที่คุณทำหายไป
ขั้นตอนที่ 3 รวมไฟล์ของคุณโดยใช้ตัวแปลง
สิ่งที่ยอดเยี่ยมเกี่ยวกับไฟล์.ico คือคุณสามารถรวมไฟล์ได้มากกว่าหนึ่งไฟล์เพื่อสร้างมันขึ้นมา สิ่งนี้มีประโยชน์เนื่องจากเบราว์เซอร์และซอฟต์แวร์ต่างกันต้องการ favicon ขนาดต่างกัน เพื่อให้แน่ใจว่าไอคอน Fav ของคุณจะดูดีในทุกแพลตฟอร์ม ให้แปลงไฟล์ของคุณโดยใช้ตัวแปลงออนไลน์ พิมพ์ "icon converter" ลงในเสิร์ชเอ็นจิ้นที่คุณชื่นชอบเพื่อค้นหาแอปพลิเคชันออนไลน์ฟรีเพื่อทำสิ่งนี้ บันทึกไฟล์ที่ผสานเป็น "favicon.ico"
- คุณยังสามารถใช้โปรแกรมอย่าง GIMP ที่มีฟีเจอร์ในตัว หรือดาวน์โหลดปลั๊กอินที่เรียกว่า ICO FORMAT ไปยัง Adobe Photoshop
- สร้างโฟลเดอร์ใหม่เพื่อให้คุณสามารถเก็บ favicons ใหม่หรืองานที่กำลังดำเนินการอยู่
- พิมพ์ ".ico converter" หรือ "favicon generator" ในเครื่องมือค้นหาเพื่อค้นหาเครื่องมือต่างๆ ที่คุณสามารถใช้ได้
วิธีที่ 3 จาก 3: การใช้ Favicon ของคุณ
ขั้นตอนที่ 1 อัปโหลด favicon หากคุณใช้เครื่องมือแก้ไขเว็บไซต์
เครื่องมือแก้ไขเว็บไซต์จำนวนมากมาพร้อมกับแบบฟอร์มในตัวที่ให้คุณอัปโหลด favicon ไปยังเว็บไซต์ของคุณได้โดยอัตโนมัติ หากคุณกำลังใช้เครื่องมือแก้ไขเว็บไซต์ที่มีสิ่งนี้ ให้มองหาตัวเลือกที่ระบุว่า "อัปโหลด Favicon" หรือ "เพิ่ม Favicon" ในเมนูการตั้งค่าของเว็บไซต์ของคุณ เลือกไฟล์ favicon.ico ของคุณและอัปโหลดไปยังเว็บไซต์ของคุณ
หากคุณไม่พบที่สำหรับอัปโหลด favicon บนเครื่องมือแก้ไขเว็บไซต์ของคุณ คุณจะต้องดำเนินการด้วยตนเอง
ขั้นตอนที่ 2 อัปโหลดไฟล์ไปยังไดเร็กทอรีรากของไซต์ของคุณ
หากเว็บไซต์ของคุณรองรับ File Transfer Protocol หรือ FTP คุณสามารถใช้ไคลเอ็นต์ FTP เพื่ออัปโหลดไฟล์ favicon.icon ใหม่ไปยังไดเรกทอรี root (ดัชนี) ได้ ถ้าไม่เช่นนั้น คุณจะต้องไปที่หน้าโฮสต์เว็บของคุณและอัปโหลดภาพด้วยตนเอง อย่าลืมแทนที่ไฟล์ favicon.ico ที่มีอยู่ด้วยไฟล์ใหม่ของคุณ
ขั้นตอนที่ 3 เพิ่มไฟล์ในส่วนหัวของคุณ
ค้นหาตำแหน่งที่คุณสามารถเข้าถึงไฟล์ PHP และ CSS สำหรับเว็บไซต์ของคุณ ไปที่ไฟล์ header.php ของเว็บไซต์ของคุณแล้วแก้ไข ภายใต้ประเภทแท็ก"
-
สิ่งนี้ควรเชื่อมต่อไซต์ของคุณกับ favicon ของคุณ
เนื่องจากคุณใช้ PHP หมายความว่าไซต์ใดๆ ที่ใช้ไฟล์ส่วนหัวของคุณจะมี favicon เดียวกัน
สร้างไอคอน Favicon ของคุณเอง ขั้นตอนที่ 14 ขั้นตอนที่ 4 รีเฟรชเบราว์เซอร์ของคุณ
เมื่อคุณอัปโหลด favicon เสร็จแล้ว คุณสามารถรีเฟรชเบราว์เซอร์ของคุณเพื่อดูรูปภาพใหม่ของคุณถัดจากแถบที่อยู่ หากต้องการไปที่รูปภาพของ favicon ที่อัปเดตโดยตรง ให้พิมพ์ "https://www.yourdomain.com/favicon.ico"
- หาก favicon ของคุณไม่ปรากฏขึ้นในตอนแรก คุณอาจต้องรีเซ็ตแคชของเบราว์เซอร์
- หากต้องการล้างแคช ให้ไปที่การตั้งค่าเบราว์เซอร์และลบไฟล์อินเทอร์เน็ตชั่วคราว คุกกี้ และประวัติ
