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

ผมจะมาสอนการทำ favicon ด้วยตัวเองกันครับ

“favicon” หรือเรียกแบบเต็มๆ ก็ประมาณ Favorite Icon นั่นแหละ มันก็เป็นไอคอนที่จะติดอยู่ข้างๆ ที่อยู่เว็บไซต์บน Address Bar ของเบราเซอร์บนเครื่องคุณนั่นแหละ (อย่าบอกนะ ว่าไม่รู้จักเบราเซอร์) ถ้าเกิดเราชอบเว็บไหนแล้วบุ๊คมาร์คไว้ เจ้าไอคอนนี้ก็จะติดตามไปอยู่บนเมนู Bookmark หรือ Favorite ของคุณด้วยเสมอ

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

เรามาเริ่มทำ favicon กันเลยดีกว่าครับ

01

เริ่มกันด้วยการออกแบบ favicon บนเครื่องของคุณเอง ด้วยโปรแกรมสร้างภาพกราฟิกใดๆ ที่คุณมีหรือถนัด เช่น Adobe Photoshop เป็นต้น

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

02

บันทึกไฟล์ต้นแบบของ favicon ไว้ในรูปแบบใดก็ได้ในชนิดไฟล์เหล่านี้ : JPEG (*.jpg), GIF (*.gif), PNG (*.png)
บางที่ยอมรับไฟล์ Bitmap (*.bmp) ด้วยนะครับ

03

ขั้นตอนถัดมา ก็คือการสร้างไฟล์ favicon จริงๆ สักที ด้วยการเดินไปหาเว็บที่เปิดให้บริการสร้าง favicon แบบออนไลน์กัน อาจจะเสิร์ชด้วยคำว่า “make favicon online” หรือจะ “make transparent favicon online” ก็แล้วแต่

หนึ่งเว็บที่ผมลองใช้งานที่ขอหยิบมาแนะนำกัน ก็คือ เว็บนี้ครับ Favicon Generator จาก Web Script Lab

http://www.webscriptlab.com/favicongenerator.php

ง่ายๆ เลย ก็คือ คลิก Browse เลือกเอาไฟล์ที่เราสร้างไว้มานั่นเอง เลือกขนาดว่าจะเอา 16×16 หรือ 32×32 (อันนี้แล้วแต่อยากชอบใหญ่หรือไม่ใหญ่) แล้วคลิกปุ่ม “Generate”

เราจะเห็นตัวอย่างของ favicon ที่ได้บนหน้าจอเว็บ คลิกปุ่ม “Download” ต่อเลย แล้วบันทึกไฟล์เก็บไว้ในเครื่องในชื่อ “favicon.ico”

04

อัพโหลดไฟล์ “favicon.ico” ขึ้นยัง host server ของเว็บที่ต้องการทำ favicon นั้นๆ ง่ายสุดคือ วางไว้ที่ Home Directory
อย่าถามนะว่า อัพโหลดยังไง เพราะผมจะใบ้ให้แค่ว่า ใช้ Filezilla ไง อิอิ

05

ที่เหลือก็มาเขียนโค้ด HTML เพิ่ม <link rel="icon" href="/favicon.ico" type="image/x-icon" /> เข้าไปในส่วน Head ของทุกหน้า ส่วนจะแก้วิธีไหน ขึ้นอยู่กับเว็บคุณสร้างมายังไง ถ้าสร้างด้วย WordPress ก็ควรจะไปแก้ theme (ซึ่งส่วนใหญ่จะอยู่ในไฟล์ header.php)

นี่เป็นเพียงแค่โค้ดตัวอย่าง


<html>
<head>
<title>PatSonic.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
<body>

06

ที่เหลือก็เพียงอัพโหลดไฟล์เว็บ (*.html , *.php หรืออื่นๆ) ขึ้น server แล้วดูผลงานตัวเอง

—————————————-

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

:P