วิธีการทำงาน

เลือกแหล่งที่มาของคุณ

อัปโหลดรูปภาพ สร้างจากข้อความด้วยฟอนต์ที่กำหนดเอง เลือกจากอีโมจินับร้อย หรือวาดพิกเซลอาร์ต วิเคราะห์ URL ใดก็ได้เพื่อดึง favicon ที่มีอยู่

ปรับแต่ง & ดูตัวอย่าง

ปรับพื้นหลัง การไล่ระดับสี ความมน และเอฟเฟกต์ ดูตัวอย่าง favicon ของคุณในแท็บเบราว์เซอร์ หน้าจอหลัก iOS Android และ Windows แบบเรียลไทม์

สร้าง & ดาวน์โหลด

สร้างทุกขนาดด้วยคลิกเดียว ดาวน์โหลดแพ็คเกจที่สมบูรณ์พร้อมตัวอย่างโค้ดที่พร้อมใช้งานสำหรับ 35+ เฟรมเวิร์ก

สี่วิธีในการสร้าง Favicon ของคุณ

อัปโหลดรูปภาพ

เริ่มด้วยรูปภาพใดก็ได้ — PNG, JPG, SVG หรือ WebP เพิ่มพื้นหลัง ปรับระยะห่าง ความสว่าง คอนทราสต์ และใช้มุมมน เหมาะสำหรับโลโก้และสินทรัพย์แบรนด์ที่มีอยู่

ข้อความเป็น Favicon

สร้าง favicon แบบข้อความด้วย 1500+ Google Fonts เลือกน้ำหนักฟอนต์ สี และเพิ่มพื้นหลังสีทึบหรือไล่ระดับสี เหมาะสำหรับไอคอนแบรนด์แบบตัวอักษรที่เรียบง่าย

อีโมจิ Favicon

เลือกจากอีโมจินับร้อยใน 12 หมวดหมู่รวมถึงธงชาติทั้งหมด เพิ่มพื้นหลังสีด้วยพรีเซ็ตหรือการไล่ระดับสีที่กำหนดเองเพื่อรูปลักษณ์ที่สวยงาม

ผืนผ้าใบพิกเซลอาร์ต

วาด favicon ของคุณเองทีละพิกเซลบนตารางที่ปรับแต่งได้ ใช้เครื่องมือปากกา ยางลบ และเติมสีพร้อมรองรับการเลิกทำ/ทำซ้ำ ส่งออกผลงานพิกเซลอาร์ตของคุณทันที

คุณสมบัติที่ทรงพลัง

เป็นส่วนตัว 100%

การประมวลผลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณ รูปภาพของคุณจะไม่ถูกส่งออกจากอุปกรณ์ของคุณ ไม่มีการอัปโหลด ไม่มีการจัดเก็บข้อมูลบนคลาวด์ ไม่มีการรวบรวมข้อมูล

ครอบคลุมทุกแพลตฟอร์ม

สร้าง favicon มากกว่า 15 ขนาดสำหรับเบราว์เซอร์ หน้าจอหลัก iOS Android Chrome ไทล์ Windows แท็บที่ปักหมุด Safari และ Progressive Web Apps

ดูตัวอย่างสด

ดูว่า favicon ของคุณมีลักษณะอย่างไรในแท็บเบราว์เซอร์ หน้าจอหลัก iOS ตัวเรียกใช้ Android และไทล์ Windows ก่อนที่จะสร้าง

ตัวอย่างโค้ดสำหรับ 35+ เฟรมเวิร์ก

รับโค้ดที่พร้อมใช้งานสำหรับ HTML, React, Vue, Next.js, Nuxt, Angular, Astro, Svelte, WordPress, Shopify, Laravel, Django และอีก 25+ แพลตฟอร์ม

ตัววิเคราะห์ URL

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

ประวัติการสร้าง

เข้าถึงการสร้าง favicon ล่าสุดของคุณ กู้คืนผลงานก่อนหน้า เปรียบเทียบเวอร์ชัน หรือแก้ไขต่อจากที่ค้างไว้

เทมเพลตด่วน

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

ICO หลายขนาด

สร้างไฟล์ ICO ความละเอียดหลายระดับโดยอัตโนมัติที่ฝังขนาด 16x16, 32x32 และ 48x48 เพื่อความเข้ากันได้สูงสุดของเบราว์เซอร์

แพ็คเกจผลลัพธ์ที่สมบูรณ์

Favicon มาตรฐาน

favicon.ico (หลายขนาด), 16x16, 32x32 และ 48x48 PNG สำหรับแท็บเบราว์เซอร์และบุ๊กมาร์ก

ไอคอน Apple Touch

ไอคอน Apple Touch 180x180 สำหรับหน้าจอหลัก iOS บวก SVG แท็บที่ปักหมุด Safari พร้อมสีธีมที่ปรับแต่งได้

ไอคอน Android & PWA

ไอคอน 192x192 และ 512x512 สำหรับ Android Chrome และ Progressive Web Apps รวมถึงการรองรับไอคอนที่มาสก์ได้

ไทล์ Windows

ไทล์ Microsoft 270x270 พร้อม browserconfig.xml สำหรับการรวมเมนู Start ของ Windows และทาสก์บาร์

เว็บ Manifest

ไฟล์ site.webmanifest ที่สมบูรณ์พร้อมการอ้างอิงไอคอน สีธีม และการตั้งค่าการแสดงผล PWA

คำถามที่พบบ่อย

ฉันต้องการ favicon ขนาดใดบ้าง?

อย่างน้อย: favicon.ico, 32x32 PNG, 180x180 Apple Touch Icon และ 192x192/512x512 สำหรับ Android/PWA พรีเซ็ต 'จำเป็น' ของเราจะรวมขนาดที่ต้องการทั้งหมดโดยอัตโนมัติ

ทำไมฉันถึงต้องการไฟล์ ICO?

รูปแบบ ICO มีหลายขนาดในไฟล์เดียวและรองรับโดยเบราว์เซอร์ทั้งหมดรวมถึงเวอร์ชันเก่า เป็นรูปแบบ favicon แบบดั้งเดิมที่รับประกันความเข้ากันได้สูงสุด

Favicon ของฉันควรมีพื้นหลังโปร่งใสหรือไม่?

สำหรับแท็บเบราว์เซอร์ ความโปร่งใสทำงานได้ดี สำหรับหน้าจอหลัก iOS และ Android พิจารณาพื้นหลังสีทึบหรือไล่ระดับสีเนื่องจากไอคอนปรากฏบนวอลเปเปอร์ต่างๆ

รูปภาพต้นฉบับของฉันต้องเป็นสี่เหลี่ยมจัตุรัสหรือไม่?

ใช่ Favicon เป็นสี่เหลี่ยมจัตุรัสเสมอ หากรูปภาพของคุณไม่ใช่สี่เหลี่ยมจัตุรัส ให้ใช้การควบคุมระยะห่างและขนาดของเราเพื่อให้พอดี เพื่อผลลัพธ์ที่ดีที่สุด ให้เริ่มด้วยรูปภาพสี่เหลี่ยมจัตุรัส

รูปภาพของฉันปลอดภัยและเป็นส่วนตัวหรือไม่?

เป็นส่วนตัว 100% การประมวลผลทั้งหมดใช้ Canvas และ Blob API ของเบราว์เซอร์ รูปภาพของคุณจะไม่ถูกส่งออกจากอุปกรณ์ของคุณ — เราไม่อัปโหลด จัดเก็บ หรือส่งข้อมูลใดๆ

รองรับเฟรมเวิร์กใดบ้าง?

เราให้ตัวอย่างโค้ดสำหรับ 35+ แพลตฟอร์มรวมถึง React, Vue, Angular, Next.js, Nuxt, Astro, Svelte, WordPress, Shopify, Laravel, Django, Ruby on Rails และอื่นๆ อีกมากมาย

แล้ว Progressive Web Apps ล่ะ?

เครื่องมือสร้างของเราสร้างไอคอน PWA ที่จำเป็นทั้งหมดรวมถึงตัวแปรที่มาสก์ได้ บวกไฟล์ site.webmanifest ที่สมบูรณ์พร้อมการประกาศไอคอนและสีธีมที่ถูกต้อง

ทำความเข้าใจกับ Favicon

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

รูปแบบ ICO

รูปแบบ ICO บรรจุหลายขนาด (16x16, 32x32, 48x48) ลงในไฟล์เดียว ในขณะที่เบราว์เซอร์สมัยใหม่รองรับ PNG favicon แต่ ICO ยังคงจำเป็นสำหรับความเข้ากันได้สูงสุดกับเบราว์เซอร์รุ่นเก่าและแอปพลิเคชันเดสก์ท็อปบางตัว

ไอคอน PNG

เบราว์เซอร์สมัยใหม่ชอบ PNG favicon เนื่องจากคุณภาพที่คมชัดและการรองรับความโปร่งใส แต่ละขนาดมีจุดประสงค์: 16px และ 32px สำหรับแท็บเบราว์เซอร์, 180px สำหรับ iOS และ 192px/512px สำหรับ Android และ PWA

เว็บแอป Manifest

ไฟล์ site.webmanifest กำหนดลักษณะของเว็บไซต์ของคุณเมื่อติดตั้งเป็น PWA โดยระบุไอคอน สีธีม โหมดการแสดงผล และข้อมูลเมตาอื่นๆ ที่เบราว์เซอร์ใช้เพื่อสร้างประสบการณ์เหมือนแอป

SVG Favicon

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