2021 ที่เพิ่งรู้ว่า favicon ใช้ไฟล์ svg ได้แล้ว

date

Apr 10, 2021

slug

2021-favicon-svg

status

Published

category

life

หลังจากที่ทิ้งระยะห่างไปนานหลายเดือนจากบล็อกนี้ วันนี้วันดีผมได้กลับมาเขียนอีกแล้ว ล่าสุดตอนนี้ผมมาอยู่บนเฟรมเวิร์คที่ชื่อว่า NextJS เรียบร้อยแล้ว (จริงๆตอนแรกจะใช้ Gatsby แต่ด้วยความที่เวลา Deploy แต่ละครั้งพี่ท่านใช้เวลานานเหลือเกิน ไอ้เราก็สายขี้เกียจ config อะไรก็ไม่เก่ง ย้ายเลยแล้วกัน) ส่วนเรื่องที่ว่าเซ็ตอัพอะไรยังไง ผมก็ไปดูดความรู้ งูๆปลาๆ จากฝรั่งมาเหมือนเคย เอามาปรับแต่งนิดๆหน่อยๆ ตามที่พอมีความรู้ที่เรียนมา (ยังไม่จบคอร์สอีกต่างหาก ฮ่าๆ) ใครอยากรู้จริงๆ Source files ของบล็อก ผมก็เปิด public repository ไว้อยู่แล้วครับ เพราะ deploy บน vercel สะดวกดี (จริงๆ ก็หมดเวลาไปเป็นวันเหมือนกันนะ ไปนั่ง config ที่ github page กับ netlify แต่ทำยังไงก็ไม่ได้สักที สรุปโยนขึ้น vercel ไม่ต้องตั้งค่าอะไรเลย ผ่านฉลุย ก็ของเจ้าของทำนี่นะ)

เข้าเรื่องกันดีกว่า

ปัญหามันเกิดจาก NextJS มันจะมี next/image ที่จะคอย optimize ไฟล์ภาพ (ส่วนใหญ่จะเป็น png) เพื่อให้ง่ายต่อการ generate static site (อาจจะมีผลเรื่องความเร็วด้วย แต่ผมไม่ได้สังเกตขนาดนั้น) ตอนที่ run dev มันก็ไม่มีปัญหาอะไร favicon ทั้งหลายที่เป็นไฟล์ .ico , .png ก็ทำงานปกติดี

แต่ไม่รู้ทำไม ตอนที่เสร็จจากช่วง dev แล้วจะ push git ทีไร มันจะฟ้องขึ้นมาที่ terminal ตลอดว่า ไฟล์ภาพจะถูก optimize (ตอนทำก็มัวแต่ตั้งใจทำเลยไม่ได้เก็บภาพไว้ ขอโทษงับ~) แล้วพอ push ไปแล้วไปดูไฟล์ภาพใน repository ของตัวเองบน github มันไม่โหลด เหมือนไฟล์เสียทุกที เอาละหว่า จะแก้ยังไงดี? จะมองข้ามไปก็ได้แค่ favicon เอง แต่เห็นแล้วหงุดหงิดใจ

ก็เลยคิดว่า เออ มันมีไฟล์ .svg นี่ว่า แล้วมันใช้เป็น favicon ได้ไหมอะ เพราะ .svg ไหนๆมันปรับแก้ขนาดก็ง่ายกว่านามสกุลอื่นๆแล้ว (แค่แก้โค้ดเอา ไม่ต้องเปิด image editor) ตัดสินใจเปิด Google ค้นข้อมูลตามที่ได้รับแรงบัลดาลใจจากผู้ใหญ่เขาว่ามา ไปเจอบล็อกนึงเข้าได้เขียนหัวบล็อก ถามไว้ว่า Are you using SVG favicons yet? หวาว~ ตกลงว่าเขาก็ใช้กันมานานแล้วนี่หว่า เราไปอยู่ไหนมาเนี่ย

ก็เลยจัดการแปลงไฟล์ .png ทั้งหมด~~ในเครื่อง~~ ใน Project เป็น .svg (เพราะแรกเริ่มเดิมทีก็หาเอา svg ฟรีมาใช้นี่แหละ) แล้วก็แก้โค้ด src ใหม่เล็กน้อย ให้มันดึงไฟล์ไปใช้ให้ถูกต้อง แล้วก็ลอง git pish ให้ vercel ดึงไป deploy แล้วรอดูผล

สรุป

มันใช้ได้จริงๆด้วย ไม่ได้โดนฝรั่งต้มแต่ประการใด

และก็เป็นความว้าวส่วนตัว เพราะจากช่วง ม.ปลาย ไปมหาลัยนั้นเรียนไม่ตรงสายก็เลยไม่ได้สนใจเรื่องเว็บอีกเลย เพิ่งกลับมาลงทุนเรียน JavaScript ต่อได้ไม่นาน แล้วก็มาศึกษาวัฒนธรรมการทำเว็บที่เคยสนใจใหม่อีกครั้งระยะหลังๆมานี้ (ขนาดจะเขียนรีวิวคีย์บอร์ด Leopold ยังดองแล้วดองอีกเลย ฮ่าๆ)

Pickyzz

เข้าเรื่องกันดีกว่า

สรุป