Module BCFavicon

เมื่อไม่นานมานี้ เรามีลูกค้ารายหนึ่งที่เว็บไซต์ไม่มี favicon ที่สมบูรณ์บนมือถือ — ไม่มีไอคอนสำหรับ "Add to Home Screen" ไม่มีไอคอนที่แสดงผลสม่ำเสมอในแต่ละเบราว์เซอร์ มีแต่ไอคอนแท็บว่างเปล่าแบบดีฟอลต์ทุกที่

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

ตัวอย่างเช่น หากต้องการ favicon ที่ใช้งานได้ครบทุกที่ คุณต้องทำแบบนี้:
เปิดโปรแกรมแต่งภาพ ปรับขนาดโลโก้ให้เหลือ 16x16px บันทึกไฟล์ แล้วปรับขนาดใหม่อีกครั้งเป็น 32x32px บันทึก จากนั้นปรับเป็น 44x44px, ต่อด้วย 180x180px สำหรับอุปกรณ์ Apple, แล้วก็ 192x192px และ 512x512px สำหรับ Android/PWA — บันทึกแยกทีละไฟล์ แล้วอัปโหลดทุกไฟล์ไปยังตำแหน่งที่ถูกต้องในธีมของคุณ

ต้องทำขั้นตอนปรับขนาดและอัปโหลดแบบนี้ซ้ำทุกครั้งที่ต้องการเปลี่ยนโลโก้ใหม่

เพราะการทำ favicon ให้ครบทุกขนาดที่เบราว์เซอร์/อุปกรณ์ต่าง ๆ ต้องการ ปกติต้องไปนั่ง resize รูปเองทีละขนาดด้วยโปรแกรมแต่งภาพ แล้วอัปโหลดเข้าธีมทีละไฟล์ ซึ่งเสียเวลา

• ปัญหาต้อง resize รูปเองหลายขนาดด้วยมือ
• ปัญหาไฟล์ favicon เดิมหายหรือพังตอนเปลี่ยนรูปใหม่
• ปัญหาเว็บไซต์ไม่รองรับการ "Add to Home Screen" อย่างถูกต้องบนมือถือ

1. แอดมินอัปโหลดรูปต้นฉบับผ่านหน้า config ในหลังบ้าน
2. โมดูลตรวจสอบ/แปลงไฟล์เป็น PNG แล้ว resize สร้างไฟล์ตามชุดขนาดที่กำหนดไว้
3. ก่อนเขียนทับไฟล์เดิม ระบบจะคัดลอกชุดไฟล์เก่าไปเก็บไว้ในโฟลเดอร์ เพื่อกู้คืนได้ภายหลัง
4. สร้าง/อัปเดตไฟล์ manifest.json จากค่าที่ตั้งไว้ (ชื่อแอป, ชื่อย่อ, สีธีม, สีพื้นหลัง, display mode)