SHARE

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

ผมจะมาสอนการทำ 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="http://www.patsonic.com/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 ใดๆ ก็เม้นกันเข้ามาได้ครับผม แล้วเจอกันใหม่ บทความหน้าแล้วกันครับ

😛

PatSonic Blog Comment

14 COMMENTS

  1. เอ่อ พี่แพทแล้ว Home directory ใน server อยู่ใน Folder อันไหนเหรอคับ
    หาแล้วแต่ไม่เจอ ช่วยบอกหน่อยนะครับ ผมใช้ WordPress ขอบคุณครับ

  2. Home Directory ก็คือ ไดเรกทอรี่หลักของเว็บแต่ละเว็บนั่นแหละครับ แล้วแต่ผู้ให้บริการ Hosting แต่ละเจ้าว่าจะตั้งให้ยังไง ถ้าเราล็อกอินใน FileZilla ส่วนใหญ่จะเป็นไดเรกทอรี่ที่ชื่อ public_html

    ส่วน Host นอกบางเจ้า เราอาจจะเจอแต่ / เฉยๆ ซึ่งอัพโหลดไฟล์ต่างๆ ของ WordPress ขึ้นไปก็ใช้งานได้เลย นั่นแหละ Home Directory ของเรา

    อธิบายเพิ่มเติม คือ ไฟล์หน้าไหนที่อยู่ใน Home Directory ก็คือ หน้าที่เราเปิดในเบราเซอร์ได้ด้วยชื่อโดเมน ไม่มีชื่อไดเรกทอรี่ย่อยประกอบอยู่ด้วย
    เช่น http://patsonic.com/index.php แสดงว่า index.php อยู่ใน Home Directory ของเราครับ

  3. ไม่ยากครับ เปลี่ยนไปสร้างไฟล์ GIF Animation ขนาดสัก 16×16 อัพขึ้นไปแล้ว เปลี่ยนโค้ดเป็น

    <link rel=”icon” href=”/favicon_animated.gif” type=”image/gif”>

  4. ทำแล้วครับเมื่อวันก่อน แต่ยังไม่ได้มาขอบคุณเจ้าของบล็ิิอกเลย วันนี้แวะมาขอบคุณสักหน่อย……

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

  6. ขอบคุณครับกับความรู้ดีๆ ที่มาแนะนำกัน เสร็จแล้วกับ favicon ของผม

LEAVE A REPLY