สร้าง Favorite Icon ที่บล็อก
Sponsor's Link

สร้าง Favorite Icon ที่บล็อก

20150920a_550220

วันที่ ๒๐ กันยายน ปี ๒๕๕๘

สวัสดีครับไดซัง(FB:ไดซัง-คนญี่ปุ่นรักเมืองไทย-)นะครับ

วันนี้ผมเขียนเรื่อง Favorite Icon นะครับ
Favorite Icon เคยได้ยินไหมครับ?
ผมไม่เคยครับ555
เพราะคนญี่ปุ่นพูดกันแต่ Favicon(ファビコン)
ผมเพิ่งรู้ว่าคำนี้เป็นคำย่อของ Favorite Icon นะครับ
เหมือนรู้ UFO แต่ไม่รู้ Unidentified Flying Object นะครับ

แล้ว Favorite Icon คืออะไร?
มันไม่ใช่ Icon ที่เราชอบนะครับ555
ดูตัวอย่างมันเข้าใจง่ายกว่าครับ
Favorite Icon คือนี่ครับ

20150920a_allfavicon

ถ้าเว็บไซท์ Apple ก็จะเป็นสัญลักษณ์แอปเป้น
Starbucks ก็เป็นไซเรน
ก็คือเมอร์เมดที่มีหางสองอัน
เฟซบุ๊กก็ตัว F สีขาวบนสีฟ้าที่ทุกคนเคยเห็น
แล้วบล็อกไดซังเป็น… ตัวหมายเลข”5″???

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

วาด Favorite Icon

Favicon เป็น 16 pixel X 16 pixel
มันแล็กมากครับ
วิธีวาดมันง่ายดี
แค่เปิดโปรแกรมสำหรับวาดรูปเช่น Paint และ Save เป็น PNG ครับ

สมัยก่อน Favorite Icon คือแค่ 16 X 16 Pixel อย่างเดียว
แต่สมัยนี้ต้องสร้างหลายขนาดครับ
เพราะสำหรับมือถือสำหรับตอนวางไว้ Desktop
นู่นนี่นั่นแต่หลักๆเป็น3ขนาดก็คือ
16 pixel X 16 Pixel
32 pixel X 32 Pixel
48 pixel X 48 Pixel
นะครับ

ถ้าอยากทำมากกว่านี้ก็ทำ
96 pixel X 96 Pixel
128 pixel X 128 Pixel
และขนาดอื่นๆก็ดีด้วยก็มีครับ

สร้าง Favorite Icon

ถ้าวาดเสร็จก็ต้องทำให้เป็นfile “.ico” ครับ
สำหรับเปลี่ยนเป็น ”.ico” ก็มีวิธีสองอย่างครับ
ใช้โปรแกรมเช่น PhotoShop
หรือใช้บริกาณของเว็บครับ

ครั้งนี้ผมทำ 3file และใช้เว็บไซท์สำหรับสร้างเป็น ”.ico” ครับ
เพราะผมไม่มี PhotoShop ไม่มีโปรแกรมที่สร้าง ”.ico”
แต่ใช้เว็บไซท์ก็ง่ายดีนะครับแค่เข้าไปเว็บไซท์อัพ File ที่เราวาดเป็น PNG แค่นี้ก็
เว็บไซท์ทำให้เปลี่ยนเป็น ”.ico” ครับ
มันง่ายมากเลยครับ

20150920a_3favicon

ถ้าคุณมี HomePage หรือบล็อกของตัวเอง
คุณก็ตั้งได้ไม่ยากครับ
แต่ไม่แน่ใจว่าถ้าคุณใช้ BlogGang หรือบริกานบล็อก
ผมไม่แน่ใจว่าตั้งได้หรือเปล่านะครับ
แล้วก็ FacebookPage ก็ตั้งไม่ได้ครับ
มันของเฟซบุ๊กก็เลยต้องเป็นตัว ”F” สีขาวบนสีฟ้านะครับ

Favicon ของไดซัง

ได้แล้วครับ
สุดท้ายเป็นแบบนี้ครับ

20150920a_myfavicon

ไม่ค่อยคิดอะไรแค่อยากได้ของตัวเองไม่เอาหมายเลขห้า
สุดท้ายก็แค่เขียน”ได”นะครับ

ปล.

ตอนแรกผมทำ Favicon หลายขนาดแต่
ยิ่ง File เยอะก็ยิ่ง File หนัก
ผมก็เลยทำแค่3ขนาดครับ

เมื่อก่อนเห็น Favicon ที่ขยับได้แต่ช่วงนี้ไม่ค่อยเห็นเลย