ThaiSEOBoard.com

ไทย เสียว บอร์ด => Tutorial (ห้ามตั้งคำถามห้องนี้) => หัวข้อเริ่มโดย: flukenakrab ใน 14 มิถุนายน 2009, 21:58:18

ชื่อเรื่อง: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: flukenakrab ใน 14 มิถุนายน 2009, 21:58:18
คุณมีปัญหาในการทำ favicon หรือไม่ ?

ถ้าหากคุณมีปัญหาดังนี้
ทำ favicon ไม่เป็น
ทำ favicon ออกมาแล้วไม่สวย











เราไม่สอน !

ที่ผมจะสอนคือ วิธีทำ favicon ให้มีความละเอียดสูงครับ  :D

หลายๆท่าน (รวมทั้งผมในอดีต) ใช้ favicon generator ตามเว็บต่างๆ ซึ่งสะดวกรวดเร็ว คลิก 3 ทีได้ออกมาเลย
แต่!!! มันไม่ละเอียด ภาพที่ถูก gen ผ่านเว็บมันจะถูกตัดแสงเงาออกไปเหลือเป็น pixel น่าเกลียดๆ

วันนี้ผมมาแนะนำวิธีใหม่ครับ ภาพสวยละเอียดอย่างโปร

1. เมื่อท่านใช้ Photoshop ทำภาพ favicon ขนาด 16x16 pixel แล้ว (ความสวยงามขึ้นอยู่กับ ทักษะโฟโต้ช็อปท่านเอง)
2. ให้ท่าน Save เป็นไฟล์ favicon.bmp ย้ำว่า "bmp" เอาแบบ Full HD ไปเลยครับ





3. มาถึงตรงนี้ท่านจะรู้ว่า Photoshop CS4 มันไม่มี bmp ให้เลือก 555 (ผมก็พึ่งรู้เมื่อกี้) ก็ให้เลือกเป็น Save As > .PNG ไปก่อนครับ
4. เปิดโปรแกรม Paint ขึ้นมาครับ  เปิดไฟล์ favicon.png ที่เซฟไว้เมื่อกี้ แล้ว File > Save As > เลือกเป็น .bmp (Bitmap)
5. อั๊พไฟล์ favicon.bmp ลงโฮสไว้ที่ตำแหน่งเดียวกับ favicon เดิมของท่าน (ลบอันเก่าออกในขั้นตอนนี้เลยครับ)
6. เสร็จแล้ว คลิกขวาที่ favicon.bmp > rename > เปลี่ยนชื่อเป็น favicon.ico

ทีนี้ favicon ของเว็บท่านก็จะมีรายละเอียดสูงไม่ผิดแผลกไปจากเดิมครับ


ปล.ไม่หวัง Thanks เพระาได้ ebook แล้ว แต่ก็ยังอยากได้เยอะๆอยู่ครับ เท่ห์ดี   ;D
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: mapandy ใน 14 มิถุนายน 2009, 22:01:55
+1  ขอบคุณครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: riaoma ใน 14 มิถุนายน 2009, 22:07:50
ไว้ต้องลอง  ::) ขอบคุณมากค่ะ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: Tonkung ใน 14 มิถุนายน 2009, 22:17:01
อะไรมันจะง่ายขนาดนี้ :D
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: tapo ใน 14 มิถุนายน 2009, 22:21:38
ขอบคุณมากครับ +1 เป็นประโยชน์มากๆ เพราะผมก็เจอปัญหาใช้ตัวอื่นทำแล้วมันไม่ละเอียด ดูแทบไม่รู้ว่ารูปอะไร
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: kanate ใน 16 มิถุนายน 2009, 09:00:46
ขอบคุณมากครับ ไม่จะไปลองทำดูครับ +1 :-\
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: riaoma ใน 16 มิถุนายน 2009, 09:12:27
เมื่อคืนจะลองเอาวิธีนี้ไปใช้ดู เพราะ favicon ที่ใช้อยู่มันไม่ชัด
แต่พอเราย่อรูปเพื่อจะบันทึกเป็น bmp มันก็ไม่ชัดแล้วค่ะ  :(
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: zenar218 ใน 16 มิถุนายน 2009, 09:33:45
ผมใช้เว็บนี้ครับ

http://www.html-kit.com/favicon

ทำไฟล์ 265*256 pixels
แล้วอัพโหลดขึ้นไป พอเป็น 16*16ก็ยังคมชัดอยู่




ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: GF2007 ใน 16 มิถุนายน 2009, 09:47:44
+1 ครับ  :)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: barbies55 ใน 16 มิถุนายน 2009, 09:52:12
ขอบคุณมากค่ะ ปกติทำเป็น pngไปเลย
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: iNspIr@Tion ใน 16 มิถุนายน 2009, 10:35:59
ขอบคุณครับ จะลองดู
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: riaoma ใน 16 มิถุนายน 2009, 13:49:15
+1 flukenakrab

อ้างถึงจาก: zenar218 ใน 16 มิถุนายน 2009, 09:33:45
ผมใช้เว็บนี้ครับ

http://www.html-kit.com/favicon

ทำไฟล์ 265*256 pixels
แล้วอัพโหลดขึ้นไป พอเป็น 16*16ก็ยังคมชัดอยู่
+1

ขอบคุณทั้งคู่ค่ะ  ยังชัดเท่าเดิมอยู่ คิดว่าเป็นปัญหาที่รูปมากกว่า อาจจะไม่เหมาะเวลาย่อขนาดลงมา หรือว่าเรื่องมากเองเนี่ย :P
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: Kaeji ใน 16 มิถุนายน 2009, 14:16:58
:)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: mairoo ใน 16 มิถุนายน 2009, 14:37:40
ขอบคุณมากครับ จะลองทำตามดูครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: Chang ใน 16 มิถุนายน 2009, 15:54:29
ขอบคุณสำหรับเทคนิคครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: สดซาเล้ง ใน 16 มิถุนายน 2009, 15:56:30
อ้างถึงจาก: flukenakrab ใน 14 มิถุนายน 2009, 21:58:18
คุณมีปัญหาในการทำ favicon หรือไม่ ?

6. เสร็จแล้ว คลิกขวาที่ favicon.bmp > rename > เปลี่ยนชื่อเป็น favicon.ico


ทุกวันนี้เขาเล่่นเปลี่ยนกันดื้อๆ เลยหรอครับ....
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: elrarour ใน 16 มิถุนายน 2009, 16:03:35
 :o :o :o
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: Synchronize ใน 16 มิถุนายน 2009, 16:06:58
อ้างถึงจาก: flukenakrab ใน 14 มิถุนายน 2009, 21:58:183. มาถึงตรงนี้ท่านจะรู้ว่า Photoshop CS4 มันไม่มี bmp ให้เลือก 555 (ผมก็พึ่งรู้เมื่อกี้) ก็ให้เลือกเป็น Save As > .PNG ไปก่อนครับ

มันไม่มีเหรอครับ ... ผมว่าผมยังเซฟได้อยู่เลย

(http://img.ihere.org/uploads/5e3cf93bdc.jpg)

:P
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: TAXZe ใน 16 มิถุนายน 2009, 16:11:53
โอวแจ่มๆๆ

ปกติ เปลี่ยนนามสกุล สด

:D
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: thaiga ใน 16 มิถุนายน 2009, 16:30:47
อ้างถึงจาก: Synchronize ใน 16 มิถุนายน 2009, 16:06:58
อ้างถึงจาก: flukenakrab ใน 14 มิถุนายน 2009, 21:58:183. มาถึงตรงนี้ท่านจะรู้ว่า Photoshop CS4 มันไม่มี bmp ให้เลือก 555 (ผมก็พึ่งรู้เมื่อกี้) ก็ให้เลือกเป็น Save As > .PNG ไปก่อนครับ

มันไม่มีเหรอครับ ... ผมว่าผมยังเซฟได้อยู่เลย

(http://img.ihere.org/uploads/5e3cf93bdc.jpg)

:P

มีสิครัีบ สงสัยหาไม่เจอ  :D
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: ol3omlo ใน 16 มิถุนายน 2009, 16:35:07
แจ๋ว เลย
กำลังทำอยู่พอดี ใส่ทุกเว็บเลย
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: kkusd ใน 16 มิถุนายน 2009, 18:01:12
เอาไปเล่นมั่ง  ;) ;)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: flukenakrab ใน 16 มิถุนายน 2009, 19:21:23
อ้างถึงจาก: Synchronize ใน 16 มิถุนายน 2009, 16:06:58
อ้างถึงจาก: flukenakrab ใน 14 มิถุนายน 2009, 21:58:183. มาถึงตรงนี้ท่านจะรู้ว่า Photoshop CS4 มันไม่มี bmp ให้เลือก 555 (ผมก็พึ่งรู้เมื่อกี้) ก็ให้เลือกเป็น Save As > .PNG ไปก่อนครับ

มันไม่มีเหรอครับ ... ผมว่าผมยังเซฟได้อยู่เลย

(http://img.ihere.org/uploads/5e3cf93bdc.jpg)

:P

ผมพลาดเองครับ สงสัยไปติ๊กอะไรไว้แน่เลย   :'(
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: nobitalk ใน 16 มิถุนายน 2009, 19:28:28
ผมจัดไปให้ +1 เลยครับ 8)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: easyeasy ใน 16 มิถุนายน 2009, 20:59:46
ขอบคุณครับ จะลองไปทำดูครับ ;D
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: idee ใน 16 มิถุนายน 2009, 22:22:58
ขอบคุณครับเดี๋ยวเอาไปลองดูก่อน :)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: loner ใน 23 กันยายน 2009, 21:12:43
ไว้ลองดูครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: GigBoT ใน 23 กันยายน 2009, 21:20:10
อ่ะไรมันง่ายและแจ่ม....ขนาดนี้  :-* :-*
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: แมวมีเจ้าของ ใน 23 กันยายน 2009, 21:22:37

ความรู้ใหม่เลยครับ

เรื่องง่ายๆที่ถูกมองข้าม  :o
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: shidoshide ใน 23 กันยายน 2009, 22:36:04
ขอบคุณครับ เคยมีแต่ภาพแตกๆ  :)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: PAPAP ใน 23 กันยายน 2009, 22:53:32
Thank  :)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: pizad_sura ใน 23 กันยายน 2009, 22:55:29
555+ Full HD เลยเหรอ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: holychocolate ใน 23 กันยายน 2009, 22:59:46
 ??? ??? :-[ ว่าแต่ favicon มันคืออะไรครับ  ???
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: SHIINZ ใน 23 กันยายน 2009, 23:07:20
อ้างถึงจาก: holychocolate ใน 23 กันยายน 2009, 22:59:46
??? ??? :-[ ว่าแต่ favicon มันคืออะไรครับ  ???

Icon รูปเล็ก ๆ ที่เป็นสัญลักษณ์ของเวปนั้น ๆ หนะครับ เวลา Bookmark ไว้ที่ Tool Bar จะสังเกตุเห็น
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: PositiveThinking ใน 23 กันยายน 2009, 23:33:17
ขอบคุณครับ +1
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: SeO_ToshI ใน 23 กันยายน 2009, 23:38:58
ขอบคุณครับผม
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: holychocolate ใน 23 กันยายน 2009, 23:48:21
อ้างถึงจาก: SHIINZ ใน 23 กันยายน 2009, 23:07:20
อ้างถึงจาก: holychocolate ใน 23 กันยายน 2009, 22:59:46
??? ??? :-[ ว่าแต่ favicon มันคืออะไรครับ  ???

Icon รูปเล็ก ๆ ที่เป็นสัญลักษณ์ของเวปนั้น ๆ หนะครับ เวลา Bookmark ไว้ที่ Tool Bar จะสังเกตุเห็น
:-[ :-[ อ๋อ ขอบคุณครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: iah(carus) ใน 23 กันยายน 2009, 23:51:42
มาเก็บความรู้ครับ
Many Thanks
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: VaKimZa ใน 24 กันยายน 2009, 00:04:02
ลองจิ้มๆ ไปอ่ะ เป็นปลื้มครับ ไม่ผิดหวัง  ;D
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: เก๋าลัดคุง ใน 24 กันยายน 2009, 00:06:58
ใช้บริการ Web Service ขอแนะนำ ww.favicon.cc  ::)
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: SerBeSt ใน 24 กันยายน 2009, 04:43:12
 >:(
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: DSignerYoung ใน 25 กันยายน 2009, 00:32:29
ง่ายมากๆ

แต่ถ้าไม่รู้เนี่ย ยากไปเลย หุหุ ขอบคุณครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: headmaster ใน 25 กันยายน 2009, 14:06:09
ขอบคุณครับ  :wanwan004:
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: moneylicker ใน 23 ตุลาคม 2009, 20:52:31
ขอลคุณค้าบบบบ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: sugar ใน 23 ตุลาคม 2009, 21:48:04
อ้างถึงจาก: riaoma ใน 16 มิถุนายน 2009, 13:49:15
+1 flukenakrab

อ้างถึงจาก: zenar218 ใน 16 มิถุนายน 2009, 09:33:45
ผมใช้เว็บนี้ครับ

http://www.html-kit.com/favicon

ทำไฟล์ 265*256 pixels
แล้วอัพโหลดขึ้นไป พอเป็น 16*16ก็ยังคมชัดอยู่
+1


ขอบคุณทั้งคู่ค่ะ  ยังชัดเท่าเดิมอยู่ คิดว่าเป็นปัญหาที่รูปมากกว่า อาจจะไม่เหมาะเวลาย่อขนาดลงมา หรือว่าเรื่องมากเองเนี่ย :P



ใจจ้าสะดวกดีครับ  :wanwan016:
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: Growth ใน 23 ตุลาคม 2009, 22:08:30
แหล่มเลยครับ +1 เลย
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: Normaderm ใน 23 ตุลาคม 2009, 22:12:13
โห คิดได้ไงเนี้่ย  :wanwan017:
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: kipkae ใน 23 ตุลาคม 2009, 22:15:37
ขอบคุณคร๊าบ... แต่อยากรู้เพิ่มเติมว่า การทำ Favicon มันจะทำให้เว็บโหลดนานขึ้นรึเปล่าครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: yogolas101 ใน 23 ตุลาคม 2009, 22:25:57
<LINK REL="SHORTCUT ICON" HREF="url รูป icon" />

รูปนามสกุลอะไรก็ได้ ขนาดเท่าไหร่ก็ได้ ใส่ลงไปเลยครับ
รูปเคลื่อนไหวยิ่งดูเก๋ไปอีกแบบ
ลองเขียน html ดูก่อนก็ได้ ง๊ายง่าย
:wanwan011:

ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: mastergtx ใน 23 ตุลาคม 2009, 22:36:14
ไฟล์ .bmp เป็นการเข้ารหัสรูปที่มีขนาดใหญ่เกินไปอยู่แล้ว (ปัญหาดาวน์โหลดเพจจะตามมา) และที่บอกว่า เปลี่ยนสกุลไฟล์จาก .bmp มาเป็น .ico ยิ่งไปกันใหญ่
ที่จริงๆ PS มีปลั๊กตัวนี้แล้วนะ ชื่อของมันคือ ICOFormat ลองค้นหาดูที่ google
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: ChickenVRs ใน 23 ตุลาคม 2009, 22:56:44
 :wanwan013: ขอบคุณคร๊าบ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: ~SolariS~ ใน 28 ตุลาคม 2009, 01:42:17
โอ้ว อย่างนี้ต้องลองครับ

แต่ตอนนี้โฮสผมล่มซะงั้น ไม่รู้เป็นไร  :-X

แต่ยังไงก็ขอบคุณมากครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: t_doyoumv ใน 28 ตุลาคม 2009, 02:09:20
โหยผมก็ทำตั้งนานแล้วครับนึกงว่าพี่ๆๆรู็แล้วอะอิอิ แต่ก้อไม่เป็นรัยครับขอบคุณมากๆๆๆ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: gotdwata ใน 28 ตุลาคม 2009, 04:06:17
+1 ครับ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: archi ใน 28 ตุลาคม 2009, 07:28:09
เยี่ยมคับ ใช้ได้ทั้ง IE กะ Firefox ป่าวอ่ะ
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: E_ZY ใน 05 พฤศจิกายน 2009, 03:10:56
อยากทำไอคอนสวยๆแบบmcafee
ชื่อเรื่อง: Re: วิธีทำ favicon แบบความละเอียดสูง [Full HD]
โพสต์โดย: powerbeer001 ใน 08 พฤศจิกายน 2009, 13:23:27
ลองทำแล้วยุดยอดครับ  :wanwan017:  :wanwan020: