สวัสดีค้าบผม หลังจากหายหน้าหายตาไปสักพัก
วันนี้ก็เป็นฤกษ์งามยามดีคับ เพราะปิดเรียนใหญ่ เอิ้กๆ

วันนี้ผมนำเทคนิคการปรับแต่งบล็อกเพื่อสร้างเอกลักษณ์ประจำตัวคับ
นั่นคือการใส่ favicon ประจำบล็อกของตัวเอง

ใครที่ไม่รู้จัก favicon อ่านต่อได้คับ ส่วนใครรู้แล้วก็ข้ามได้เลย

favicon ก็คือรูปเล็กๆที่เป็นสัญลักษณ์ประจำเว็บแต่ละเว็บคับ
ก็เหมือนเป็น mascot ของเว็บนั่นแหละคับ สำหรับคนที่ใช้ firefox และ
ie7 จะมองเห็นครับ ส่วน ie6 จะไม่เห็น favicon  ดูตัวอย่างนะคับ

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

 

วิธีทำ------------

ก่อนอื่นให้เราทำการสร้าง favicon ที่เราต้องการก่อนนะคับ
โดยใช้โปรแกรม photoshop ก็ได้คับผม  favicon นั้นจะมีขนาด
42*42px แต่มันเล็กกระจึ่งเดียว ดังนั้นพอทำจริงๆให้ทำใหญ่ๆนะคับ
เช่น 100*100px เมื่อทำเสร็จแล้วค่อยย่อภาพเอา

หลังจากที่เราทำเสร็จแล้ว ก็ทำการแปลงไฟล์เป็น .ico คับ
แวะไปที่เว็บนี้ได้เลย เค้ามีบริการแปลงออนไลน์ฟรีคับผม

http://www.coolutils.com/Online-Image-Converter.php

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

-  http://www.hostanyimage.com

- http://www.1pixelhost.com

- http://iconj.com/generator.php

เป็นเว็บฝากรูปคับ รองรับ .ico ด้วย เมื่อเราอัพไปแล้วจะได้ลิงค์
มา ให้เอาลิงค์คล้ายๆแบบนี้คับ

http://www.hostanyimage.com/files/860phnwvyaux3qk2p2h9.ico

เอาละทีนี้เราก็พร้อมจะสร้างเอกลักษณ์ประจำบล็อกเรากันแล้ว!!

ให้ทุกท่านไปที่ Manage ของเว็บ exteen นะครับ เลือก Theme>Widgets

แล้วทำการเพิ่ม custom code เข้าไปให้อยู่ด้านบนสุดเลยนะครับ ดูตัวอย่าง

เหมือนในภาพคับ



แล้วเพิ่มโค้ดนี้ไว้บนสุดครับ

 





ตรง http://YOUR_PATH/favicon.ico ก็แก้เป็นตำแหน่งไฟล์ของ .ico ของเพื่อนๆนะคับ
อย่างของผมก็เป็น

http://www.hostanyimage.com/files/860phnwvyaux3qk2p2h9.ico

 

หน้าตาในกล่องแก้ไขโค้ดก็จะเป็นประมาณนี้

 

ใส่ไปแล้วก็กด save คับ แล้วก็อย่าลืม save theme ด้วยนะครับ

ทีนี้ก็ลองเปิดบล็อกตัวเอง เช็คดูคับว่ favicon ขึ้นหรือเปล่า
บางครั้งอาจจะต้องกด F5 เพื่อรีเฟรชบล็อกด้วยนะครับ

 

 ขึ้นแล้ว!!(ของผมทำเป็นตัว H) ทีนี้เราก็จะมี favicon ประจำตัวเองแล้วคับ
ซึ่งเมื่อเพื่อนๆท่านอื่นแวะมาอ่านบล็อกเราก็จะเห็น favicon นี้

ใครสนใจลองปรับเปลี่ยน ก็ลองดูได้นะคับ หากมีข้อสงสัย ก็ถามได้คับผม
ยินดีตอบค้าบ

 ---แก้ไขเพิ่มเติม ---

ปล. ขอบคุณความคิดที่ 62 คับ
สำหรับใครที่ไม่ใช้รูป .ico ลองเอาภาพ .gif ก็ได้คับ

Comment

Comment:

Tweet

ขอบคุณสำหรับบทความดีๆค่ะ big smile

#94 By Suparadar (103.7.57.18|124.120.183.31) on 2012-09-30 20:25

แจ่มมากครับ Hot!

#93 By l3astards™ on 2010-09-22 01:03

ขอบคุณมากคับ
Hot! Hot!

#92 By Moneki on 2010-08-05 05:42

<a href="http://udqdpdfrnkxpozz.com">qsdfhldndhlkpbz</a> http://qinyzvcgmtozpzu.com [url=http://cxjfsjhqzmozmpe.com]oyqwhrqqwmaponb[/url]

#91 By veaajosogs (94.102.52.87) on 2010-06-10 20:49

ขอบคุณมากค่ะ....แต่ว่าไม่รู้ว่าเป็นเพราะคอมรึเปล่า..
ดูในฮาวทูแล้วไม่มีโค้ดสำหรับใส่ฟาวิคอนไม่เห็นเลยค่ะ.. มันว่างเปล่าขาวโล่งเลยค่ะ...

#90 By BBtion on 2010-04-24 09:03

ขอบคุณมากๆเลยค่า
ทำได้แล้ว เอร๊ยย Hot! Hot!

#89 By dbskjijy on 2010-04-21 23:21

เพิ่งเข้ามาเห็น
ขอบคุณมากค่ะสำหรับวิธี จะนำไปใช้ดูนะคะ

#88 By P £ ã r y ♥ on 2010-03-27 10:27

ขอบคุนมากครับ กะลังนั่งทำอยู่เลยมาแอบอ่านbig smile

#87 By meawnoy on 2009-10-25 14:18

ขอบคุณนะคะ อิอิ

ลืมไปเลยว่า ต้องเพิ่ม custom code

#86 By r e n e s m e` on 2009-10-23 08:59

ขอบคุณมากมายค้าฟฟ

หาวิธีใส่นานมาก ><!!

Hot! Hot! Hot! Hot! Hot!

#85 By LikeWeatheR on 2009-09-12 07:29

ทำเสร็จแล้ว ขอบคุณสำหรับคำแนะนำครับsad smile

#84 By XLR8 on 2009-08-16 13:27

น่าสนใจHot!
แต่เดี๋ยวต้องไปออกแบบไอคอนก่อนsad smile

#83 By Ratcicle on 2009-08-02 10:38


สุดยอด ได้ความรู้มากมายมหาศาล

ฝากเว็บด้วยนะ

ลงประกาศ ซื้อขาย ฟรี
http://www.siamshopmarket.com/

#82 By kokkok on 2009-07-11 11:55

ขอบคุณคุณ moodee ที่ให้ความรู้เพิ่มเติมคับผม

#81 By hackerlife on 2009-07-11 00:05

Hot! Hot! Hot! big smile

#80 By น้ามชา on 2009-07-10 12:03

Hot! Hot! Hot!
cry เจ๋งโล้ดเลยคร่า

#79 By bentie~ on 2009-07-09 22:04

เราใช้รูปนามสกุล .gif แล้วเปิดด้วย ie มันจะมองไม่เห็นอ่ะค่ะ
แต่ใช้ FF หรือ Chrome เปิดไม่มีปัญหามองเห็น favicon ที่ใช้ปกติ

ลองตามไปดูบลอคคุณ #62 เปิดด้วย ie ก็ไม่เห็นภาพเหมือนกัน

#78 By moodee on 2009-07-09 09:40

ขอบคุณค่ะ ทำได้แล้วค่ะ
ใช้รูปจากที่เก็บไว้ใน file ที่เคยอัพโหลด
ไว้ใน exteen มาใช้ซะเลย ^-^
ตอนที่เลือกๆ รูปมาใช้ เพิ่มเติมนิดนะคะ ก่อนที่จะมาสรุป
ใช้ .gif อันล่าสุดนี่ รูปที่เป็น .jpg ก็ใช้ได้เหมือนกันนะคะ

#77 By moodee on 2009-07-09 01:43

อยากรู้มานานแล้ว ขอรับวิธีทำไปล่ะครับ ขอบคุณsurprised smile Hot!

#76 By ผีแอบ on 2009-07-08 02:37

โห๊วววววส์ ดีๆ เดี๋ยวจะลองทำรูปมาใส่มั่งค่ะopen-mounthed smile

#75 By เนือย on 2009-07-06 23:36

โอ้วววววว แบบนี้เองเหรอเนี่ยยยยย

ขอบคุณมากๆค่ะ

#74 By -Bloommifild- on 2009-07-06 20:29

ููู^^


โอ้ววว วว ..
จะนำไปดูครับ
ขอบคุณค๊าบบ confused smile Hot! Hot!

#73 By ` k2xiiah - - - - -PARKYUCHAN on 2009-07-06 20:23

กรี๊ดด ขอบคุณมากค่ะ ในที่สุดก็รู้วิธีการทำสักที TwT/

ให้ค่ะๆๆ Hot!