วิธีสร้าง Favicon.ico: 5 ขั้นตอน (พร้อมรูปภาพ)

สารบัญ:

วิธีสร้าง Favicon.ico: 5 ขั้นตอน (พร้อมรูปภาพ)
วิธีสร้าง Favicon.ico: 5 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีสร้าง Favicon.ico: 5 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีสร้าง Favicon.ico: 5 ขั้นตอน (พร้อมรูปภาพ)
วีดีโอ: การทำภาพคุณภาพต่ำให้มีความคมชัดสูงด้วย Photoshop 2024, เมษายน
Anonim

เมื่อคุณเยี่ยมชมเว็บไซต์ เช่น Google, Yahoo หรือ wikiHow คุณอาจสังเกตเห็นว่ามีไอคอนเล็กๆ ทางด้านซ้ายของแถบที่อยู่ สิ่งนี้เรียกว่า favicon และคุณสามารถสร้างเว็บไซต์ของคุณเองได้ นอกจากจะทำให้ไซต์ของคุณมีความเป็นมืออาชีพมากขึ้นแล้ว ไอคอนจะปรากฏในบุ๊กมาร์กของผู้ใช้ถัดจากหน้าใดๆ ในไซต์ของคุณที่พวกเขาใส่ไว้ในรายการโปรด ซึ่งจะช่วยให้ค้นหาไซต์ของคุณได้ง่ายขึ้น

ขั้นตอน

สร้าง Favicon.ico ขั้นตอนที่ 1
สร้าง Favicon.ico ขั้นตอนที่ 1

ขั้นตอนที่ 1. สร้างภาพที่มีขนาด 16x16 พิกเซล

ควรเป็นภาพที่เรียบง่ายเพื่อให้จดจำได้ทันที

สร้าง Favicon.ico ขั้นตอนที่ 2
สร้าง Favicon.ico ขั้นตอนที่ 2

ขั้นตอนที่ 2 แปลงรูปภาพเป็นไฟล์ favicon.ico

ต้องเรียกตรงนี้ มิฉะนั้นเบราว์เซอร์จะไม่รู้จัก วิธีง่ายๆ ในการทำเช่นนี้คือการใช้ตัวสร้างไดนามิกไดรฟ์ FavIcon อีกวิธีหนึ่งคือใช้โปรแกรมแก้ไขรูปภาพฟรี GIMP และบันทึกภาพขนาด 16x16 ในรูปแบบ ICO

สร้าง Favicon.ico ขั้นตอนที่ 3
สร้าง Favicon.ico ขั้นตอนที่ 3

ขั้นตอนที่ 3 อัปโหลดไฟล์ที่สร้างขึ้นไปยังเว็บไซต์ของคุณ

สร้าง Favicon.ico ขั้นตอนที่ 4
สร้าง Favicon.ico ขั้นตอนที่ 4

ขั้นตอนที่ 4 เพิ่มโค้ดต่อไปนี้ลงใน HTML ของเว็บไซต์ของคุณ

คุณควรวางไว้ในส่วนของโค้ด และตรวจสอบให้แน่ใจว่าเส้นทางไปยังไอคอนนั้นถูกต้อง สัมพันธ์กับหน้าเว็บ รหัสดังต่อไปนี้ (สมมติว่าทั้ง.html และ.ico อยู่ในไดเรกทอรีบนสุดเดียวกัน):

สร้าง Favicon.ico ขั้นตอนที่ 5
สร้าง Favicon.ico ขั้นตอนที่ 5

ขั้นตอนที่ 5. รีเฟรชหน้า ถอยกลับ และชื่นชมไอคอนใหม่ที่สวยงามของเว็บไซต์ของคุณ

เคล็ดลับ

  • แม้ว่าไอคอนของคุณจะเล็กมาก แต่ให้แน่ใจว่าคนอื่นสามารถอ่าน/ทำความเข้าใจได้ง่าย
  • หากคุณใช้ Linux คุณสามารถแปลงไฟล์บนคอมพิวเตอร์ของคุณได้โดยตรง เพียงเลือกรูปภาพที่เหมาะสม เปิดบรรทัดคำสั่ง นำทางไปยังไดเร็กทอรีที่คุณจัดเก็บรูปภาพและพิมพ์: convert picture-p.webp" />

แนะนำ: