วิธีเปลี่ยนไอคอนเว็บ (Favicon) ใน Blogger
Favicon คือรูปเล็กๆ ที่โผล่บนแท็บเบราว์เซอร์ ในรายการบุ๊กมาร์ก และข้างผลค้นหาบนมือถือ บล็อกที่ยังไม่ตั้งค่าจะติดรูปตัว B สีส้มของ Blogger ซึ่งทำให้ดูเหมือนเว็บที่ยังทำไม่เสร็จ บทความนี้พาทำตั้งแต่เตรียมไฟล์จนถึงแก้ปัญหาเปลี่ยนแล้วไม่ขึ้น
สรุปสั้น: เตรียมรูป สี่เหลี่ยมจัตุรัส ด้านละ 96 หรือ 144 พิกเซล ไฟล์เล็กกว่า 100KB แล้วอัปโหลดที่ blogger.com → รูปแบบ → กล่อง Favicon จากนั้น URL ของไอคอนจะอยู่ที่ ชื่อบล็อกของคุณ/favicon.ico นำ URL นี้ไปวางในช่อง Favicon ของ BlogKub ได้เลย ถ้าเปลี่ยนแล้วยังเห็นรูปเดิม เกือบทุกครั้งคือแคชเบราว์เซอร์ ไม่ใช่ตั้งค่าผิด
Favicon คืออะไร และทำไมบล็อกถึงควรมี
Favicon คือไอคอนประจำเว็บที่เบราว์เซอร์นำไปแสดงในที่ต่างๆ แทนตัวเว็บ จุดที่เห็นบ่อยที่สุดคือบนแท็บ ถัดมาคือรายการบุ๊กมาร์ก ประวัติการเข้าชม และไอคอนที่ปรากฏเมื่อผู้ใช้บันทึกเว็บไว้บนหน้าจอโฮมของมือถือ
จุดที่คนมักมองข้ามคือ ผลการค้นหาบนมือถือ Google แสดงไอคอนของเว็บไว้ข้างชื่อเรื่องในผลค้นหา เมื่อผู้ใช้เลื่อนดูผลลัพธ์สิบกว่ารายการ เว็บที่มีไอคอนชัดเจนจะสะดุดตากว่าเว็บที่ยังใช้ไอคอนเริ่มต้น ตรงนี้ไม่ใช่ปัจจัยจัดอันดับ แต่มีผลกับการที่คนจะกดเข้าหรือไม่
อีกเหตุผลที่สำคัญไม่แพ้กันคือความน่าเชื่อถือ ผู้อ่านที่เปิดหลายแท็บพร้อมกันจะจำเว็บของคุณจากไอคอน ถ้าไอคอนยังเป็นค่าเริ่มต้นของ Blogger เว็บของคุณจะดูเหมือนบล็อกที่เพิ่งสร้างและยังไม่ได้ดูแล ทั้งที่เนื้อหาข้างในอาจดีมาก
เตรียมไฟล์ให้ถูกก่อน จะได้ไม่ต้องอัปโหลดซ้ำ
Blogger และ Google มีเงื่อนไขที่ต่างกันเล็กน้อย ถ้าทำให้ผ่านทั้งสองฝั่งตั้งแต่แรกจะไม่ต้องกลับมาแก้
- ต้องเป็นสี่เหลี่ยมจัตุรัส ความกว้างเท่ากับความสูง ถ้าใช้รูปผอมหรือแบนมันจะถูกบีบจนเพี้ยน และ Google อาจไม่นำไปแสดงในผลค้นหาเลย
- ไฟล์ต้องเล็กกว่า 100KB เป็นข้อจำกัดของ Blogger เอง ถ้าไฟล์ใหญ่กว่านี้จะอัปโหลดไม่ผ่าน
- ขนาดที่แนะนำคือด้านละ 96 หรือ 144 พิกเซล Google ระบุว่าไอคอนที่ใช้แสดงในผลค้นหาควรมีขนาดเป็นจำนวนเท่าของ 48 พิกเซล ทำใหญ่ไว้ดีกว่าเล็ก เพราะย่อลงได้แต่ขยายขึ้นแล้วจะแตก
- ใช้ PNG ได้ ไม่ต้องเป็น .ico Google รองรับทั้ง ICO, PNG, SVG, GIF และ JPEG แนะนำ PNG เพราะทำง่ายและรองรับพื้นหลังโปร่งใส
เรื่องการออกแบบมีข้อเดียวที่สำคัญที่สุด คือ ไอคอนจะถูกย่อลงเหลือประมาณ 16 พิกเซลบนแท็บ ตัวหนังสือเล็กๆ จะกลายเป็นรอยเปื้อนทันที ให้ใช้สัญลักษณ์เดียว ตัวอักษรตัวเดียว หรือรูปทรงเรียบง่ายที่มีสีตัดกับพื้นหลังชัดเจน อย่าเอาโลโก้เต็มที่มีชื่อเว็บมาย่อ
อัปโหลด Favicon ใน Blogger ทีละขั้น
- เตรียมไฟล์ ทำรูปสี่เหลี่ยมจัตุรัสตามข้อกำหนดข้างบน บันทึกเป็น PNG ให้ไฟล์เล็กกว่า 100KB
- เข้าหน้าตั้งค่า เปิด blogger.com เลือกบล็อกที่ต้องการ แล้วกดเมนู รูปแบบ ทางซ้าย
- แก้ไขกล่อง Favicon กล่องนี้อยู่บนสุดซ้ายของผัง กดไอคอนดินสอเพื่อแก้ไข แล้วเลือกไฟล์ที่เตรียมไว้ จากนั้นกดบันทึก
- ยืนยันว่าอัปโหลดสำเร็จ เปิดแท็บใหม่แล้วพิมพ์ URL ของบล็อกตามด้วย
/favicon.icoถ้าเห็นรูปที่เพิ่งอัปโหลดแสดงว่าเรียบร้อย
ถ้ากดบันทึกแล้วขึ้นข้อความแจ้งเตือน ให้ตรวจสองอย่างก่อนเสมอ คือขนาดไฟล์เกิน 100KB หรือรูปไม่ได้เป็นสี่เหลี่ยมจัตุรัส สองข้อนี้คือสาเหตุเกือบทั้งหมดของการอัปโหลดไม่ผ่าน
นำ URL มาใส่ในธีมที่สร้างด้วย BlogKub
ในตัวสร้างธีมของ BlogKub มีช่องให้กรอก URL ของ Favicon เพื่อให้ธีมประกาศไอคอนไว้ในหน้าเว็บโดยตรง วิธีหา URL มาใส่คือ
- บล็อกที่ใช้โดเมน blogspot: URL คือ
https://ชื่อบล็อกของคุณ.blogspot.com/favicon.ico - บล็อกที่ใช้โดเมนของตัวเอง: เปลี่ยนเป็นโดเมนนั้น เช่น
https://yourdomain.com/favicon.ico
วาง URL ลงในช่อง Favicon แล้วกด Export XML นำไฟล์ไปอัปโหลดเข้า Blogger ที่ ธีม → เมนูสามจุด → กู้คืน เท่านี้ธีมก็จะประกาศไอคอนให้เบราว์เซอร์รู้จักตั้งแต่โหลดหน้าแรก
ข้อควรระวังคือ อย่าใช้ URL รูปจากที่อื่นที่คุณควบคุมไม่ได้ เช่นลิงก์รูปจากเว็บฝากรูปฟรีหรือรูปในแชท เพราะถ้าวันหนึ่งลิงก์นั้นตาย ไอคอนของคุณจะหายไปทั้งเว็บ ให้ใช้ URL ที่อยู่บนโดเมนของคุณเองเสมอ
เงื่อนไขของ Google สำหรับไอคอนในผลค้นหา
การที่ Google จะนำไอคอนของคุณไปแสดงข้างผลค้นหาไม่ได้เกิดขึ้นอัตโนมัติทุกเว็บ มีเงื่อนไขที่ควรรู้
- ไฟล์ต้องเข้าถึงได้ ถ้าไฟล์ไอคอนถูกบล็อกใน robots.txt Google จะเก็บข้อมูลไม่ได้และไม่แสดงให้
- URL ควรอยู่คงที่ อย่าเปลี่ยน URL ของไอคอนบ่อยๆ เพราะ Google ต้องเก็บข้อมูลใหม่ทุกครั้ง
- ไอคอนควรสื่อถึงแบรนด์ Google ระบุว่าไอคอนควรเป็นตัวแทนของเว็บ ไม่ควรเป็นรูปที่ไม่เกี่ยวข้องหรือชวนเข้าใจผิด
- ต้องรอ ไอคอนจะปรากฏในผลค้นหาหลัง Googlebot กลับมาเก็บข้อมูลหน้าแรกของเว็บอีกครั้ง ซึ่งอาจใช้เวลาหลายวันถึงหลายสัปดาห์ และไม่มีวิธีเร่ง
เปลี่ยนแล้วยังเห็นรูปเดิม แก้ยังไง
นี่คือปัญหาที่คนถามมากที่สุด และเกือบทุกครั้ง ไม่ใช่ความผิดของการตั้งค่า แต่เป็นเรื่องแคช เบราว์เซอร์เก็บ favicon ไว้นานกว่าไฟล์ประเภทอื่นมาก เพราะถือว่าเป็นไฟล์ที่แทบไม่เปลี่ยน
ให้ไล่ตรวจตามลำดับนี้
- ตรวจที่ต้นทางก่อน เปิด
ชื่อบล็อกของคุณ/favicon.icoตรงๆ ถ้าตรงนี้เป็นรูปใหม่แล้ว แปลว่าอัปโหลดสำเร็จ ปัญหาอยู่ที่ฝั่งการแสดงผลเท่านั้น - เปิดในหน้าต่างไม่ระบุตัวตน ถ้าเห็นรูปใหม่ที่นี่ ยืนยันได้ว่าเป็นแคชของเบราว์เซอร์ปกติ
- ล้างแคชเบราว์เซอร์ หรือรอสักวันสองวันแล้วกลับมาดูใหม่ ไอคอนจะอัปเดตเอง
- ตรวจในมือถือแยกต่างหาก แคชของมือถือเป็นคนละชุดกับเดสก์ท็อป อาจอัปเดตไม่พร้อมกัน
ถ้าเปิด /favicon.ico แล้วยังเป็นรูปเดิมจริงๆ ค่อยกลับไปตรวจว่ากดบันทึกในหน้ารูปแบบเรียบร้อยหรือยัง และไฟล์ที่เลือกผ่านเงื่อนไข 100KB กับสี่เหลี่ยมจัตุรัสหรือเปล่า
ปัญหาอื่นที่พบบ่อย
ไอคอนขึ้นบนแท็บแล้ว แต่ในผลค้นหา Google ยังเป็นรูปเดิม
เป็นเรื่องปกติและต้องรอ Google เก็บข้อมูลไอคอนแยกจากเนื้อหาหน้าเว็บ และอัปเดตตามรอบของตัวเอง ไม่มีเครื่องมือสั่งให้รีเฟรชเฉพาะไอคอนได้ ที่ทำได้คือทำให้ไฟล์เข้าถึงง่ายและอย่าเปลี่ยน URL ไปมา
ไอคอนดูเบลอหรือแตก
มักเกิดจากใช้รูปต้นฉบับที่เล็กเกินไปแล้วถูกขยาย ให้ทำใหม่จากไฟล์ที่ใหญ่กว่า เช่นด้านละ 144 พิกเซล แล้วค่อยให้ระบบย่อลงเอง
พื้นหลังโปร่งใสกลายเป็นสีขาวหรือดำ
บางที่ที่นำไอคอนไปแสดงจะเติมพื้นหลังให้เอง ถ้าอยากให้ควบคุมได้แน่นอน ให้ใส่พื้นหลังทึบเป็นสีของแบรนด์ไปเลยแทนการใช้พื้นโปร่งใส
เปลี่ยนโดเมนแล้วไอคอนหาย
ถ้าย้ายจาก blogspot ไปโดเมนของตัวเอง อย่าลืมกลับมาแก้ URL ในช่อง Favicon ของ BlogKub ให้ชี้ไปโดเมนใหม่ แล้ว Export ธีมใหม่อีกครั้ง
แนวทางปฏิบัติที่ดี
- ใช้สัญลักษณ์เดียวหรือตัวอักษรตัวเดียว อย่าย่อโลโก้เต็มที่มีชื่อเว็บลงมา
- เลือกสีที่ตัดกับทั้งพื้นขาวและพื้นดำ เพราะแท็บของเบราว์เซอร์มีทั้งโหมดสว่างและโหมดมืด
- ทำไฟล์ต้นฉบับเก็บไว้ที่ขนาดใหญ่ เผื่อวันหลังต้องทำไอคอนขนาดอื่น
- ตั้งค่าให้เสร็จตั้งแต่ตอนเปิดบล็อกใหม่ๆ จะได้ไม่ต้องรอ Google เก็บข้อมูลใหม่ตอนที่เว็บโตแล้ว
- ตรวจผลทั้งบนเดสก์ท็อปและมือถือ เพราะแคชคนละชุดกัน
สรุป
Favicon เป็นงานสิบนาทีที่ทำครั้งเดียวจบ แต่ส่งผลกับภาพลักษณ์ของบล็อกทุกครั้งที่มีคนเปิดแท็บหรือเห็นเว็บของคุณในผลค้นหา สิ่งที่ต้องจำมีแค่สามข้อ คือ รูปต้องเป็นสี่เหลี่ยมจัตุรัส ไฟล์ต้องเล็กกว่า 100KB และ URL อยู่ที่ /favicon.ico เสมอ ส่วนอาการเปลี่ยนแล้วไม่ขึ้นนั้นเกือบทั้งหมดคือแคช ไม่ใช่การตั้งค่าผิด ให้ตรวจที่ต้นทางก่อนแล้วค่อยสรุป
เมื่อตั้งค่าไอคอนเรียบร้อยแล้ว ขั้นต่อไปที่ควรทำคือสร้างหน้าเพจพื้นฐานอย่างหน้าเกี่ยวกับเราและหน้าติดต่อ ซึ่งเป็นสิ่งที่ทั้งผู้อ่านและ AdSense มองหา
คำถามที่พบบ่อย (FAQ)
Favicon ของ Blogger ต้องมีขนาดเท่าไหร่
Blogger จำกัดขนาดไฟล์ไว้ไม่เกิน 100KB และควรเป็นรูปสี่เหลี่ยมจัตุรัส แนะนำด้านละ 96 หรือ 144 พิกเซล เพราะ Google ระบุว่าไอคอนที่ใช้แสดงในผลค้นหาควรมีขนาดเป็นจำนวนเท่าของ 48 พิกเซล
URL ของ Favicon ใน Blogger คืออะไร
คือ URL ของบล็อกตามด้วย /favicon.ico เช่น https://yourblog.blogspot.com/favicon.ico ถ้าใช้โดเมนของตัวเองก็เปลี่ยนเป็นโดเมนนั้นแทน เปิด URL นี้ในเบราว์เซอร์เพื่อยืนยันว่าไอคอนอัปโหลดสำเร็จแล้ว
เปลี่ยน Favicon แล้วทำไมยังเห็นรูปเดิม
เกือบทุกครั้งเกิดจากแคชของเบราว์เซอร์ ซึ่งเก็บไอคอนไว้นานกว่าไฟล์ทั่วไป ลองเปิดในหน้าต่างไม่ระบุตัวตนหรือล้างแคช ส่วนไอคอนที่แสดงในผลค้นหา Google ต้องรอให้ Googlebot กลับมาเก็บข้อมูลใหม่ ซึ่งบังคับให้เร็วขึ้นไม่ได้
ต้องใช้ไฟล์นามสกุล .ico เท่านั้นไหม
ไม่จำเป็น Blogger รับไฟล์ภาพทั่วไปอย่าง PNG ได้ และ Google รองรับทั้ง ICO PNG SVG GIF JPEG แนะนำ PNG เพราะทำง่ายและรองรับพื้นหลังโปร่งใส
Favicon มีผลต่อ SEO ไหม
ไม่ได้เป็นปัจจัยจัดอันดับโดยตรง แต่ Google แสดงไอคอนข้างผลค้นหาบนมือถือ ไอคอนที่ชัดและจำง่ายจึงช่วยให้ผลของคุณสะดุดตากว่าเว็บที่ใช้ไอคอนเริ่มต้น ซึ่งมีผลต่ออัตราการคลิก