ทำไมผลค้นหา Google ของเว็บเราขึ้นเป็นไอคอนพื้นๆ หรือรูปลูกโลก แทนโลโก้ร้าน

ต้องแยกก่อนครับว่าเป็นผลค้นหาปกติหรือโฆษณา ถ้าเป็นผลค้นหาปกติ ให้เช็กเงื่อนไขของ Google ทีละข้อ ทั้งรูปสี่เหลี่ยมจัตุรัส นามสกุลไฟล์ที่รองรับ บรรทัดประกาศไอคอนบนหน้าแรก และ robots.txt ที่ต้องไม่ปิดหน้าแรกหรือไฟล์ไอคอน ซึ่ง Google เองก็บอกว่าทำครบแล้วก็ยังไม่รับประกันว่าจะแสดง ถ้าเป็นโฆษณา Google Ads รูปลูกโลกคือไอคอนที่ Google ใช้แทนเมื่อ Business logo ในบัญชีโฆษณายังไม่ได้แสดง ต้องไปแก้ในบัญชี Google Ads ไม่ใช่ที่ favicon ของเว็บครับ

เปลี่ยน favicon ใหม่แล้ว ต้องรอนานแค่ไหน Google ถึงจะแสดงไอคอนใหม่ในผลค้นหา

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

favicon ของเว็บกับโลโก้ในโฆษณา Google Ads ใช้ขนาดต่างกันยังไง

favicon สำหรับผลค้นหา Google ต้องเป็นสี่เหลี่ยมจัตุรัส อย่างน้อย 8x8 พิกเซล และ Google แนะนำให้ใหญ่กว่า 48x48 พิกเซลครับ ส่วน Business logo ใน Google Ads ต้องเป็น 1:1 ไฟล์ PNG หรือ JPG ไม่เกิน 5120 KB ขั้นต่ำ 128x128 พิกเซล แนะนำ 1200x1200 พิกเซล และจะถูกตัดเป็นวงกลมแสดงที่ 28x28 พิกเซล ใช้รูปต้นฉบับเดียวกันได้ แต่ต้องแตกเป็นไฟล์คนละขนาด แล้วอัปโหลดคนละที่ favicon อยู่ในโค้ดเว็บ ส่วน Business logo อยู่ในบัญชีโฆษณาครับ

ใส่ favicon แล้ว เว็บจะติดอันดับ Google ดีขึ้นไหม

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

favicon สีดำของร้านหายไปบนแท็บสีเข้มตอนเปิดโหมดมืด แก้ยังไงดี

เจอบ่อยมากครับ โลโก้สีเข้มบนพื้นโปร่งใสจะกลืนไปกับแท็บสีเข้มทันที วิธีที่ง่ายที่สุดคือใส่พื้นหลังสีทึบให้ไอคอน หรือใส่ขอบสีอ่อนบางๆ รอบสัญลักษณ์ ให้อ่านออกทั้งโหมดสว่างและโหมดมืด ถ้าอยากไปไกลกว่านั้น web.dev มีวิธีทำ favicon แบบ SVG ที่เปลี่ยนสีตามโหมดของเครื่องได้ แต่ต้องวางไฟล์ .ico ไว้เป็นตัวสำรองด้วย เพราะ SVG ไม่อยู่ในรายการนามสกุลที่ Google Search รองรับครับ

เปลี่ยน favicon ตามเทศกาลหรือช่วงโปรโมชันได้ไหม

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

Favicon คืออะไร? ไอคอนเล็กข้างชื่อเว็บที่ทำให้ร้านดูพร้อม

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

ตรายางอันนั้นไม่ได้ทำให้ขนมอร่อยขึ้นหรอกครับ แต่ถุงที่ไม่มีตราอะไรเลยวางอยู่ข้างกัน ดูเหมือนของที่ยังเตรียมไม่เสร็จ

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

ลองเช็กเว็บตัวเองดูก่อน ใช้เวลาไม่ถึง 5 นาที

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

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

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

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

Favicon คืออะไร และโผล่ขึ้นมาตรงไหนบ้าง

Favicon ย่อมาจาก favorites icon ครับ ชื่อนี้มาจากยุคแรกของเบราว์เซอร์ที่ไอคอนนี้ขึ้นอยู่ในรายการเว็บโปรด (bookmark) ทุกวันนี้มันไปปรากฏอยู่หลายที่กว่านั้นมาก ทั้งบนแท็บของเบราว์เซอร์ ในประวัติการเข้าชม ในรายการ bookmark บนหน้าจอโฮมของมือถือเวลามีคนกดเพิ่มเว็บไว้ และในผลค้นหาของ Google ข้างชื่อเว็บไซต์

ในทางเทคนิค favicon คือไฟล์รูปไฟล์หนึ่งที่วางไว้บนเว็บ แล้วในโค้ดส่วนหัวของหน้าเว็บจะมีบรรทัดหนึ่งบอกเบราว์เซอร์ว่าไอคอนของเว็บนี้อยู่ที่ไหน หน้าตาประมาณ <link rel="icon" href="/favicon.ico"> เจ้าของร้านไม่ต้องเขียนเองครับ แค่รู้ว่ามีบรรทัดนี้อยู่ ก็จะถามทีมทำเว็บได้ตรงจุด

ทำไมไอคอนเล็กนิดเดียวถึงมีผลกับความรู้สึก

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

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

ลูกค้าไม่ได้คิดเป็นคำพูดหรอกครับว่า "ร้านนี้ไม่มี favicon" เขาแค่รู้สึกว่าอีกร้านดูพร้อมกว่า

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

Google ตั้งเงื่อนไขอะไรไว้บ้าง ถึงจะยอมโชว์ favicon ในผลค้นหา

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

รูปต้องเป็นสี่เหลี่ยมจัตุรัส และใหญ่พอ

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

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

ไฟล์ต้องเป็นนามสกุลที่ Google รองรับ

รายการที่ Google เขียนไว้คือ BMP, GIF, ICO, PNG, JPEG, PPM และ TIFF ข้อนี้มีจุดที่น่าสังเกตครับ SVG ไม่อยู่ในรายการนี้ ทั้งที่เบราว์เซอร์รุ่นใหม่หลายตัวใช้ SVG เป็น favicon บนแท็บได้แล้ว คำแนะนำของผมคือ เว็บที่อยากใช้ SVG ควรมีไฟล์ ICO หรือ PNG วางคู่ไว้ด้วยเสมอ เดี๋ยวผมจะยกตัวอย่างเว็บดังที่ทำแบบนี้ให้ดูครับ

ต้องประกาศไว้ที่หน้าแรก และ Google ต้องเข้าไปอ่านได้

บรรทัดที่บอกตำแหน่งไอคอนต้องอยู่ในส่วนหัวของหน้าแรกของเว็บ และ Google ระบุว่ารองรับ rel อยู่ 4 แบบ คือ icon, shortcut icon, apple-touch-icon และ apple-touch-icon-precomposed นอกจากนั้น Googlebot ต้องเข้าไปอ่านหน้าแรกได้ และ Googlebot-Image ต้องเข้าไปดึงไฟล์ไอคอนได้ ถ้าไฟล์ robots.txt ของเว็บเผลอไปปิดโฟลเดอร์ที่เก็บรูปไว้ Google ก็จะมองไม่เห็นไอคอนของคุณ

หนึ่งเว็บไซต์ ได้หนึ่ง favicon ต่อหนึ่งชื่อโฮสต์

Google นับ favicon ต่อชื่อโฮสต์ครับ ถ้าคุณมีเว็บหลักที่ www.ร้านคุณ.com กับร้านค้าออนไลน์ที่ shop.ร้านคุณ.com สองอันนี้มี favicon แยกกันได้ แต่ถ้าร้านค้าอยู่ที่ www.ร้านคุณ.com/shop มันจะใช้ favicon เดียวกับเว็บหลัก เพราะเป็นแค่โฟลเดอร์ย่อยของเว็บเดียวกัน ใครที่ยังงงเรื่อง subdomain กับโดเมนหลัก อ่านเพิ่มได้ในบทความDomain Name คืออะไร ที่อธิบายส่วนประกอบของชื่อโดเมนไว้ครับ

ที่อยู่ของไฟล์ต้องนิ่ง

Google เขียนไว้ตรงๆ ว่า URL ของ favicon ต้องคงที่ อย่าเปลี่ยนบ่อย และหลังจากเปลี่ยนแล้ว ต้องรอให้ Google กลับมาเก็บข้อมูลหน้าแรกใหม่ ซึ่งเอกสารบอกว่าอาจใช้เวลาตั้งแต่หลายวันไปจนถึงหลายสัปดาห์ ถ้าอยากเร่ง ให้ใช้ URL Inspection ใน Search Console ขอให้ Google เข้ามาดูหน้าแรกอีกครั้ง วิธีใช้เครื่องมือนี้ผมเล่าไว้ในบทความGoogle Search Console คืออะไร คู่มือฉบับเริ่มต้นครับ

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

"ไอคอนเล็กนิดเดียว ลูกค้าไม่มีใครดูหรอก"

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

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

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

โลโก้ข้างโฆษณา Google Ads เป็นคนละเรื่องกับ favicon

เรื่องนี้ทีมเราเคยเข้าใจผิดเองครับ เลยอยากเล่าให้ละเอียดหน่อย

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

โลโก้ในโฆษณามาจากสิ่งที่ Google Ads เรียกว่า Business information ซึ่งมีสองชิ้น คือ Business name กับ Business logo ตั้งค่าอยู่ในบัญชี Google Ads ไม่ได้อยู่ในโค้ดเว็บ ตามข้อกำหนด Business information ของ Google Ads โลโก้ต้องเป็นสี่เหลี่ยมจัตุรัส 1:1 เป็นไฟล์ PNG หรือ JPG ขนาดไฟล์ไม่เกิน 5120 KB แนะนำที่ 1200x1200 พิกเซล ขั้นต่ำ 128x128 พิกเซล และต้องดูดีทั้งบนพื้นสว่างและพื้นมืด Google จะตัดโลโก้เป็นวงกลมแล้วแสดงที่ขนาด 28x28 พิกเซล ส่วนชื่อธุรกิจยาวได้ไม่เกิน 25 ตัวอักษร และต้องตรงกับชื่อโดเมนหรือชื่อนิติบุคคลที่ยืนยันไว้

เงื่อนไขของบัญชีก็มีครับ Google เขียนไว้ว่าบัญชีต้องมีค่าใช้จ่ายของแคมเปญ Search ในช่วง 28 วันที่ผ่านมา และต้องผ่าน Advertiser verification แล้ว แม้ทำครบทุกอย่าง Google ก็บอกว่าไม่รับประกันว่าโลโก้จะแสดง ถ้าไม่แสดง โฆษณาจะขึ้นไอคอนลูกโลกแทนข้างชื่อโดเมน

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

เรื่องจริงจากบัญชีโฆษณาของเราเอง

ช่วงกรกฎาคม 2026 ตอนที่เรากลับมายิงโฆษณา Search ของ TumWebSME อีกรอบ ทีมเราสังเกตว่าโฆษณาของตัวเองขึ้นไอคอนลูกโลกแทนโลโก้ ความคิดแรกของเราคือไปดูที่ favicon ของเว็บ ซึ่งผิดที่ตั้งแต่แรกครับ พอไล่ดูจริงจึงรู้ว่าโลโก้ข้างโฆษณามาจาก Business logo ในบัญชี Google Ads และตอนนั้นบัญชีเรายังขาดหลายอย่าง ทั้งยังไม่ได้ตั้ง Business name และค่าโฆษณา Search เพิ่งกลับมาเริ่มใช้ได้ไม่กี่วัน

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

บทเรียนที่เราจดไว้ในทีมคือ เปิดไฟล์ดูก่อนเสมอ อย่าตัดสินจากชื่อไฟล์

ถ้าคุณจ้างใครดูแลเว็บหรือโฆษณาอยู่ ข้อนี้ใช้ได้กับคุณเหมือนกันครับ เวลามีคนบอกว่าไอคอนหรือโลโก้ผิด ขอให้เขาเปิดรูปจริงให้ดูด้วยกัน

ทำไมควรทำให้ถูกตั้งแต่วันแรก

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

อีกเรื่องที่คนมักมองข้ามคือ ไอคอนติดไปกับลูกค้า ใครที่กด bookmark หรือเพิ่มเว็บไว้บนหน้าจอโฮมตั้งแต่วันแรก จะเก็บไอคอนแบบนั้นไว้ในเครื่อง ถ้าวันนั้นยังไม่มีไอคอนที่ตั้งใจทำไว้ สิ่งที่อยู่บนมือถือเขาก็คือไอคอนแบบนั้น

และเพราะ Google ขอให้ URL ของไอคอนนิ่ง ถ้าตั้งชื่อไฟล์และตำแหน่งให้ดีตั้งแต่แรก วันหลังอยากปรับดีไซน์ก็แค่เปลี่ยนรูปในตำแหน่งเดิม ไม่ต้องย้ายที่อยู่ไปมา

ชุดไฟล์ขั้นต่ำที่ควรขอจากทีมทำเว็บ

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

ไฟล์แรกคือ favicon.ico วางไว้ที่รากของเว็บ เป็นไฟล์ที่เบราว์เซอร์แทบทุกตัวรู้จัก และอยู่ในรายการที่ Google รองรับ ต่อมาคือ PNG สำหรับแท็บ ซึ่งหลายเว็บทำไว้ที่ 32x32 พิกเซล เพื่อให้คมบนหน้าจอความละเอียดสูง

ไฟล์สำคัญถัดมาคือ apple-touch-icon ขนาด 180x180 พิกเซล ซึ่งเป็นขนาดที่นิยมใช้กับ iPhone เหตุผลที่ต้องมีไฟล์นี้คือ ตามเอกสาร MDN เรื่องค่า rel ของลิงก์ iOS ของ Apple ไม่ได้ใช้ rel="icon" เวลามีคนเพิ่มเว็บไว้บนหน้าจอโฮม แต่ใช้ apple-touch-icon แทน ถ้าไม่มีไฟล์นี้ ไอคอนบนหน้าจอโฮมของ iPhone ก็จะไม่ใช่โลโก้ที่คุณเลือกเอง และ apple-touch-icon ก็เป็นหนึ่งใน rel ที่ Google ระบุว่ารองรับด้วย

สุดท้ายคือ ไอคอนใน web manifest เป็นไฟล์ PNG ขนาด 192x192 และ 512x512 พิกเซล ที่มือถือ Android ใช้เวลามีคนเพิ่มเว็บไว้บนหน้าจอ ถ้าเว็บของคุณยังไม่มีไฟล์ manifest ก็ไม่ใช่เรื่องใหญ่ครับ ขอให้มีสามอย่างแรกครบก่อน

ถ้าอยากใช้ SVG และรองรับโหมดมืด

บทความBuilding an adaptive favicon บน web.dev อธิบายวิธีทำ favicon แบบ SVG ที่เปลี่ยนสีตามโหมดสว่างหรือโหมดมืดของเครื่องได้ โดยวางไฟล์ .ico ไว้ก่อน แล้วค่อยเพิ่ม .svg ตามหลัง เบราว์เซอร์ที่รองรับจะใช้ SVG ส่วนที่ไม่รองรับก็ยังมี .ico ให้ใช้ ตอนที่บทความนั้นเขียน SVG ที่เปลี่ยนสีตามโหมดทำงานได้ใน Firefox และเบราว์เซอร์ตระกูล Chromium

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

ตัวอย่างจริงที่เปิดดูเองได้

ผมไปเปิดโค้ดหน้าแรกของเว็บที่คนไทยรู้จักมาดูครับ ทุกคนทำแบบเดียวกันได้ด้วยการคลิกขวาที่หน้าเว็บแล้วเลือกดูซอร์สของหน้า จากนั้นค้นคำว่า icon

GitHub ใช้ favicon เป็นไฟล์ SVG และมีไฟล์ PNG ประกาศไว้เป็นตัวสำรองด้วย ตรงกับที่ผมเล่าไว้ข้างบนเป๊ะ SVG ใช้ได้สวยบนเบราว์เซอร์ใหม่ ส่วน PNG เป็นนามสกุลที่อยู่ในรายการของ Google

Wongnai ทำแบบเรียบง่ายกว่านั้น มี favicon.ico หนึ่งไฟล์ กับ apple-touch-icon อีกหนึ่งไฟล์ แค่นี้ก็ครอบคลุมแท็บเบราว์เซอร์และหน้าจอโฮมของ iPhone แล้ว

เว็บของ TumWebSME เองมีชุดไฟล์ดังนี้ครับ favicon.ico, PNG ขนาด 16x16 และ 32x32, apple-touch-icon ขนาด 180x180 และไฟล์ site.webmanifest ที่มีไอคอน 192x192 กับ 512x512 ถ้าเทียบกับคำแนะนำของ Google ที่อยากได้ไอคอนใหญ่กว่า 48 พิกเซล ไฟล์ PNG สำหรับแท็บของเรายังเล็กกว่านั้น ไฟล์ที่ใหญ่พอในชุดนี้คือ apple-touch-icon ซึ่งเป็น rel ที่ Google รองรับ ผมเล่าตรงนี้ไว้ให้เห็นว่า การเช็กตามเอกสารทีละข้อจะเจอจุดให้ปรับได้เสมอ แม้แต่กับเว็บของทีมที่ทำเว็บเองครับ

แผน 6 ขั้น สำหรับเจ้าของร้าน

ทำเช็กลิสต์ 3 ข้อด้านบนกับเว็บของคุณ แล้วจดไว้ว่าข้อไหนยังไม่ผ่าน
เตรียมโลโก้ต้นฉบับแบบสี่เหลี่ยมจัตุรัส ใช้แค่สัญลักษณ์ พื้นหลังสีทึบหรือมีขอบ ขนาด 512x512 พิกเซลขึ้นไป หรือเป็น SVG
ส่งให้ทีมทำเว็บ พร้อมขอชุดไฟล์ favicon.ico, PNG สำหรับแท็บ, apple-touch-icon 180x180 และไอคอน manifest 192 กับ 512 ให้ประกาศไว้ในส่วนหัวของหน้าแรก
ขอให้ทีมเช็กว่า robots.txt ไม่ได้ปิดหน้าแรกหรือไฟล์ไอคอน และตกลงกันว่าจะใช้ชื่อไฟล์กับตำแหน่งเดิมตลอด
เข้า Search Console ใช้ URL Inspection กับหน้าแรก แล้วกดขอให้ Google จัดทำดัชนีใหม่
ถ้ายิง Google Ads แบบ Search อยู่ ให้ตั้ง Business name กับ Business logo ในบัญชีโฆษณาแยกต่างหาก และเปิดไฟล์โลโก้ดูด้วยตาทุกครั้งก่อนสรุปว่าถูกหรือผิด

จะรู้ได้ยังไงว่าเรียบร้อยแล้ว

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

จากนั้นลองเพิ่มเว็บไว้บนหน้าจอโฮมของ iPhone และ Android อีกรอบ ไอคอนที่ได้ควรเป็นโลโก้คมๆ ที่คุณเตรียมไว้

ส่วนผลค้นหา Google ให้ใจเย็นหน่อย เช็กสัปดาห์ละครั้งด้วยการค้นชื่อร้านบนมือถือ ตามเอกสารของ Google อาจใช้เวลาหลายวันถึงหลายสัปดาห์ ถ้าผ่านไปนานแล้วยังไม่เปลี่ยน ให้ย้อนกลับไปเช็กเงื่อนไขทีละข้อ ทั้งรูปจัตุรัส นามสกุลไฟล์ บรรทัดประกาศบนหน้าแรก และ robots.txt

สำหรับโฆษณา ให้ดูในเมนู Assets ของบัญชี Google Ads ว่า Business name และ Business logo ได้รับอนุมัติแล้วหรือยัง แล้วลองค้นคำที่คุณยิงโฆษณาอยู่เพื่อดูว่าโลโก้ขึ้นจริงไหม

กลับมาที่ตรายางอันเล็ก

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

ส่วนเงื่อนไขที่ละเอียดกว่านี้ หรือถ้า Google เปลี่ยนกติกาในอนาคต ให้ยึดเอกสารของ Google เป็นหลักนะครับ

ถ้ากำลังจะทำเว็บใหม่ และอยากให้ทีมที่ทำเว็บดูแลรายละเอียดแบบนี้ให้ครบตั้งแต่วันเปิดตัว ดูขอบเขตงานของแต่ละแพ็กเกจได้ที่ หน้าแพ็กเกจของ TumWebSME แล้วทักมาเล่าเรื่องร้านให้ผมฟังได้เลยครับ

ช่องทางการติดตาม TumWebSME

ติดตามสาระความรู้เรื่องการทำเว็บไซต์และการตลาดออนไลน์ได้ที่:

Facebook: TumWebSME รับทำเว็บไซต์ธุรกิจ
Instagram: @tumwebsme
TikTok: @tumwebsme
YouTube: TumWebSME

ติดต่องานและสอบถามบริการ

088-983-9386 (คุณพลอย)
099-856-3198 (คุณแสนนาน)