Favicon คืออะไรสำคัญอย่างไรกับเว็บไซต์


สวัสดีครับวันนี้ผมจะมาพูดถึงเรื่อง Favicon หรือเจ้ารูปสัญลักษณ์ที่ติดอยู่แท็บบนสุดซ้ายมือของเกือบทุกเว็บไซต์ซึ่งเราน่าจะสังเกตเห็นความแตกต่างของแต่ละรูปกันบ่อยๆ  Favicon มาจาก คำว่า favorite + icon=favicon บางทีก็เรียก shortcut icon, website icon, tab icon หรือ bookmark icon ก็คือ icon ที่อยู่ตรงหน้า http:// ที่บ่งบอกความเป็นเว็บไซต์ของคุณ เช่นเดียวกับ icon ที่อยู่บนหน้า desktop อีกอย่างที่มีประโยชน์ไม่แพ้กันก็คือ ใช้เพื่อแสดง Icon ที่หน้า Bookmark ทำให้สะดวกรวดเร็วต่อการคัดแยกมากยิ่งขึ้นเวลาไปดูที่หน้า Bookmark

ทำไมต้องมี favicon

  1. ทำให้เว็บเราดูสวยขึ้น
  2. ทำให้ผู้เยี่ยมชมสามารถจดจำเว็บไซต์เราได้ จากภาพหรือสัญลักษณ์ เหมือนที่เราจำไอคอนของ Google, Gmail, Facebook ,YouTube ได้นั่นแหละครับ
  3. เวลาที่กด Bookmarks หรือ บันทึกหน้าเว็บไซต์นั้นไว้เป็นรายการโปรด เราจะสามารถเห็นไอคอนนั้นได้อย่างเด่นชัด

Favicon คืออะไรสำคัญอย่างไรกับเว็บไซต์

favicon เป็นไฟล์รูปภาพ นามสกุล .ico นิยมใช้เป็นรูปโลโก้ของเว็บไซต์ หรือเป็นรูปที่มีรายละเอียดน้อยเพราะขนาดรูปเล็ก เพียง 16 x 16 pixel

ปัจจุบัน favicon จะเป็นไฟล์ .ico, .gift หรือ .png ก็ได้ โปรแกรมเว็บเบราเซอร์เวอร์ชั่นใหม่ๆ สามารถที่จะแสดงผลได้ รวมถึงขนาดรูปเพิ่มขึ้น จะเป็น 32×32, 48×48, หรือ 64×64 pixel ก็ได้ครับ

Favicon คืออะไรสำคัญอย่างไรกับเว็บไซต์
เรามาดูกันดีกว่าว่าเจ้า Favicon มันทำยังไงกันแน่ บอกเลยว่าทำง่ายมากครับ ไม่ต้องมีความรู้เรื่องดีไซน์ ก็สามารถทำได้เลยง่ายๆ

วิธีทำ Favicon

1.อย่างแรกเลยคือเตรียมไฟล์ icon ซึ่งมีนามสกุลเป็น .ico , .gift , .png หรือตามตารางด้านบน อาจจะทำภาพ favicon เป็นขนาด 16×16, 32×32, 48×48, หรือ 64×64 pixel แล้วแต่เวอร์ชั่นของเว็บเบราเซอร์ แล้วนำรูปมาแปลงเป็นไฟล์ icon (.ico) หรือตามตารางด้านบน ก็ได้โดยใช้โปรแกรมต่างๆ ช่วยแปลง เช่น picture to icon,Photoshop เป็นต้น

หรือเข้าไปใช้บริการแปลงไฟล์จากเว็บไซต์ และนี่คือ List เว็บไซต์ที่ช่วยในการทำ Favicon แบบง่ายสุดๆ เพียงแค่หารูปภาพต้นฉบับมาอัพโหลด มันก็จะกลายเป็น Favicon สวยได้ในทันที

-Favicon CC

-Favicon Generator

-Dynamic Drive Favicon Tool

-Chami Favicon Service

-Favicon Generator ORG

-Favicon UK

-Degraeve Favicon

-Anti-Favicon

-Gen Favicon

-Favigen

ถ้าเกิดว่ายังนึกไม่ออกว่าจะทำ Icon เป็นแนวไหนก็สามารถหาแนวทางได้จากเว็บไซต์เหล่านี้ได้เลย

-Fine Icons

-The Favicon Gallery

-Delta Tango Bravo

-Fresh Favicons

Favicon คืออะไรสำคัญอย่างไรกับเว็บไซต์

2.วิธีนำไปใช้ก็เพียงแค่เราอัพโหลด ไฟล์ .ico หรืออื่นๆ ของคุณลงบนโฮสต์ แล้ว path ชื่อไฟล์ให้ถูกต้อง ตามโค้ดด้านล่างนี้ ใส่ส่วนของ head ของ ไฟล์ index.html

<link rel=”shortcut icon” type=”image/x-icon” href=” http://yourwebsite.com/favicon.ico”>

แต่หากใช้ wordpress ก็นำไปใส่ตรง head ในไฟล์ของ header.php (หรือปลั๊กอิน User avata)

<link rel=”shortcut icon” type=”image/x-icon” href=”<?php bloginfo(‘url’) ?>/favicon.ico”>

หรือใน wordpress เวอร์ชั่นใหม่ก็ง่ายๆเลยครับตามรูปด้านล่างครับ

Favicon คืออะไรสำคัญอย่างไรกับเว็บไซต์

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

ถึงแม้ว่า Favicon จะเหมือนสิ่งที่ไม่สำคัญต่อเว็บไซต์ และไม่น่าจะมีคนสังเกตเห็นเท่าไหร่นัก แต่จริงๆแล้วเจ้า Favicon  มันเป็นส่วนที่มีผลต่อตัวเว็บไซต์ของเราเป็นอย่างมาก เป็นการสร้างเอกลักษณ์ อีกทั้งยังถือว่าเป็นหน้าเป็นตาของเว็บไซต์เราอีกด้วย ลองสังเกตเว็บไซต์ดังๆสิครับ อย่าง Facebook , Google ,YouTube เราไม่ต้องดูชื่อก็ได้นะครับเพียงเห็นเจ้า Favicon เล็กๆแวบเดียวเราก็รู้แล้วว่าคือเว็บไซต์อะไร รู้ตัวอีกทีเผลอกดไปใช้งานเรียนร้อยแล้ว… เห็นแล้วใช่ไหมครับ เจ้า Favicon อาจเป็นตัวประกอบแต่ขาดไม่ได้เลยจริงๆนะครับ…

 

Comments

comments


Like it? Share with your friends!

1 SHARES
426
1 SHARES, 426 points

Favicon คืออะไรสำคัญอย่างไรกับเว็บไซต์

log in

Captcha!

reset password

Back to
log in
Choose A Format
Personality quiz
Trivia quiz
Poll
Story
List
Open List
Ranked List
Meme
Video
Audio
Image