แอตทริบิวต์ sizes ของแท็ก <link rel="icon"> ใช้ระบุขนาดของไอคอน (favicon) เพื่อให้เบราว์เซอร์เลือกไอคอนที่เหมาะสมกับอุปกรณ์และบริบทต่างๆ
รูปแบบการใช้งาน
<link rel="icon" href="icon.png" type="image/png" sizes="32x32">ตัวอย่างการใช้งานหลายขนาด
<!DOCTYPE html>
<html>
<head>
<!-- ไอคอนหลายขนาดสำหรับอุปกรณ์ต่างๆ -->
<link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">
<link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="icon" href="favicon-64x64.png" type="image/png" sizes="64x64">
<link rel="icon" href="favicon-128x128.png" type="image/png" sizes="128x128">
<link rel="icon" href="favicon-256x256.png" type="image/png" sizes="256x256">
<link rel="icon" href="favicon-512x512.png" type="image/png" sizes="512x512">
<!-- สำหรับ Apple devices -->
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png" sizes="180x180">
<!-- Manifest สำหรับ PWA -->
<link rel="manifest" href="manifest.json">
</head>
<body>
<p>หน้านี้มี favicon หลายขนาด</p>
</body>
</html>ขนาดมาตรฐานที่ควรเตรียม
| ขนาด (px) | การใช้งาน |
|---|---|
| 16×16 | Browser tab, bookmarks bar |
| 32×32 | Windows taskbar, high-DPI tabs |
| 48×48 | Windows site icons |
| 64×64 | High-DPI Windows |
| 128×128 | Chrome Web Store, app launchers |
| 180×180 | iOS home screen (apple-touch-icon) |
| 192×192, 512×512 | Android/Chrome PWA (manifest.json) |
แนวทางปฏิบัติสมัยใหม่ (Modern Approach)
แทนที่จะ宣告ทีละแท็ก ให้ใช้ Web App Manifest (manifest.json) ร่วมกับ <link rel="manifest">:
// manifest.json
{
"name": "My App",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#317EFB",
"background_color": "#317EFB",
"display": "standalone"
}เครื่องมือช่วยสร้าง
- RealFaviconGenerator - สร้างชุดไอคอนครบครัน + manifest
- Favicon Generator - ใช้งานง่าย ฟรี
- ImageMagick / Sharp (Node.js) - สำหรับ automation
