favicon ไอคอนเพื่อแสดงความเป็นตัวตนผ่านเว็บ

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

เว็บไซต์ต่างๆ จึงควรปรับเพิ่ม Favicon ให้กับเว็บด้วยทุกครั้ง โดยการใช้โปรแกรมกราฟิกต่างๆ ออกแบบในขนาด 16 x 16 พิกเซล บันทึกในชื่อ favicon โดยมีส่วนขยายเป็น .ico และระบุ HTML Code ใน Head Section ของไฟล์ HTML

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

การสร้าง Favicon สามารถใช้วิธีการแปลงไฟล์ภาพที่มีอยู่เดิมได้ด้วยบริการออนไลน์ เช่น

• FavIcon from Pics
  
• Favigen

อย่างไรก็ดีด้วยเทคโนโลยีที่ปรับเปลี่ยน ทำให้มี Favicon รูปแบบใหม่ เกิดขึ้น ดังนี้

• 16px: For general use in all browsers, could be displayed in the address bar, tabs or bookmarks views!
• 24px: Pinned Site in Internet Explorer 9
• 32px: New tab page in Internet Explorer, taskbar button in Windows 7+ and Safari’s ‘Read Later’ sidebar
• 57px: Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
• 72px: iPad home screen icon
• 96px: Favicon used by the GoogleTV platform
• 114px: iPhone 4+ home screen icon (twice the standard size for the retina display)
• 128px: Chrome Web Store
• 195px: Opera Speed Dial

ดังนั้น สามารถใช้แฟ้มภาพแบบ Transparent .PNG มากำหนดเป็น Favicon ได้เช่นกัน และระบุ HTML Code เป็น

<link rel=”icon” type=”image/png” href=”/favicon.png” />

กรณีที่เป็น Favicon สำหรับ Opera Speed Dital ให้กำหนด HTML Code เป็น

<link rel=”icon” type=”image/png” href=”195x195image.png”>

หรือกรณี iPhone

<link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”apple-touch-icon- 114×114-precomposed.png&rdquo;>

กรณี iPad

<link rel=”apple-touch-icon-precomposed” sizes=”72×72″ href=”apple-touch-icon- 72×72-precomposed.png”>