Favicons แทนที่ไอคอนลูกโลกในแถบที่อยู่
เครดิตรูปภาพ: r0mu / iStock / Getty Images
favicon เป็นวิธีที่สร้างสรรค์และใช้งานได้จริงในการเพิ่มความมีไหวพริบทางภาพที่ละเอียดอ่อนให้กับเว็บไซต์ของคุณ Favicons คือรูปภาพขนาดเล็กที่เว็บเบราว์เซอร์ใช้ในแท็บเพจและแถบที่อยู่ พวกเขาแสดงโลโก้หรือภาพที่เชื่อมโยงกับเว็บไซต์ซึ่งทำหน้าที่เป็นตัวระบุตราสินค้าที่มองเห็นได้ถัดจากชื่อหรือ URL Favicons เป็นตัวระบุไซต์ที่มีประโยชน์อย่างยิ่งในการเรียกดูแบบแท็บ เนื่องจากพื้นที่ข้อความที่ใช้ได้สำหรับชื่อหน้าจะลดลงจนแทบไม่เหลือเลยเมื่อผู้ใช้เปิดแท็บเพิ่มเติม
ขั้นตอนที่ 1
ออกแบบไอคอนที่คุณต้องการใช้ในโปรแกรมแก้ไขรูปภาพหรือกราฟิก คุณสามารถใช้โลโก้หรือรูปภาพที่มีอยู่ซึ่งเชื่อมโยงกับไซต์หรือแบรนด์ของคุณ และปรับให้เป็นไปตามมาตรฐาน favicon Favicons ใช้ขนาดสี่เหลี่ยมจัตุรัสเสมอและมีขนาดที่รองรับสูงสุด 256 x 256 พิกเซล ครอบตัดและปรับขนาดรูปภาพให้พอดีกับสี่เหลี่ยมจัตุรัสขนาด 256 x 256 พิกเซล หากคุณจะใช้ไอคอนแพ็คเกอร์เพื่อรองรับหลายขนาด หากคุณกำลังจะทำเวอร์ชันเดียว ให้เลือกขนาด 16 x 16 พิกเซล
วีดีโอประจำวันนี้
ขั้นตอนที่ 2
ส่งออกไอคอนกราฟิกเป็นไฟล์ภาพ PNG จากโปรแกรมออกแบบกราฟิก PNG เป็นรูปแบบภาพมาตรฐาน W3C สำหรับไอคอน Fav เบราว์เซอร์บางตัวอาจแสดงไฟล์ JPG เป็น favicons แต่มาตรฐานไม่ได้รับการสนับสนุนอย่างเป็นทางการ นอกจากนี้ โปรแกรม icon packer อาจไม่ทำงานกับรูปภาพในรูปแบบอื่น Favicons ยังรองรับไฟล์ GIF และ ICO
ขั้นตอนที่ 3
แพ็คไฟล์ PNG ที่ส่งออกของคุณลงในไฟล์ ICO ด้วยโปรแกรมแปลง ICO โปรแกรมแปลงไอคอนจะประมวลผล PNG favicon จัดรูปแบบสำหรับขนาด favicon ที่รองรับอย่างกว้างขวางหลายขนาด และฝังลงในไฟล์เดียว ไฟล์ ICO ให้ favicons ที่มีความละเอียดสูงกว่า 16 x 16 พิกเซลสำหรับอุปกรณ์ที่รองรับ
ขั้นตอนที่ 4
เข้าสู่ระบบบริการโฮสต์เว็บไซต์ของคุณและอัปโหลดไฟล์ PNG หรือ ICO ไปยังเซิร์ฟเวอร์สื่อของเว็บไซต์ของคุณ คัดลอก URL ของไฟล์ที่อัปโหลด คุณจะต้องใช้มันเพื่อแนบ favicon กับไซต์
ขั้นตอนที่ 5
เปิดโปรแกรมแก้ไขไซต์ของคุณและเพิ่มโค้ดต่อไปนี้ ซึ่งแก้ไขด้วย URL ของไฟล์ favicon ตามที่ระบุ ลงในส่วนเว็บไซต์ของคุณ
สำหรับไฟล์ PNG:
สำหรับไฟล์ ICO:
เว้นแต่ว่าคุณกำลังใช้ไซต์ที่ควบคุมด้วย CMS หรือรวมส่วนตามไฟล์ คุณจะต้องเพิ่มโค้ดลงในแต่ละหน้าที่คุณต้องการแสดงไอคอน ไอคอน Fav จะปรากฏขึ้นหลังจากที่คุณบันทึกและอัปเดตหน้าเว็บไซต์
เคล็ดลับ
โปรแกรมแก้ไขรูปภาพ เช่น Photoshop และ Corel Draw ทำงานได้ดีสำหรับการออกแบบและจัดรูปแบบไอคอน หรือคุณสามารถใช้โปรแกรมฟรี เช่น Paint.net และ Pixlr
คำเตือน
เบราว์เซอร์บางตัวเชื่อมโยงไฟล์รูปภาพที่อยู่ในไดเร็กทอรี /favicon เป็น favicon โดยอัตโนมัติ อย่างไรก็ตาม องค์กร W3C ไม่สนับสนุนแนวทางปฏิบัตินี้ เนื่องจากไม่ใช่มาตรฐานที่ได้รับการสนับสนุนในระดับสากลและขัดต่อหลักการสถาปัตยกรรมเว็บ นอกจากนี้ บริการเว็บโฮสติ้งและระบบ CMS จำนวนมากไม่อนุญาตให้ผู้ใช้วางเนื้อหาสื่อนอกไดเรกทอรีไฟล์สื่อ ทำให้การปฏิบัตินี้เป็นไปไม่ได้
