บริการสร้าง favicons ออนไลน์ วิธีสากลในการสร้างไอคอน Fav คุณสมบัติของ Yandex ที่ทำงานกับ favicons

ไอคอน Fav -(คำย่อ “ไอคอนโปรด”) เป็นภาพขนาดย่อม 16x16 พิกเซล,ที่ผู้เยี่ยมชมเว็บไซต์ของคุณจะเห็น ปรากฏถัดจาก URL ของไซต์ในแถบที่อยู่ของเบราว์เซอร์ นอกจากนี้ ไอคอนนี้จะปรากฏถัดจากชื่อเว็บไซต์ของคุณในรายการแท็บที่เปิด บุ๊กมาร์ก และผลการค้นหา ทำให้ผู้ใช้สามารถค้นหาเว็บไซต์ของคุณได้อย่างรวดเร็วจากเว็บไซต์อื่นๆ

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

แม้ว่าเว็บเบราว์เซอร์สมัยใหม่จำนวนมากจะรองรับไอคอน Fav ในรูปแบบ GIF, PNG หรือรูปแบบไฟล์ยอดนิยมอื่นๆ แต่ Internet Explorer ทุกเวอร์ชันยังคงต้องใช้ไอคอน Fav เป็นไฟล์ ไอซีโอ(รูปแบบไมโครซอฟต์) ในรูปแบบนี้ ทุกเบราว์เซอร์จะเข้าใจไอคอนของคุณ

ทำไมคุณถึงต้องมี favicon?

จำเป็นต้องมีไอคอน Fav เพื่อให้เว็บไซต์ของคุณโดดเด่นจากที่อื่นๆ ในหน้าผลการค้นหา และมองเห็นได้ในแท็บที่เปิดอยู่หลายๆ แท็บในเบราว์เซอร์ ไอคอนที่ดีก็เหมือนกับโลโก้ของไซต์ของคุณ ซึ่งจะเป็นที่จดจำและสร้างทัศนคติที่แน่นอนและกระตุ้นให้เกิดความไว้วางใจในระดับพิเศษ

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

ฉันต้องการทราบทันทีว่าสำหรับไซต์ที่มีป้ายกำกับ "GS" ตัวไอคอนนั้นไม่สามารถปรับปรุงการแสดงผลของทรัพยากรได้ แต่ก็เหมือนการพบปะกันเรื่องเสื้อผ้า ไอคอน Fav ที่ยอดเยี่ยมจะสร้างความประทับใจครั้งแรกให้กับเว็บไซต์ที่เชิญชวนให้มาเยี่ยมชมอย่างแน่นอน

วิธีสร้าง favicon

แน่นอนคุณสามารถลองค้นหาไฟล์ favicon.ico สำเร็จรูปบนเว็บไซต์ www.iconfinder.com ได้ แต่ฉันคิดว่าหลายคนคงอยากจะทำอะไรบางอย่างด้วยตัวเอง ท้ายที่สุดแล้ว มันเป็น favicon ที่จะเน้นเว็บไซต์ของคุณในผลการค้นหา ตอนนี้คุณรู้วิธีการทำเช่นนี้แล้ว มาเริ่มกันเลย

Logaster เป็นบริการออนไลน์สำหรับการสร้างโลโก้และองค์ประกอบเอกลักษณ์องค์กร ในนั้นคุณจะได้รับไอคอนสำหรับเว็บไซต์ในรูปแบบ ICO และ PNG เพียงไม่กี่คลิกโดยอัตโนมัติ

แต่โปรดจำไว้ว่าไม่มีเครื่องมือสร้างโลโก้อัตโนมัติที่สามารถแทนที่ความคิดสร้างสรรค์ของมนุษย์ได้

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

กระบวนการสร้างไอคอนใน Logaster ทำงานอย่างไร

1. เพื่อให้แน่ใจว่าไอคอน Fav ของคุณตรงกับโลโก้ของคุณ คุณจะถูกขอให้สร้างโลโก้ก่อน (ฟรี)
2. เขียนชื่อและสโลแกน (หากต้องการ) ระบุประเภทของกิจกรรม จากนั้น Logaster จะเตรียมตัวเลือกโลโก้มากมายให้คุณอย่างอิสระ
3. เลือกโลโก้ที่เหมาะสม คุณสามารถเปลี่ยนได้ในภายหลัง

นี่คือสิ่งที่ฉันได้รับ

ตอนนี้คุณสามารถคลิกที่ปุ่ม "ดาวน์โหลดโลโก้" ในเวอร์ชันฟรีจะมีลายน้ำ Logaster.com อยู่

สามารถซื้อโลโก้ได้ หลังจากนั้น คุณจะสามารถดาวน์โหลดได้ในรูปแบบที่เลือก (PNG, JPEG, PDF, SVG) และขนาด (1024 px, 5000 px)

ตอนนี้เรามาดูการสร้าง favicon กันดีกว่า

1. เลือกตัวเลือกที่คุณต้องการอีกครั้ง
2. คุณสามารถเปลี่ยนรูปทรงเป็นสี่เหลี่ยม กลม กลม หรือไม่มีรูปทรงเลยก็ได้
3. หากต้องการ ให้เพิ่มเส้นขีดสีโดยคลิกที่เครื่องมือเส้นขีด
4. คลิกที่ปุ่ม "บันทึก"

นี่คือลักษณะที่ไอคอน favicon ปรากฏ โดยหลักการแล้วมันก็ดูดี

วิธีเพิ่ม favicon ให้กับเว็บไซต์ของคุณ

1. ซื้อและเปิดใช้งาน favicon
2. ดาวน์โหลดได้.
3. แตกไฟล์ที่ดาวน์โหลดมาลงในโฟลเดอร์รูทของเว็บไซต์ของคุณ
4. วางโค้ดต่อไปนี้บนทุกหน้าของไซต์ในแท็ก :

ออกแบบแพ็คเกจพร้อมส่วนลด

นอกจากนี้ คุณสามารถซื้อชุดข้อมูลประจำตัวองค์กรทั้งหมดได้ นี่คือทางเลือกหนึ่ง

บทความที่เกี่ยวข้อง: การเพิ่มประสิทธิภาพเค้าโครงสำหรับจอแสดงผล Retina

ปลั๊กอินสำหรับสร้าง favicons

มีโปรแกรมต่าง ๆ มากมายสำหรับการสร้างไอคอน Fav โดยพื้นฐานแล้ว มันเป็นแบบดั้งเดิม ช่วยให้คุณสร้างไอคอนโดยใช้สี 16 สี

คุณสามารถสร้าง favicon ได้โดยตรงใน Photoshop ในการดำเนินการนี้ คุณจะต้องมีปลั๊กอินซึ่งสามารถดาวน์โหลดได้จาก www.telegraphics.com.au หากต้องการติดตั้ง ให้คัดลอกไฟล์ ICOFormat.8biไปยังไดเรกทอรี c:Program FilesAdobeAdobe Photoshop CS2Plug-InsFile Formats

การใช้ปลั๊กอิน ICOFormat.8biคุณสามารถบันทึกรูปภาพเป็น “ไฟล์ .ico” ได้

วิธีติดตั้งปลั๊กอินรูปแบบ ICO (ไอคอน Windows)

1. Windows 64 บิต (Vista/Windows 7):
   • รีสตาร์ทก่อนการติดตั้ง
   • วางปลั๊กอินไว้ในโฟลเดอร์ C:Program FilesAdobePhotoshopPlug-InsFile Formats แต่ฉันมีโครงสร้างอื่น ฉันเก็บไฟล์นี้ไว้ที่นี่: C:Program FilesAdobeAdobe Photoshop CS6 (64 บิต)ปลั๊กอิน
   • หากคุณใช้งานบนระบบ Windows 64 บิต และกำลังเปิดตัว Photoshop CS4 หรือ CS5 เวอร์ชัน 64 บิต ดาวน์โหลดปลั๊กอินเวอร์ชัน 64 บิตและวางไว้ในโฟลเดอร์ Plug-Ins ที่สอดคล้องกับ Photoshop 64 บิต (เช่น ที่อยู่ใน “Program Files” ไม่ใช่ “Program Files (x86)”)
2. ย้ายปลั๊กอินไปไว้ในโฟลเดอร์ “File Formats” ภายในโฟลเดอร์ Photoshop Plugins:
   • สำหรับ Windows (32 บิต) ICOFormat.8bi
   • สำหรับ Windows (64 บิต) ICOรูปแบบ64.8bi
   • สำหรับ Mac OS X ICOFormat.ปลั๊กอิน(โปรดทราบว่ามีเวอร์ชันแยกต่างหากสำหรับ CS2, CS3/4 และ CS5)
   • สำหรับ Mac OS X/คลาสสิก ไอคอนรูปแบบ
   • สำหรับ MacOS 68,000 ไอคอนรูปแบบ (68K)
3. หากใช้ Corel PSP Photo X2 ให้ใส่ปลั๊กอินใน C:Program FilesCorelCorel Paint Shop Pro Photo X2LanguagesENPlugIns
4. ออกและเปิด Photoshop ใหม่อีกครั้ง หากยังทำงานอยู่

นอกจากนี้ยังมีบริการออนไลน์ที่ www.convertico.com ConvertICO เป็นโปรแกรมแปลงไฟล์ ICO/PNG ออนไลน์ฟรี มันทำงานได้อย่างรวดเร็วและใช้งานง่าย มันถูกใช้เพื่อแปลงไอคอนเดสก์ท็อป ไอคอนแอปพลิเคชัน และไอคอน Fav สำหรับเว็บไซต์

วิธีทำ favicon.ico ด้วยตัวเอง

1. เปิดโฟโต้ชอป
2. สร้างเอกสารขนาด 32x32 พิกเซล
3. แทรกวัตถุอัจฉริยะของภาพที่เสร็จแล้วจาก Illustrator
4. ใช้คำสั่ง “บันทึกเป็น” บันทึก favicon ในรูปแบบ .ICO *
5. อัปโหลด favicon ที่เป็นผลลัพธ์ไปยังรากของไซต์และเชื่อมต่อผ่านธีม WordPress หรือลงทะเบียนด้วยตนเองในเทมเพลตไซต์ ฉันได้เขียนเกี่ยวกับวิธีเชื่อมต่อ favicon ไปแล้วก่อนหน้านี้

*หากคุณไม่ได้ติดตั้งปลั๊กอินพิเศษไว้ รูปแบบ ICO (ไอคอน Windows)คุณสามารถดาวน์โหลดได้จาก www.telegraphics.com.au/sw/ มีให้สำหรับ Mac, Windows 32, 64 บิตพร้อมรองรับ Photoshop ทุกรุ่น รวมถึง CS6

การแสดงไอคอน Fav

ไปยังเว็บไซต์ของคุณ แสดง faviconมันสามารถวางไว้ที่รูทของไซต์ได้ เบราว์เซอร์และเครื่องมือค้นหาจะพิจารณาว่าคุณมีไฟล์ favicon.ico และจะแสดงโดยอัตโนมัติ วิธีนี้เป็นวิธีที่ง่ายที่สุดและมีประสิทธิภาพใน 95% ของกรณี แต่คุณยังสามารถรวม favicon ไว้ได้อย่างชัดเจน

ไอคอน Fav คืออะไร?

สำหรับผู้ที่ไม่ทราบว่า favicon คืออะไร เราจะให้ข้อมูลเล็กๆ น้อยๆ แก่คุณซึ่งจะช่วยให้คุณดำเนินการได้รวดเร็วยิ่งขึ้น ไอคอน Fav คือไอคอนขนาดเล็กที่มีขนาด 16x16 หรือ 32x32 พิกเซล โดยปกติจะประกอบด้วยโลโก้ ตัวอักษรตัวแรกของแบรนด์ หรือรูปภาพที่มีลักษณะเฉพาะซึ่งสะท้อนถึงประเภทธุรกิจหรือธีมของเว็บไซต์

เหตุใด favicon จึงมีความสำคัญ

ไอคอน Fav ทำหน้าที่ดังต่อไปนี้:

การสร้างแบรนด์

การระบุไซต์โดยผู้ใช้ (ใช้งานง่าย)

ทำให้เว็บไซต์ดูเป็นมืออาชีพ

มาดูข้อดีหลักของการใช้ไอคอน Fav กันดีกว่า

การรับรู้แบรนด์

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

ความมั่นใจ

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

เข้าชมซ้ำ

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

ประหยัดเวลาของผู้ใช้

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

ประโยชน์ของการทำ SEO

หากไซต์ของคุณมีไอคอน Fav คุณจะปรากฏในผลการค้นหาได้ดีกว่าไซต์ที่ไม่มีไอคอนดังกล่าว จึงสามารถดึงดูดผู้เข้าชมได้มากขึ้น

จะสร้าง favicon ได้อย่างไร?

มีเครื่องมือมากมายที่ให้คุณสร้าง favicon ได้ในไม่กี่นาที หากคุณไม่มีทักษะด้านการออกแบบหรือไม่รู้วิธีดำเนินการ คุณสามารถลองสร้าง favicon โดยใช้ Logaster ได้

โดยทำตามคำแนะนำทีละขั้นตอน:

ขั้นตอนที่ 5: สร้าง favicon

เมื่อคุณมีโลโก้แล้ว ให้คลิก "สร้างไอคอน Fav ด้วยโลโก้นี้" บนหน้าโลโก้

ขั้นตอนที่ 6 เลือกการออกแบบ favicon ที่ต้องการ

เช่นเดียวกับโลโก้ Logaster จะสร้างไอคอน Fav ที่สวยงามและพร้อมใช้งานหลายสิบไอคอน เลือกการออกแบบที่คุณชื่นชอบ การแสดงตัวอย่างจะช่วยให้คุณเห็นว่าไอคอน Fav ของคุณจะมีลักษณะอย่างไรบนเว็บไซต์

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

คุณสามารถค้นหาแรงบันดาลใจสำหรับไอคอน Fav ได้จากไซต์ต่อไปนี้:

ขั้นตอนที่ 7 ดาวน์โหลด favicon

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

หลังจากชำระเงินแล้ว คุณสามารถดาวน์โหลด favicon ในรูปแบบ ico และ png ได้

ฉันจะใช้ favicon ได้ที่ไหน

คุณสามารถใช้ favicon:

บนเว็บไซต์;

อุปกรณ์เคลื่อนที่ ผู้ใช้สามารถเพิ่ม favicon ลงในหน้าจอหลักของอุปกรณ์ได้ (เช่น บุ๊กมาร์ก) - Android, IOS, Windows Phone ฯลฯ

โปรแกรมและแอพพลิเคชั่นสำหรับ PC/Mac

จะติดตั้ง favicon บนเว็บไซต์ได้อย่างไร?

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

ขั้นตอนที่ 1.คุณต้องอัปโหลดไฟล์ favicon.ico ไปยังเซิร์ฟเวอร์ ในการดำเนินการนี้ คุณจะต้องดาวน์โหลดและติดตั้งไคลเอนต์ ftp เช่น FileZilla จากนั้นกรอกชื่อผู้ใช้และรหัสผ่านของคุณแล้วดาวน์โหลดไฟล์ คุณสามารถอ่านคำแนะนำโดยละเอียดเพิ่มเติมเกี่ยวกับวิธีอัปโหลดไฟล์ favicon ได้

ขั้นตอนที่ 2.ตอนนี้ คุณต้องแก้ไขหน้า HTML ของไซต์ของคุณเพื่อช่วยให้เบราว์เซอร์ค้นหารูปภาพไอคอน Fav ของคุณ เมื่อเปิดหน้าต่าง FTP ให้ค้นหาและดาวน์โหลดไฟล์ index.html หรือ header.php จากเซิร์ฟเวอร์

เปิดไฟล์ index.html ในโปรแกรมแก้ไขข้อความ - Notepad, Notepad++, Sublime Text

หากเว็บไซต์ของคุณมี HTML ล้วนๆ ให้วางโค้ดพิเศษลงในพื้นที่ HEAD ของไฟล์ index.html

สามารถคัดลอกรหัสได้บนหน้า favicon บนเว็บไซต์ Logaster

หากคุณใช้ WordPress ให้วางโค้ดด้านล่างลงในพื้นที่ HEAD ของไฟล์ header.php ของคุณ

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

เบราว์เซอร์สมัยใหม่ส่วนใหญ่จะฉลาดพอที่จะค้นหาไฟล์ favicon แม้ว่าจะไม่มีโค้ดดังกล่าวก็ตาม แต่เฉพาะในกรณีที่ favicon มีภาพขนาด 16x16 พิกเซล ชื่อ favicon.ico และบันทึกไว้ในไดเร็กทอรีรากของเว็บไซต์ของคุณ

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

วันนี้ฉันต้องการ แนะนำบริการสร้าง favicon สำหรับเว็บไซต์ของคุณ- Favicon เป็นตัวย่อของคำภาษาอังกฤษ Favorite และ Icon นี่คือรูปภาพขนาด 16 x 16 พิกเซล ซึ่งเรียกว่า favicon และมีนามสกุล ico มันถูกวางไว้ในโฟลเดอร์รูทของเว็บไซต์ของคุณบนโฮสติ้งของคุณ เมื่อไซต์โหลด เบราว์เซอร์จะค้นหาไฟล์นี้โดยอัตโนมัติ จากนั้นจึงเพิ่มลงในแถบที่อยู่ก่อน URL ของหน้าและบุ๊กมาร์ก โดยกำหนดไฟล์ให้กับไซต์ของคุณ ไอคอนเว็บไซต์ไม่มีการใช้งานจริงและทำหน้าที่จดจำเท่านั้น

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

ตามค่าเริ่มต้น เว็บไซต์จะแสดงไอคอนที่มีให้ในเบราว์เซอร์ปัจจุบัน นอกจากนี้ เบราว์เซอร์สมัยใหม่เวอร์ชันส่วนใหญ่ยังรองรับไอคอนเว็บไซต์ส่วนตัวอีกด้วย และในเครื่องมือค้นหา Yandex ซึ่งปัจจุบันครองตำแหน่งร่วมกับ Google ในพื้นที่ที่พูดภาษารัสเซีย เมื่อคุณป้อนคำค้นหา ไซต์ที่ได้รับการจัดอันดับจะปรากฏขึ้นพร้อมกับไอคอน ดังนั้นโดยไม่ชักช้าในภายหลังจึงจำเป็นต้องใส่ใจอย่างใกล้ชิดกับการสร้างมัน

มีแหล่งข้อมูลมากมายบนอินเทอร์เน็ตที่เก็บไอคอนสำเร็จรูป มีจำนวนมาก แต่ตอนนี้เราสนใจที่จะสร้าง favicon

ต้องการสร้าง favicon สำหรับเว็บไซต์ของคุณหรือไม่? พิจารณาบริการสำหรับการสร้างไอคอน Fav ออนไลน์

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

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

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

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

แน่นอนว่าคุณสามารถใช้ Photoshop ที่ทุกคนชื่นชอบเพื่อสร้างไอคอนได้ แต่จะไม่บันทึกรูปภาพที่มีนามสกุล ico หรือค่อนข้างจะประหยัด แต่สำหรับสิ่งนี้คุณต้องแกะปลั๊กอินพิเศษ - icoformat.8bi และติดตั้งลงในโฟลเดอร์ Plug-Ins\File Formats ในโฟลเดอร์ Photoshop ซึ่งจะช่วยให้คุณสามารถบันทึกไฟล์ด้วยนามสกุลที่เราต้องการได้ สำหรับฉันมันค่อนข้างลำบาก

ฉันขอแนะนำตัวเลือกนี้ ใน Photoshop เราสร้างภาพที่เราต้องการเห็นเป็นไอคอน บันทึกพร้อมกับส่วนขยายใดๆ และส่งไปยังบริการใดบริการหนึ่งข้างต้น ซึ่งเราจะได้ภาพที่เราต้องการจากภาพเหล่านี้

คุณยังสามารถใช้โปรแกรมแปลงรูปภาพกราฟิกออนไลน์จากรูปแบบหนึ่งไปยังอีกรูปแบบหนึ่งได้ เช่น ที่นี่ หรือ . คุณสามารถเปลี่ยนนามสกุลไฟล์กราฟิกเป็น ico ได้ด้วยการใช้พวกมัน

คุณจะทำให้ไอคอนกลายเป็น favicon สำหรับไซต์ได้อย่างไร

จำเป็นต้องมีขั้นตอนต่อไปนี้:

1 ตรวจสอบให้แน่ใจว่าไฟล์นั้นเรียกว่า .

2 การใช้ Filezilla เราวางไว้ในโฟลเดอร์รูทของไซต์ของเรา ตามทฤษฎีแล้ว การกระทำเหล่านี้ก็เพียงพอแล้ว และเบราว์เซอร์จะระบุตำแหน่งโดยอัตโนมัติ แต่เราเล่นอย่างปลอดภัยและเขียนเส้นทางไปยังไฟล์นี้ในโค้ด html

3 ในการดำเนินการนี้ ให้ใช้ไฟล์ธีม header.php ของเรา (คุณสามารถแก้ไขได้ในแผงผู้ดูแลระบบโดยตรงใน WordPress หรือคุณสามารถดาวน์โหลดได้จากเซิร์ฟเวอร์) เปิดและเพิ่มก่อนแท็กปิดรหัสต่อไปนี้:

/favicon.ico"/>

4 บันทึกไฟล์และโอนกลับไปยังโฮสต์

5 ล้างแคชของเบราว์เซอร์ปัจจุบัน เท่านี้ก็เรียบร้อย เราได้ผลลัพธ์ที่ต้องการ

อย่างไรก็ตาม ไม่จำเป็นที่ favicon จะต้องอยู่ในรูท แอตทริบิวต์ href ระบุเส้นทางโดยตรง ปรากฎดังนี้:

ไม่จำเป็นที่ไอคอนจะต้องมีนามสกุล ico คุณยังสามารถใช้ส่วนขยาย PNG และ GIF ได้ เมื่อต้องการทำเช่นนี้ รหัสจะเปลี่ยนประเภทของไฟล์เอาต์พุต

นั่นคือเราเปลี่ยนประเภทจาก image/x-icon เป็น image/png หรือ gif

ยังไงก็ตามคุณสามารถเพิ่มได้อีกสิ่งหนึ่ง เราสร้างและติดตั้ง favicon สำหรับไซต์ แต่ในแผงผู้ดูแลระบบ WordPress นั้น favicon มาตรฐานยังคงอยู่ตามค่าเริ่มต้น หากต้องการเปลี่ยนแปลงทุกที่ คุณต้องแทรกโค้ด php ต่อไปนี้ลงในไฟล์ function.php ของธีมของเรา:

ฟังก์ชั่น sp_set_favicon() ( เสียงก้อง " "; ) add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");

ตอนนี้มันจะสะท้อนให้เห็นในส่วนหัวทั้งหมด

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

ดูวิดีโอเกี่ยวกับวิธีสร้าง favicon.ico และโฮสต์:

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

X-Icon-เครื่องมือแก้ไข

ต่างจากเครื่องมือก่อนหน้านี้ favicon.cc มีเครื่องมือวาดภาพน้อยกว่า ที่นี่คุณสามารถวาดแต่ละพิกเซลด้วยสีและความโปร่งใสเฉพาะเท่านั้น เครื่องมือนี้ยังช่วยให้คุณสามารถนำเข้ารูปภาพ แก้ไขได้ตามต้องการ และส่งออกเป็นไอคอน Fav

ต้องขอบคุณแผงพิเศษ ในขณะที่วาดภาพที่ชอบ คุณจะเห็นได้ทันทีว่ามันมีลักษณะอย่างไรในเบราว์เซอร์ Internet Explorer

แอนติฟาวิคอน

แน่นอนว่าขนาดไอคอน Fav มาตรฐาน (16x16) นั้นเล็กเกินไปสำหรับข้อความ อย่างไรก็ตาม Antifavicon ช่วยให้คุณสามารถใส่ข้อความสองบรรทัดลงในพื้นที่ขนาดเล็กนั้นได้ แบบอักษรที่ใช้นั้นไม่ค่อยดีนัก แต่คุณจะทำอะไรได้บ้าง :)

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

ฟาวิโคนิสต์

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

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

จริงๆ แล้วฉันชอบ favicon มาก ฉันมีความรักสงบที่ลึกซึ้งและบริสุทธิ์สำหรับเขา นี่ไม่ได้หมายความว่าฉันจะเล่าเรื่องให้เพื่อนเว็บมาสเตอร์ฟังเกี่ยวกับวิธีที่ฉันเปลี่ยนไอคอน Fav และปริมาณการใช้ข้อมูลเพิ่มขึ้น 10% (แม้ว่าจะรอ... อาจจะเป็นเช่นนั้น) แต่นั่นหมายความว่าเมื่อไอคอน Fav ของเว็บไซต์ใหม่ของฉันปรากฏใน ดัชนียานเดกซ์ ตัวไซต์เองเริ่มดูเหมือน SDL มากขึ้นสำหรับฉันเล็กน้อย

ไอคอน Fav คืออะไร?

Favicon (Favicon – ย่อมาจาก “ไอคอนรายการโปรด”) เป็นรูปภาพที่แสดงในแถบที่อยู่ของเบราว์เซอร์ก่อนที่อยู่ ในแท็บที่สอดคล้องกับหน้าต่างที่มีหน้าที่เปิดอยู่ของไซต์ เช่นเดียวกับเมื่อเพิ่มทรัพยากรลงใน แท็บรายการโปรด รูปภาพเหล่านี้สามารถช่วยให้ผู้ใช้จดจำแบรนด์หรือบริษัทได้ดีขึ้น และเพิ่มการจดจำไซต์ บ่อยครั้งที่มีการใช้รูปภาพโลโก้บริษัทหรือแบรนด์ที่ย่อขนาดหรือเปลี่ยนแปลงเล็กน้อยเป็นไอคอน Fav

ประโยชน์ของการใช้ favicon

การใช้ไอคอน Fav จะนำมาซึ่งประโยชน์เมื่อเวลาผ่านไป ตัวอย่างเช่น ตรวจสอบตัวเลือกเหล่านี้:

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

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

คุณสมบัติของ Yandex ที่ทำงานกับ favicons

เครื่องมือค้นหา Yandex เป็นหนึ่งในไม่กี่แห่งที่เน้นไอคอน Fav ของไซต์และแสดงเมื่อสร้างรายการผลการค้นหา ในการดำเนินการนี้ บอทพิเศษจะจัดทำดัชนีไซต์เป็นระยะและอัปเดตข้อมูลเกี่ยวกับการมีไอคอน Fav

ก่อนหน้านี้ การอัปเดต favicon จะเกิดขึ้นทุกๆ สองสามเดือน ตอนนี้ในปี 2018 ยานเดกซ์จัดทำดัชนีพวกมันอย่างเข้มงวดมากขึ้น และไอคอน favicon จะปรากฏบนไซต์ใหม่ของฉันบางส่วนภายในไม่กี่วัน

หากต้องการตรวจสอบว่า Yandex แสดง favicon หรือไม่ คุณสามารถค้นหาพอร์ทัลของคุณในรายการค้นหาและดูว่าไอคอนปรากฏทางด้านซ้ายหรือไม่ คุณยังสามารถป้อนโครงสร้างต่อไปนี้ในแถบที่อยู่: สำหรับ Yandex - http://favicon.yandex.net/favicon/www.site.ru (โดยที่แทนที่จะเป็น www.site.ru คุณต้องพิมพ์โดเมนของเว็บไซต์ของคุณ ). Favicon ที่สร้างขึ้นอย่างถูกต้องจะแสดงบนพื้นหลังสีดำและนั่นหมายความว่ายานเดกซ์มองเห็นได้

หากมองไม่เห็นไอคอน Fav อาจเนื่องมาจากสาเหตุต่อไปนี้:

• ขนาดภาพไม่ตรงกับขนาดที่ต้องการ: 16x16 พิกเซล;
• รูปแบบภาพไม่เหมือนกัน - ควรเป็น ico, jpeg หรือ png (ตัวเลือกแรกจะดีกว่าสำหรับ Yandex)
• รูปภาพไม่ชัดหรือไม่ซ้ำกัน - บางครั้งด้วยเหตุผลเหล่านี้เครื่องมือค้นหาจึงบล็อกไอคอน
• ยานเดกซ์กำลังอัปเดตระบบ - หลังจากนั้นทุกอย่างก็ควรจะแก้ไขเอง
• ไซต์นี้อยู่ห่างจากตำแหน่งที่ร้อยในผลการค้นหา - ในกรณีนี้ favicon อาจไม่แสดงเช่นกัน

หลังจากตรวจสอบรูปภาพตามเกณฑ์เหล่านี้แล้วคุณจะต้องแก้ไขข้อบกพร่อง หากหลังจากนี้ไอคอนไม่ปรากฏขึ้น คุณสามารถติดต่อฝ่ายสนับสนุนของ Yandex ได้

หากต้องการให้ favicon แสดงใน Yandex.Direct จะต้องได้รับการออกแบบอย่างถูกต้องและอยู่ในตำแหน่งที่ถูกต้องบนไซต์ จากนั้นหุ่นยนต์ค้นหา Yandex จะสร้างดัชนีและเริ่มแสดงในผลการค้นหา ซึ่งโดยปกติจะเกิดขึ้น 2-4 สัปดาห์หลังจากการเผยแพร่เว็บไซต์โดยมีการเปลี่ยนแปลง ไม่จำเป็นต้องแจ้งหรือขอให้ยานเดกซ์เผยแพร่ไอคอน Fav สิ่งนี้จะเกิดขึ้นโดยอัตโนมัติหลังจากผ่านไประยะหนึ่งหลังจากที่ปรากฏบนพอร์ทัล

วิธีสร้าง favicon

หากคุณต้องการสร้างไฟล์ ico จากรูปภาพขนาดใหญ่ในรูปแบบ เช่น PNG ขอแนะนำให้ติดตั้ง Adobe Photoshop ก่อน จากนั้นจึงติดตั้งปลั๊กอิน ICO สำหรับ Photoshop (ค้นหาปลั๊กอินสำหรับเวอร์ชัน FS ของคุณในเครื่องมือค้นหา) เมื่อติดตั้งแล้ว เราจะคัดลอกไฟล์ที่ต้องการ ICOFormat.8bi (สำหรับ 32 บิต) หรือ ICOFormat64.8bi (สำหรับ 64 บิต) ไปยังหนึ่งในเส้นทางต่อไปนี้:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 บิต)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File รูปแบบ

หากไม่มีโฟลเดอร์ "ปลั๊กอิน" หรือ "รูปแบบไฟล์" คุณจะต้องสร้างมันขึ้นมา ตอนนี้ในกล่องโต้ตอบบันทึก คุณสามารถเลือกรูปแบบ ico ได้ ขนาดของไอคอนที่สร้างขึ้นสามารถเป็นทวีคูณของ 8 (16×16, 24×24, 32×32 และอื่นๆ แต่การเลือกขนาด 16×16 นั้นน่าเชื่อถือที่สุด)

จากนั้นภาพที่จะกลายเป็น favicon จะถูกเปิดใน Photoshop คลิก "รูปภาพ - ขนาดรูปภาพ" และขนาดรูปภาพจะเปลี่ยนเป็น 16x16 พิกเซล จากนั้นกด “ไฟล์ – บันทึกเป็น” และเลือกรูปแบบ ICO (ชื่อไฟล์ควรเป็น favicon.ico)

ฉันเพิ่งแปลงรูปภาพเป็นรูปแบบ ico โดยไม่ต้องใช้ Photoshop การใช้บริการ https://realfavicongenerator.net/.

หลังจากนั้นครู่หนึ่ง favicon จะปรากฏบนเว็บไซต์

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

ยานเดกซ์กลัวพวกเนิร์ด favicon

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

บริการ

นอกจากนี้ยังมีโปรแกรมและแหล่งข้อมูลพิเศษสำหรับการสร้างไอคอนซึ่งรายการต่อไปนี้ได้รับความนิยม:

• favicon.cc - โปรแกรมแก้ไขที่ง่ายที่สุดจะช่วยให้คุณสร้างภาพที่เรียบง่าย หลักการทำงานก็เหมือนกับ Paint มีการเลือกสีด้วย และทำการวาดภาพโดยคลิกที่สี่เหลี่ยมพิกเซลที่ต้องทาสีทับ มีเครื่องมือแก้ไข. รูปภาพที่สร้างขึ้นสามารถบันทึกลงในคอมพิวเตอร์ของคุณเป็นรูปภาพ favicon ที่เสร็จแล้วได้ ในขณะที่คุณทำงานที่ด้านล่างของหน้าจอคุณจะเห็นผลลัพธ์เบื้องต้นในรูปแบบที่จะแสดงในเบราว์เซอร์ ทรัพยากรยังมีไอคอนสำเร็จรูปให้เลือกมากมาย
• favicon.ru – ที่นี่จะเป็นการดีกว่าถ้าสร้าง favicons จากรูปภาพสำเร็จรูป รูปภาพจะถูกดาวน์โหลดจากคอมพิวเตอร์ ประมวลผลโดยระบบ และแปลงเป็นไฟล์ favicon.ico ซึ่งสามารถดาวน์โหลดได้
• iconj และ audit4web เป็นฐานข้อมูลที่คุณสามารถค้นหาไอคอน Fav สำเร็จรูปได้

นอกจากนี้ยังมีบริการดังกล่าว:

คุณสามารถหันไปหานักออกแบบเพื่อพัฒนาภาพได้ แต่จะมีค่าใช้จ่ายสูงกว่ามาก

อีกประเด็นหนึ่งคือรูปภาพสำหรับไอคอนไม่สามารถเคลื่อนไหวได้ แต่จะไม่เคลื่อนไหวตลอดเวลาแม้ว่าจะใช้รูปภาพที่มีเอฟเฟกต์ที่ไม่คงที่เป็นพื้นฐานก็ตาม