Aummua Blog » favicon http://www.aummua.com บล๊อกของนายอุ้มสุดหล่อ Mon, 17 Jan 2011 19:14:10 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 มาทำ favicon ใส่ติดเว็บกันเถอะ http://www.aummua.com/howto-make-favicon/ http://www.aummua.com/howto-make-favicon/#comments Fri, 05 Jun 2009 11:05:31 +0000 admin http://www.aummua.com/?p=56 favicon

icon เล็ก ๆ ที่อยู่หน้า url ตัวนี้ เรียกกันว่า favicon (เฟฟ’ ไอคอน) มาจากคำว่า favourite+icon นั่นเอง หรือจะเรียก web title icon หรือจะเรียก bookmark icon หรือจะเรียก logo หรือจะเรียก ตุ่ม ไต อะไรก็ได้…เพ้อแล้ว
ทำไปเพื่ออะไรกันครับ favicon เนี่ย คำตอบคือมันสวยดี แป่ววววว ไม่ช่ายยย… ก็น่าจะมีไว้ก็เพื่อให้หน้าเวบเราหาง่ายขึ้นนะ เวลาเราเปิดหลาย ๆ tab แล้วไอ้ เจ้า icon เล็ก ๆ เนี่ยยังบ่งบอกความเป็นเว็บของคุณด้วยน๊า ว่ามันดูดีมีสไตล์ขนาดไหน วิธีการทำก็ไม่ต้อง download plug-in มาลง photoshop ให้ save เป็นนามสกุล .ico อ๊ะยุ่งยาก ไม่ต้องสร้างภาพเอง ให้เป็นขนาดเท่านั้นเท่านี้ อ๊ะยุ่งยากไป

วิธีการง่าย ๆ ที่จะทำกันแบบหน้าด้าน ๆ เลย
1. เปิดภาพขึ้นมาก่อน ด้วยโปรแกรม photoshop (ภาพนี้มาจาก emotion ใน msn คมชัดดีด้วย เอารูปส้งตีนนี่ล่ะ)

2. กำหนดภาพมาให้มีขนาด 16×16 pixel กด ok ไป
จากนั้นก็ save ภาพเป็น .gif ให้มีพื้นหลังเป็น transparent

3.เข้าไปที่ web dynamicdrive

4. (1) browse ภาพที่เราทำไว้ขึ้นมา
(2) เลือกตรง Optional
จะเอา  Merge with a 32×32 desktop icon.  หรือ
จะเอา  Merge with a 48×48 large XP icon.
(3) กด Create Icon
(4) มันจะแสดงผลลัพท์ให้ดู
(5) เลื่อนเมาส์ลงมานิดนึง จะเจอให้ดาวน์โหลด กดเลยครับ

5.อัพโหลดภาพขึ้นไปบนโฮสต์ จากนั้นใส่โค้ด นี้ในส่วน <head> ของหน้า html

<link rel=”shortcut icon” href=”http://www.divland.com/favicon.ico” />

อีเว็บที่น่าสนใจ

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

thanks : http://www.baamang.com/webboard/index.php?topic=241.0

]]> http://www.aummua.com/howto-make-favicon/feed/ 2