ฟาวิคอนเป็นไอคอนของเว็บไซต์หรือเพจในรูปแบบไอคอนขนาดเล็ก ขนาด 16x16 พิกเซล (หรือใหญ่กว่า) ผู้ใช้สามารถเห็น favicon เป็นรูปภาพขนาดเล็กได้ แถบที่อยู่เบราว์เซอร์ทางด้านซ้ายของลิงก์ไปยังไซต์ที่เปิดอยู่ ใกล้กับชื่อไซต์ในบุ๊กมาร์กและแท็บ ในผลลัพธ์ของเครื่องมือค้นหา ไดเร็กทอรี บริการบุ๊กมาร์ก ฯลฯ

กาลครั้งหนึ่ง favicon สามารถสร้างได้ในรูปแบบ .ico เท่านั้น เนื่องจากเบราว์เซอร์รุ่นเก่ารองรับเท่านั้น อินเทอร์เน็ตเอ็กซ์พลอเรอร์- นี่คือที่มาของชื่อ favicon (ย่อมาจาก คำภาษาอังกฤษ ที่ชอบโอไรต์ ไอคอน– “ไอคอนสำหรับรายการโปรด”) “รายการโปรด” เป็นชื่อที่ตั้งให้กับบุ๊กมาร์กในเบราว์เซอร์ IE

ทุกวันนี้ ไอคอนสำหรับเว็บไซต์และเพจสามารถสร้างได้ในรูปแบบอื่นๆ มากมาย รวมถึง jpg, PNG, GIF และแน่นอนว่าเป็น ico แบบเก่าที่ดีอีกด้วย

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

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

นี่คือลักษณะของไอคอน Fav ในเบราว์เซอร์

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

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

บันทึก- เป็นการดีกว่าที่จะติดตั้ง favicon บนทรัพยากรบนเว็บที่ได้รับการปรับปรุงแล้ว

ตัวอย่างเช่น เครื่องมือค้นหา Yandex มีโรบ็อต YandexFavicons พิเศษที่ทำดัชนี favicons พวกเขาเยี่ยมชมไซต์เพื่อรวบรวมและอัปเดตป้ายประมาณเดือนละครั้ง

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

เมื่อเครื่องมือค้นหาพบไอคอนแล้ว จะต้องแปลงเป็นรูปแบบ PNG (หากสร้างในรูปแบบ ICO) หลังจากนี้ คุณจะพบ favicon ของทรัพยากรของคุณตามที่อยู่ (โดยใช้ Yandex เป็นตัวอย่าง): http://favicon.yandex.net/favicon/URL-address-of-your-site.

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

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

แคตตาล็อกและบริการสำหรับการสร้างไอคอน Fav

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

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

รูปลักษณ์ของไอคอน

ขนาดไอคอน Fav มาตรฐานคือ 16x16 พิกเซล นอกจากนี้ยังมีขนาด 24x24, 32x32, 48x48 และ 64x64 คุณต้องเข้าใจว่าไอคอนของไซต์คือใบหน้า ซึ่งการเข้าชมขึ้นอยู่กับระดับหนึ่ง ดังนั้นจึงจำเป็นต้องเข้าใกล้การสร้าง favicon อย่างชาญฉลาด ต่อไปนี้เป็นกฎบางประการสำหรับลักษณะของไอคอนเพื่อดึงดูดความสนใจของผู้ใช้:

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

การติดตั้ง favicon

หลังจากสร้าง favicon แล้ว จะต้องติดตั้งบนไซต์ การทำเช่นนี้ง่ายมาก:

1. อัปโหลดรูปภาพ favicon.ico ไปที่ โฟลเดอร์รูทเว็บไซต์ของคุณ;
2. เขียนโค้ดต่อไปนี้ในโค้ด HTML ของไซต์เอง ในเมตาแท็ก head:

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

การแสดง Favicon บนมือถือ

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


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

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

ไอคอนสำหรับ iOS

เพื่อให้ favicon ปรากฏบน อุปกรณ์ iOSและใน เบราว์เซอร์ซาฟารีคุณต้องเขียนโค้ดต่อไปนี้:

หุ่นยนต์

สำหรับอุปกรณ์ที่ใช้ Android เราเขียนว่า:

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

เนื้อหา:

( "ชื่อ": "%title%", "ไอคอน": [ ( "src": "\/android-chrome-36x36.png", "ขนาด": "36x36", "type": "image\/png ", "ความหนาแน่น": "0.75" ), ( "src": "\/android-chrome-48x48.png", "ขนาด": "48x48", "type": "image\/png", "ความหนาแน่น" : "1.0" ), ( "src": "\/android-chrome-72x72.png", "size": "72x72", "type": "image\/png", "density": "1.5" ) , ( "src": "\/android-chrome-96x96.png", "ขนาด": "96x96", "type": "image\/png", "ความหนาแน่น": "2.0" ), ( "src" : "\/android-chrome-144x144.png", "size": "144x144", "type": "image\/png", "density": "3.0" ), ( "src": "\/android -chrome-192x192.png", "size": "192x192", "type": "image\/png", "density": "4.0" ) ] )

แต่นั่นไม่ใช่ทั้งหมดในใหม่ เวอร์ชัน Android(เริ่มต้นด้วย Lollipop) เบราว์เซอร์ของคุณสามารถเปลี่ยนสีเพื่อให้ตรงกับสีอินเทอร์เฟซของไซต์ได้


หากต้องการสร้างคุณลักษณะดังกล่าว ให้เขียนเส้นและตั้งค่าสีของคุณ:

วินโดว์โฟน

เกี่ยวกับ favicon วินโดว์โฟนอย่าลืมเช่นกัน:

คุณสามารถใช้การปรับแต่งไอคอนขั้นสูงเพิ่มเติมใน Windows Phone ได้ ค่าต่อไปนี้:

#8A2BE2

ไฟล์การกำหนดค่าเอง:

บริการสำหรับการสร้างและการตรวจสอบ favicon

digitalagencyrankings.com

ป้อนที่อยู่เว็บไซต์ของคุณและรับการวิเคราะห์


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

บทสรุป

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

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

Favicon - คำที่แปลตามตัวอักษรว่า "ไอคอนโปรด" - ถือเป็นหนึ่งในองค์ประกอบที่ซับซ้อนที่สุดของการออกแบบเว็บไซต์สมัยใหม่ นี่คือรูปภาพขนาดเล็กที่อยู่ในแท็บเบราว์เซอร์ แถบค้นหาและสถานที่อื่นๆ และมีบทบาทสำคัญในการกำหนดค่าส่วนบุคคลของไซต์

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

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

favicon คืออะไร และเหตุใดจึงจำเป็น

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

คลิกเพื่อขยายภาพ

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

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

ประการที่สาม ไอคอน Fav ช่วยให้ผู้ใช้สามารถค้นหาเว็บไซต์ของคุณได้อย่างรวดเร็วในไดเร็กทอรีของบุ๊กมาร์กหรือไอคอนอื่นๆ บนเดสก์ท็อป

การสร้างการออกแบบ favicon

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

เว็บไซต์เหล่านี้ใช้กราฟิกของแบรนด์ของตน (หรืออย่างน้อยก็บางอย่างที่คล้ายกัน)

อย่าใช้ข้อความ

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

พิกเซล Favicon

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

นี่คือส่วนหนึ่งของโลโก้ Facebook ขนาดเต็มหลังจากที่ลดขนาดลงเหลือ 32x32 สังเกตได้ง่ายว่าภาพ “ลอย” รอบขอบ เพื่อหลีกเลี่ยงข้อบกพร่องดังกล่าว ควรแก้ไขที่ระดับพิกเซล
เมื่อทำงานกับไอคอน ฉันชอบใช้โปรแกรมแก้ไข ภาพแรสเตอร์(เช่น Photoshop หรือ Pixelmator) ขั้นแรก ฉันลดขนาดโลโก้ขนาดเต็มลงเหลือ 64x64 พิกเซล เพราะนั่นคือไอคอน favicon ที่ใหญ่ที่สุดที่ฉันต้องการ งานนี้ต้องใช้ความอุตสาหะมาก อาจใช้เวลาทั้งชั่วโมงหรือสองชั่วโมงก็ได้ แต่ผลลัพธ์ก็ยอดเยี่ยมมาก
หากคุณไม่มีเวลาและทักษะในการดำเนินการดังกล่าว ควรใช้จะดีกว่า บริการออนไลน์, เช่น Logotizer.ru

ขนาดไอคอน Fav

เมื่อได้รับไอคอน 64x64 ฉันจึงสร้างไอคอนขนาด 32x32, 24x24 และ 16x16 พิกเซลในลักษณะเดียวกัน แต่ละคนมีจุดประสงค์ของตัวเอง:

– 64×64 – “เรื่องรออ่าน” ใน Safari และ Windows
– 24×24 – ปักหมุดไซต์ใน IE9
– 32×32 – สำหรับหน้าจอที่มี ความละเอียดสูง.
– 16x16 – โดยทั่วไปใช้ในเบราว์เซอร์ เช่น IE, Safari, Chrome เป็นต้น

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

รูปแบบ Favicon

ก่อนหน้านี้เมื่อรองรับเฉพาะไฟล์เท่านั้น รูปแบบวินโดวส์ ICO เราสามารถประหยัดเวลาได้ด้วยการบันทึก favicon ขนาด 16x16 เป็น GIF และให้นามสกุลเป็น .ico เทคนิคนี้ใช้ได้ผลไม่มีที่ติ! แต่ตอนนี้วิธีนี้ไม่จำเป็น เนื่องจากเครื่องมือสำหรับการสร้างไฟล์ ICO สามารถพบได้ง่ายบนอินเทอร์เน็ต ยิ่งไปกว่านั้น และตอนนี้ใช้สำหรับไอคอน Fav แต่ไอคอนที่พบบ่อยที่สุดยังคงเป็นเพียงสองไอคอนต่อไปนี้เท่านั้น

ไอซีโอ

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

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

มีตัวเลือกอื่น:

– รูปแบบ GIF และ GIF แบบเคลื่อนไหวไม่มีข้อดีอื่นใดนอกจากความเข้ากันได้กับเบราว์เซอร์รุ่นเก่าๆ
– ไม่แนะนำให้ใช้รูปแบบ JPG แม้ว่าภาพจะอยู่ในรูปแบบของภาพถ่ายก็ตาม รูปแบบนี้ขาดความคมชัดของ PNG และข้อดีเพียงอย่างเดียวคือการเปลี่ยนสีที่ราบรื่นยิ่งขึ้น ซึ่งเป็นความแตกต่างเล็กน้อยที่ไม่สามารถสังเกตเห็นได้อย่างสมบูรณ์ในภาพขนาดเล็กมาก
– SVG สามารถกลายเป็นได้ ตัวเลือกที่ยอดเยี่ยมหากมีเบราว์เซอร์เพิ่มเติมเท่านั้นที่รองรับไอคอน Fav ในรูปแบบนี้ ในตอนนี้ รองรับได้เฉพาะกับ Opera เท่านั้น
– นอกจากนี้ยังมีสิ่งที่เรียกว่า “รูปแบบย่อย” ของ PNG – APNG (PNG แบบเคลื่อนไหว) ซึ่งได้รับการสนับสนุนใน Firefox และ Opera อย่างไรก็ตาม ความเป็นไปได้ในการใช้งานยังคงเป็นที่น่าสงสัย ไอคอน favicon แบบเคลื่อนไหวอาจทำให้ผู้ใช้เสียสมาธิและน่ารำคาญได้

สร้าง favicon ออนไลน์ – เครื่องมือและบริการออนไลน์

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

โลโกไทเซอร์

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

วิธีสร้าง favicon โดยใช้ เครื่องกำเนิดไฟฟ้าออนไลน์โลโกไทเซอร์

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

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

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

ใต้บล็อก "รูปร่าง" เป็นกลุ่มของรูปร่าง (สัญลักษณ์) มีไม่มาก น่าเสียดายที่คุณไม่สามารถอัปโหลดตัวเลือกของคุณเองได้ แต่ตัวเลือกยังค่อนข้างน่าสนใจ

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

เมื่อเลือกรูปร่างแล้ว คุณสามารถเพิ่มข้อความได้ ดังที่ผมเขียนไปก่อนหน้านี้ ควรใช้ตัวอักษร 1 หรือ 2 ตัวดีกว่า ไม่มากไปกว่านี้

มีแบบอักษรให้เลือกมากมาย นี่เป็นข้อดีอย่างแน่นอน เช่นเดียวกับรูปร่าง คุณสามารถเปลี่ยนสี ขนาด และตำแหน่งของข้อความได้

หากคุณตัดสินใจว่าเลเยอร์ favicon บางเลเยอร์รบกวนคุณชั่วคราวหรือไม่จำเป็นเลย คุณสามารถซ่อนเลเยอร์ดังกล่าวได้

หลังจากสร้าง favicon แล้ว บริการจะเสนอให้บันทึก ลงทะเบียนบัญชี (ในปี 2560 ไม่มีทางเลยหากไม่มีการลงทะเบียน) และหลังจากนั้นคุณสามารถดาวน์โหลดไฟล์โดยชำระเงินเล็กน้อย - 199 รูเบิล

ไซต์นี้ยังมีคำแนะนำเล็กๆ น้อยๆ เกี่ยวกับวิธีการเพิ่มไอคอนประจำไซต์ให้กับไซต์ ดังนั้นคุณจึงไม่น่าจะมีปัญหาใดๆ ในการเพิ่มไอคอนประจำไซต์ลงในไซต์ คำแนะนำที่คล้ายกันมีระบุไว้ด้านล่างในบทความนี้

หลังจากชำระเงิน ผู้ใช้จะได้รับไอคอน Fav ขนาดต่างๆ กัน 10 ไอคอนทันทีสำหรับอุปกรณ์ทั้งหมดที่จำเป็นในปัจจุบัน (ไอคอน Apple touch, ไอคอนแอปพลิเคชัน Microsoft และอื่นๆ)

ไฟล์ favicon.ico นั้นมีหลายขนาดและมีไอคอน 4 ขนาดใน 1 ไฟล์ (16px, 24px, 32px, 64px) ดังนั้น หากคุณเพิ่มไซต์ลงในบุ๊กมาร์กของเบราว์เซอร์หรือเปิดประวัติ คุณจะเห็นไอคอนต่างๆ ขนาดที่แตกต่างกันแต่จะแสดงได้ชัดเจนไม่เบลอ

โดยรวมแล้วการบริการก็ดี ง่าย สะดวก ไม่มีอะไรฟุ่มเฟือย

RealFaviconGenerator.net

เป็นตัวสร้าง favicon ที่ง่ายกว่าซึ่งช่วยให้คุณสร้าง favicon สำหรับแพลตฟอร์มใดก็ได้ นอกจากนี้ คุณยังสามารถทดสอบ favicon บนทรัพยากรได้ ป้อน URL ของเว็บไซต์ของคุณแล้วคุณจะเห็นว่า favicon ของคุณมีลักษณะอย่างไรในทุกเบราว์เซอร์และทุก ๆ ระบบปฏิบัติการ- Real Favicon Generator จะบอกวิธีแก้ไขข้อบกพร่องและทำให้ favicon ของคุณดียิ่งขึ้นอีกด้วย

Favicon.by

Favicon.byเป็นอีกหนึ่งเครื่องมือสร้าง favicon ฟรีและใช้งานง่ายที่จะแปลงไฟล์ PNG, JPG และ GIF เป็นรูปแบบ .ico อัปโหลดรูปภาพจากคอมพิวเตอร์ของคุณ เลือกขนาด (16x16px หรือ 32x32px) แล้วคลิกที่ปุ่ม "สร้าง" หากต้องการบันทึกไอคอน Fav ที่เป็นผลลัพธ์บนเว็บไซต์ของคุณ ให้ทำตามคำแนะนำ

บริการนี้ยังทำให้สามารถวาดโลโก้แบบพิกเซลต่อพิกเซลได้ แต่พูดตามตรง ไม่ใช่ทุกคนที่สามารถทำได้ ตัวอย่างเช่น ฉันทำไม่ได้ ฉันมันโง่ขนาดนั้นเลย :)

วิธีเพิ่ม favicon ให้กับเว็บไซต์

คุณสามารถเพิ่ม favicon ให้กับไซต์ของคุณได้โดยการเปลี่ยนแปลงโค้ด HTML ของหน้าไซต์เล็กน้อย

ขั้นตอนที่ 1: อัปโหลดไฟล์ “favicon.ico” ไปยังเซิร์ฟเวอร์โฮสติ้งของคุณ

โดยไปที่เซิร์ฟเวอร์ FTP ของคุณโดยใช้ลิงก์นี้:
ftp: // [ป้องกันอีเมล]
กรอกชื่อผู้ใช้และรหัสผ่านของคุณ สามารถรับสิ่งเหล่านี้ได้จากแผงผู้ดูแลระบบของบริษัทโฮสติ้งของคุณ
อัปโหลดไฟล์ favicon ไปยังไดเร็กทอรีราก ไดเร็กทอรีรากมักเรียกว่า "public_html" หรือ "www"

ขั้นตอนที่ 2: เพิ่ม favicon ให้กับ HTML

เปิดหน้าต่างเซิร์ฟเวอร์ FTP ไว้ ให้ดาวน์โหลดไฟล์ “index.html” หรือ “header.php”
จากนั้นคุณจะต้องดาวน์โหลดรหัส รหัสที่คุณดาวน์โหลดขึ้นอยู่กับเว็บไซต์ของคุณ
หากเว็บไซต์ของคุณเป็น HTML ให้ค้นหาพื้นที่ HEAD ในไฟล์ index.html และวางโค้ดต่อไปนี้:

หากเว็บไซต์ของคุณอยู่บน WordPress ให้ค้นหาพื้นที่ HEAD ในไฟล์ header.php และวางโค้ดต่อไปนี้:

/favicon.ico” />

เมื่อใช้รหัสเหล่านี้ เบราว์เซอร์จะสามารถค้นหาไอคอน Fav ของคุณได้
คุณได้ติดตั้ง favicon ของคุณแล้ว!

วิธีเพิ่ม Favicon บน WordPress และแพลตฟอร์มอื่น ๆ

หากทรัพยากรของคุณใช้ WordPress หรือ CMS อื่น การเพิ่ม favicon ให้กับเว็บไซต์นั้นง่ายมาก โดยทั่วไป อัลกอริธึมสำหรับการเพิ่ม favicon สำหรับแพลตฟอร์มต่างๆ จะเหมือนกัน
1. คุณต้องไปที่คอนโซลของไซต์
2. ค้นหาส่วน "การออกแบบ" หรือ "รูปลักษณ์"

3. ไปที่ส่วน "การตั้งค่าธีม" และค้นหา "Favicon" ที่นั่น

4. อัปโหลด favicon จากคอมพิวเตอร์ของคุณ

5. บันทึกและรีเฟรชเพจ

วิธีสร้างไอคอน Fav ที่ซับซ้อนยิ่งขึ้น

บทความนี้กล่าวถึงวิธีที่ง่ายและรวดเร็วในการสร้างไอคอน Fav ที่เข้ากันได้กับเบราว์เซอร์และระบบปฏิบัติการเกือบทุกชนิด แต่เมื่อพูดถึงการออกแบบและพัฒนาเว็บไซต์ ท้องฟ้านั้นมีขีดจำกัด หากคุณต้องการเรียนรู้วิธีสร้างไอคอน Fav ที่ซับซ้อนมากขึ้น ไอคอนแบบสัมผัสสำหรับหน้าจอหลักของ iOS ไอคอนสำหรับอินเทอร์เฟซ Metro ใน Windows ไอคอนสำหรับ Google TV และอื่นๆ อีกมากมาย ฉันขอแนะนำให้คุณตรวจสอบเอกสารเหล่านี้: แผ่นโกง favicon- ประกอบด้วยข้อมูลที่ครบถ้วนในหัวข้อนี้และมีแหล่งข้อมูลที่ดี นี่เป็นตัวเลือกที่ยอดเยี่ยมสำหรับนักออกแบบและนักพัฒนา (รวมถึงตัวฉันเองด้วย) ที่ต้องการขยายความรู้อย่างต่อเนื่อง

ด้วย Favico.js คุณสามารถสร้างไอคอน Favic แบบไดนามิกพร้อมตัวเลขได้

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

หากคุณต้องการเพิ่มเคล็ดลับอื่นให้กับบทความนี้หรือมีคำถาม โปรดแสดงความคิดเห็นด้านล่าง!

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

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

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

ตัวเลือกที่ง่ายที่สุดคือดาวน์โหลดคอลเลกชัน Favicon จากแกลเลอรี่หรือแค็ตตาล็อกออนไลน์ อ่านด้านล่างเกี่ยวกับสถานที่ที่คุณสามารถติดต่อได้

วิธีสร้าง Favicon ออนไลน์และตำแหน่งที่คุณสามารถดาวน์โหลดคอลเลกชันได้

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

1. Favicon.cc— ค่อนข้างเป็นเครื่องมือสร้าง favicon ออนไลน์ที่สะดวก เมื่อใช้มัน คุณสามารถสร้างไอคอนของคุณเองตั้งแต่เริ่มต้น (พิเศษเฉพาะทั้งหมด) วาดมันทีละพิกเซล ในการดำเนินการนี้ คุณจะต้องคลิกปุ่ม "สร้าง Favcon ใหม่" ทางด้านซ้ายของหน้าต่างบริการ

   

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

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

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

   

   ในหน้าต่างที่เปิดขึ้นให้คลิกที่ปุ่ม "เรียกดู" และค้นหาภาพที่เหมาะสมบนคอมพิวเตอร์ของคุณ จากนั้นเลือกว่าจะทำอย่างไรกับอัตราส่วนภาพของรูปภาพของคุณเมื่อแปลงเป็น 16 x 16 (สี่เหลี่ยมจัตุรัส) กรณีนี้จะเกิดขึ้นหากรูปภาพที่คุณอัปโหลดไม่เป็นสี่เหลี่ยมจัตุรัส ในกรณีนี้ เป็นไปได้สองตัวเลือก: ปล่อยให้อัตราส่วนภาพไม่เปลี่ยนแปลง (คงขนาดไว้) หรือแปลงรูปภาพเป็นมุมมองสี่เหลี่ยมจัตุรัส (ไอคอนย่อขนาดเป็นสี่เหลี่ยมจัตุรัส) ในกรณีที่สอง รูปภาพของ favicon ในอนาคตจะบิดเบี้ยวไปตามแกนใดแกนหนึ่ง

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

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

2. Favicon.ru— เมื่อบริการนี้ง่ายกว่าตัวสร้างออนไลน์ที่อธิบายไว้ข้างต้นมาก แต่เมื่อเร็ว ๆ นี้มันเกือบจะกลายเป็นอะนาล็อก แต่เป็นภาษารัสเซียเท่านั้น Favicon.ru ช่วยให้คุณไม่เพียงแต่แปลงรูปภาพใด ๆ ที่คุณมี (บนคอมพิวเตอร์ของคุณหรือบนอินเทอร์เน็ต) เป็นรูปแบบ ICO ที่มีขนาด 16 x 16 พิกเซล แต่ยังทำให้สามารถวาดมันตั้งแต่เริ่มต้น พิกเซลต่อพิกเซล

   

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

3. Logaster.ruเป็นเครื่องมือสร้างโลโก้ออนไลน์ แต่นอกเหนือจากโลโก้แล้ว มันยังสร้างไอคอน Fav อีกด้วย ไม่เหมือนกับบริการอื่นๆ ทั้งหมด คุณไม่จำเป็นต้องวาดการออกแบบไอคอน Fav หรือแปลงจากโลโก้

   

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

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

ตัวเลือกตัวสร้างออนไลน์ คอลเลกชัน และแกลเลอรีไอคอน Favic

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

1. FaviconGenerator - ช่วยให้คุณสามารถแปลงรูปภาพที่ดาวน์โหลดจากคอมพิวเตอร์ของคุณเป็นรูปแบบ favicon ที่ต้องการ (คุณสามารถอัปโหลดรูปภาพได้)
2. AntiFavicon เป็นตัวสร้าง Favicon ที่ค่อนข้างน่าสนใจ เมื่อนั้นคุณสามารถ สร้าง favicon พร้อมคำจารึก- คุณจะต้องป้อนข้อความจารึกในช่อง "ข้อความด้านบน" และ "ข้อความด้านล่าง" และปรับโทนสีในพื้นที่ "สี"
3. FavIcon จาก Pics เป็นอีกหนึ่งบริการออนไลน์ที่เรียบง่าย - คุณระบุเส้นทางไปยังรูปภาพบนคอมพิวเตอร์ของคุณ แปลงและดาวน์โหลดไฟล์ผลลัพธ์ในรูปแบบ ICO และ GIF
4. Iconj - สิ่งที่น่าทึ่งคือคุณสามารถดาวน์โหลดไอคอนที่สร้างขึ้นหรือปล่อยทิ้งไว้ในบริการและรับลิงก์ไปยังไฟล์นี้
5. DeGraeve เป็นเครื่องมือสร้าง Favicon ที่ทรงพลังพอสมควร ซึ่งมีฟังก์ชันการทำงานคล้ายกับ Favicon.cc ที่ได้รับการตรวจสอบก่อนหน้านี้ ที่นี่คุณสามารถทำทุกอย่างตั้งแต่เริ่มต้นหรืออัปโหลดรูปภาพซึ่งสามารถปรับเปลี่ยนและดาวน์โหลดในภายหลังในรูปแบบ ICO ในขนาดที่เหมาะสมได้
6. ตัวสร้าง - ช่วยให้คุณสร้างไอคอน favicon จากรูปภาพที่อัปโหลด และสร้างตั้งแต่ต้นในตัวแก้ไขพิเศษ
7. เครื่องมือแก้ไขไอคอนออนไลน์ favicon.ico - ก็ทำได้ทุกอย่าง - สร้างไอคอน Favicons ตั้งแต่เริ่มต้นและแก้ไขรูปภาพที่มีอยู่
8. Online Favicon เป็นเครื่องมือที่มีประโยชน์มากสำหรับการสร้างและแก้ไขโลโก้ขนาดเล็ก
9. เครื่องมือสร้าง Favicon ฟรี - ในกรณีที่ไม่มีรายการใดที่เหมาะกับคุณ
10. เครื่องกำเนิด Favicon - เรียบง่ายและมีรสนิยม...

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

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

หากคุณไม่มีความปรารถนาหรือโอกาส (คุณไม่ใช่ศิลปินและไม่เคยมี) วิธีที่ง่ายที่สุดคือลองค้นหาใน แกลเลอรี่พร้อมคอลเลกชั่นไอคอน Fav ฟรี:

1. Iconj เป็นชุดไอคอนขนาดใหญ่ที่ออกแบบโดยบุคคลอื่นและเผยแพร่สู่สาธารณะ
2. Favicon.cc - 55,000 ตัวเลือกที่แตกต่างกันสำหรับทุกโอกาส นอกจากนี้ยังมีไอคอนภาพเคลื่อนไหวซึ่งจะมองเห็นได้ในเบราว์เซอร์ FireFox เท่านั้น
3. แกลเลอรี Favicon - ไอคอนอีกสองสามอันที่เหมาะกับขนาด

หากคุณรู้จักแหล่งข้อมูลอื่นที่คล้ายคลึงกัน ฉันจะเพิ่มลิงก์ของคุณลงในรายการนี้

วิธีติดตั้ง Favicon บนเว็บไซต์และระบุเส้นทางไป

เบราว์เซอร์และหุ่นยนต์ค้นหา Yandex ของคุณจะ มองหา favicon เป็นหลักในโฟลเดอร์รูทของไซต์ของคุณ- ดังนั้นคุณจึงสามารถเชื่อมต่อกับไซต์ผ่าน FTP และอัปโหลดไฟล์ Favicon.ico ของคุณไปยังไดเร็กทอรีราก (โดยปกติจะเป็นโฟลเดอร์ public_htm หรือ htdocs) (ควรเขียนชื่อด้วยตัวอักษรตัวเล็ก) ตอนนี้ให้เปิดทรัพยากรของคุณในเบราว์เซอร์บางตัวแล้วดูว่าไอคอนบนแท็บมีการเปลี่ยนแปลงหรือไม่ มันเปลี่ยนไปหรือเปล่า? เลขที่? ไม่เป็นไร.

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

เปิดซอร์สโค้ดของหน้าใดก็ได้บนเว็บไซต์ของคุณ หากต้องการดูซอร์สโค้ด เพียงคลิกขวาที่เพจแล้วเลือกรายการเมนูบริบทที่เหมาะสม (เช่น “ซอร์สโค้ด” ใน Opera แบบเก่า หรือ “ซอร์สโค้ดของเพจ” ใน Mazila Firefox หรือ “ดูโค้ดเพจ” ใน Google Chrome หรือ “ดูโค้ด HTML” ใน IE) หรือกดคีย์ผสม Ctrl+U ตอนนี้ดูที่ด้านบนของโค้ดหน้าเพื่อดูบรรทัดที่ระบุเส้นทางไปยัง favicon.ico

อาจมีลักษณะดังนี้:

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

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

/templates/folder_with_the_design_template/favicon.ico

ไฟล์ Favicon ในรูปแบบ เวิร์ดเพรสโดยค่าเริ่มต้น มันสามารถอยู่ในโฟลเดอร์ที่มีธีมที่คุณใช้อยู่ (เส้นทางไปยังธีมนั้นก็ถูกกำหนดไว้ที่นั่นด้วย):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

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

ไฟล์เทมเพลตใดที่คุณต้องเขียนบรรทัดเหล่านี้ขึ้นอยู่กับกลไกของไซต์ของคุณ ตัวอย่างเช่นใน ในเวิร์ดเพรสคุณต้องเปิดไฟล์ header.php เพื่อแก้ไข: wp-content/themes/Folder_with_your_theme_design เปิด header.php ในตัวแก้ไข และในตอนแรกให้ค้นหาแท็กเปิด Html HEAD ในตำแหน่งใดก็ได้หลังจากนั้น แต่ก่อนปิด HEAD ให้เขียนโค้ดบรรทัดใดบรรทัดหนึ่งข้างต้นที่ระบุเส้นทางไปยังไฟล์กราฟิกโลโก้ขนาดเล็กของคุณ

วิธีการติดตั้ง ไอคอน Fav แบบเคลื่อนไหว- โดยพื้นฐานแล้วเหมือนกับปกติทุกประการ ข้อแตกต่างเพียงอย่างเดียวคือโค้ดที่แทรกลงในเทมเพลตเว็บไซต์ของคุณซึ่งคุณระบุเส้นทางไปยังเบราว์เซอร์และโรบ็อตค้นหา Yandex ไปยังไฟล์กราฟิกที่ต้องการ ความจริงก็คือ Favicon แบบเคลื่อนไหวจะมีส่วนขยาย GIF ดังนั้นคุณจะต้องเขียนสิ่งนี้ในบรรทัดของโค้ด:

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

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

คุณอาจจะสนใจ

ไคลเอนต์ FTP ออนไลน์ Net2ftp และ Google Alerts - บริการที่เป็นประโยชน์สำหรับผู้ดูแลเว็บ
การวิเคราะห์เว็บไซต์ในบริการออนไลน์ฟรี Pr-cy, Cy-pr, Be1, Xseo และอื่นๆ
ไอคอน ป้าย พื้นหลัง รูปภาพ และโลโก้สำหรับเว็บไซต์ (บริการออนไลน์ IconFinder, Freepik, PSDGraphics และอื่นๆ)
การใช้งาน - วิธีทำให้เว็บไซต์ของคุณสะดวกสำหรับผู้เยี่ยมชมและพยายามให้พวกเขาอ่านบทความของคุณให้นานที่สุด
เครื่องมือ MegaIndex - ชุดเครื่องมือสำหรับเว็บมาสเตอร์และเครื่องมือเพิ่มประสิทธิภาพ
วิธีตรวจสอบความเข้ากันได้ข้ามเบราว์เซอร์ของเค้าโครงของเว็บไซต์ใน Browsershots และตั้งค่าการส่ง ping เมื่อมีเนื้อหาใหม่ปรากฏขึ้น
Http - คืออะไร, วิธีดูส่วนหัวและตรวจสอบรหัสตอบกลับของเซิร์ฟเวอร์, รหัส 200, 301, 302, 404 และ 500 หมายถึงอะไร
Crossposting - มันคืออะไรและทำอย่างไรให้ถูกต้อง

ในบทเรียนวันนี้ฉันจะเล่าให้คุณฟัง ไอคอนฟาวิคอน (ไอคอน Fav- ฉันจะแสดงให้คุณดู วิธีสร้าง favicon.ico สำหรับเว็บไซต์(หรือสำหรับบล็อกก็ไม่สำคัญ) และฉันจะแสดงให้คุณเห็นว่าเป็นไปได้อย่างไร ใส่ favicon.

แน่นอนว่าหลายคนยังไม่รู้ว่าฉันกำลังพูดถึง “ปาฏิหาริย์” อะไร พูดง่ายๆ ก็คือ Favicon คือรูปภาพ (ไอคอน) ที่ปรากฏในเบราว์เซอร์ก่อนที่อยู่ไซต์ ฉันจะแสดง Favicon ของบล็อกของฉันให้คุณดู:

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

แผนการสอน:

1. การสร้าง Favicon ตั้งแต่เริ่มต้น
2. การสร้าง favicon จากภาพที่เสร็จแล้ว
3. บริการพร้อมไอคอนสำเร็จรูปสำหรับเว็บไซต์
4. การแนบไอคอนผลลัพธ์เข้ากับไซต์

วิธีสร้าง Favicon ตั้งแต่เริ่มต้น

มีบริการหนึ่งที่สะดวกมาก มีที่อยู่ favicon.cc บริการสร้าง favicon นี้มีลักษณะดังนี้:

– ใช่ บริการนี้มีไอคอน Fav สำเร็จรูปด้วย

วิธีสร้าง Favicon สำหรับเว็บไซต์

หลังจากที่เราสร้าง favicon แล้ว เราจำเป็นต้อง “แนบ” มันเข้ากับไซต์ ในการทำเช่นนี้คุณต้องทำสิ่งต่อไปนี้:

อย่างที่คุณเห็นทุกอย่าง "ล้ม" อย่างถูกต้อง ฉันหวังว่าคุณจะไม่มีปัญหาใดๆเช่นกัน หากมีข้อสงสัยสามารถสอบถามได้ที่

โครงสร้าง: ไอคอน Fav เป็นไอคอนขนาดเล็กที่ใช้ในการระบุไซต์ของคุณในบุ๊กมาร์กด้วยสายตา และยังเป็นสิ่งที่คุณเห็นถัดจากชื่อไซต์หรือเพจในแท็บเบราว์เซอร์อีกด้วย โดยทั่วไปแล้ว favicon จะเป็นสี่เหลี่ยมจัตุรัสขนาด 16x16 พิกเซลในรูปแบบ favicon.ico ในบทความนี้ เราจะอธิบายว่าคุณต้องเริ่มต้น "ฐาน" ใด ช่วยคุณสร้างไอคอนประจำเว็บไซต์โดยใช้โปรแกรมแก้ไขกราฟิก และพูดคุยเกี่ยวกับวิธีเพิ่มไอคอนประจำเว็บไซต์ในเว็บไซต์ของคุณ คุณต้องเริ่มต้นอะไรบ้าง?

1. โลโก้ของคุณต้องมีขนาดอย่างน้อย 512x512 พิกเซล (ต้องเป็นสี่เหลี่ยมจัตุรัส)
2. รูปแบบภาพ .PNG;
3. โปรแกรมแก้ไขกราฟิก Adobe Photoshop หรือ GIMP

สร้าง favicon โดยใช้ Adobe Photoshop

Favicon บนพื้นหลังโปร่งใส:

Favicon บนพื้นหลังที่มีสีองค์กร:

การสร้าง favicon โดยใช้ GIMP - โปรแกรมจัดการรูปภาพ GNU

ข้อดีของการใช้ .ICO มากกว่า .PNG หรือ .GIF

1. ความเข้ากันได้: เบราว์เซอร์ทั้งหมด รวมถึง IE 5.0 รองรับรูปแบบ .ico
2. การหลีกเลี่ยงข้อผิดพลาดของเซิร์ฟเวอร์ 404: เบราว์เซอร์สมัยใหม่ทั้งหมด (ทดสอบกับ Chrome 4, Firefox 3.5, IE8, Opera 10 และ Safari 4) จะขอไฟล์ favicon.ico เสมอ ดังนั้นจึงเป็นการดีที่สุดที่จะมีไฟล์ favicon.ico เสมอ
3. ไฟล์ .ico สามารถมีได้มากกว่าหนึ่งไอคอน ดังนั้นคุณไม่จำเป็นต้องสร้างหลายไฟล์สำหรับไอคอนขนาด 16x16 และ 48x48 พิกเซล

แปลง .PNG เป็น .ICO ด้วยตัวแปลงออนไลน์

จะติดตั้ง favicon บน WordPress ได้อย่างไร?