# คู่มือทำ Favicon สำหรับเว็บธุรกิจจำลอง
## เป้าหมาย
Favicon คือรูปไอคอนเล็ก ๆ ที่แสดงบนแท็บ Browser, Bookmark และบางหน้าจอมือถือ นักศึกษาสามารถสร้างรูป favicon ด้วย AI แล้วนำไปวางในเว็บที่แตกจากไฟล์ ZIP ได้
## วางไฟล์ไว้ที่ไหน
ให้วางไฟล์รูป favicon ในโฟลเดอร์นี้:
```text
htdocs/assets/img/
```
แนะนำชื่อไฟล์:
```text
htdocs/assets/img/favicon.png
htdocs/assets/img/apple-touch-icon.png
```
ถ้ามีนักศึกษาทำไฟล์เดียว ให้ใช้แค่:
```text
htdocs/assets/img/favicon.png
```
## Copy Code ไปแทรกตรงไหนของ index.php
เปิดไฟล์:
```text
htdocs/index.php
```
หาแท็ก `` ด้านบนของไฟล์ แล้ววางโค้ดนี้ไว้ในส่วน `` แนะนำให้วางหลังบรรทัด `...` และก่อน ``
```html
```
ถ้ามีไฟล์เดียว ให้ใช้โค้ดนี้:
```html
```
ตัวอย่างตำแหน่งใน `index.php`:
```html
<?= h($settings['site_name']) ?>
```
## ขนาดรูปที่แนะนำ
- `favicon.png` แนะนำ 512 x 512 px หรือ 1024 x 1024 px
- `apple-touch-icon.png` แนะนำ 180 x 180 px
- ใช้ไฟล์ `.png`
- พื้นหลังควรเรียบ อ่านชัดเมื่อย่อเล็ก
- หลีกเลี่ยงตัวหนังสือยาว เพราะ favicon มีขนาดเล็กมาก
- ใช้สัญลักษณ์ 1 ชิ้น เช่น แก้วน้ำ, จานอาหาร, เค้ก, ดอกไม้, กระเป๋า, กล่องของขวัญ
## ขั้นตอนทำงาน
1. เลือก Prompt ให้ตรงกับธุรกิจ
2. ให้ ChatGPT หรือ AI สร้างรูปไอคอนแบบ square
3. ดาวน์โหลดเป็น PNG
4. เปลี่ยนชื่อไฟล์เป็น `favicon.png`
5. วางไฟล์ใน `htdocs/assets/img/`
6. Copy code favicon ไปวางใน `` ของ `index.php`
7. อัปโหลด `index.php` และไฟล์รูปขึ้น Server
8. เปิดเว็บใหม่ ถ้า Browser ยังไม่เปลี่ยน icon ให้กด refresh แบบล้าง cache หรือเปิด incognito
## ไฟล์ที่ต้องอัปโหลดขึ้น Server
```text
htdocs/index.php
htdocs/assets/img/favicon.png
htdocs/assets/img/apple-touch-icon.png
```
ถ้าใช้ไฟล์เดียว:
```text
htdocs/index.php
htdocs/assets/img/favicon.png
```