การสร้างไอคอน Fav [ปิด]

94

ฉันจะสร้างไอคอน Fav สำหรับเว็บไซต์ของฉันได้อย่างไร

html  favicon 
— Ry-
แหล่งที่มา
1
— MichałPerłakowski
@Gothdo นี่ไม่ซ้ำ! คนที่คุณชี้ไปที่ IS! อันนี้ก่อนหน้านั้นหนึ่งปีครึ่ง!
— Dov Miller
5
ฉันโหวตให้ปิดคำถามนี้เป็นนอกประเด็นเพราะนี่ไม่เกี่ยวกับการเขียนโปรแกรม แต่เป็นการออกแบบเว็บ
— Kyll
@DovMiller คำถามที่ดีกว่าพร้อมคำตอบที่ดีกว่าคือคำถามที่ควรเปิดอยู่
— mbomb007

คำตอบ:

102

ค้นหา Favicons ฉันพบว่าฉันต้องการไฟล์มากกว่า 10 ชนิดเพื่อให้ทำงานได้ในเบราว์เซอร์และอุปกรณ์ทั้งหมด :(

ฉันโกรธและสร้างตัวสร้างFaviconของตัวเองซึ่งสร้างไฟล์เหล่านี้ทั้งหมดและส่วนหัว HTML ที่ถูกต้องสำหรับแต่ละไฟล์: faviconit.com

หวังว่าคุณจะสนุกกับมัน.

— เอดูอาร์โดรุสโซ
แหล่งที่มา
14
แอพที่ยอดเยี่ยม นี่เป็นหนึ่งในไซต์สร้าง Favicon ที่ดีที่สุดที่ฉันเคยเห็น
— Chris Livdahl
1
ขอบคุณคริส! ฉันยินดีที่จะช่วย!
— Eduardo Russo
3
@EduardoRusso นี่มันยอดเยี่ยมมาก - ขอบคุณ!
— davnicwil
4
ทำได้ดีมาก ทำงานได้ตามที่คาดไว้
— Dilshan
1
ได้ผลดีเกินคาด! ข้อบกพร่องเล็ก ๆ (?): เมื่อใช้ขั้นสูงเส้นทางและเวอร์ชันจะไม่รวมอยู่ใน browserconfig.xml ยังคงรักมันแม้ว่า : D
— mrjink
42

หากคุณมีภาพโลโก้ที่คุณต้องการที่จะเปลี่ยนเป็น favicon แล้วคุณสามารถแปลงโดยใช้http://www.favicomatic.com/ มันสร้าง Favicons ที่คมชัดและฉันไม่ต้องแก้ไขหลังจากสร้างแล้ว มันจะสร้าง Favicons ที่ 16x16 และ 32x32 และอ้างว่า: "ทุกขนาดครับท่าน!" ไซต์นี้ยังสนับสนุน / รักษาความโปร่งใสที่มีอยู่ใน png บางส่วน นอกจากนี้ไซต์ของพวกเขายังดูดีและใช้งานง่าย

ตัวอย่างเช่นนี่คือโลโก้ stackoverflow: ป้อนคำอธิบายภาพที่นี่

นี่คือ Favicons ที่สร้างขึ้นบางส่วน:

ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่ ป้อนคำอธิบายภาพที่นี่

พวกเขายังสร้าง html ที่จำเป็น:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

ฉันดูผลการค้นหาของ Google ประมาณ 20 รายการแรกและนี่เป็นสิ่งที่ดีที่สุด

— จาเร็ดเมนาร์ด
แหล่งที่มา
1
ฉันจะปรับปรุงคำตอบนี้เพื่อหลีกเลี่ยงการโหวตไม่ได้อีกได้อย่างไร
— Jared Menard
3
ฉันไม่รู้ คำตอบของคุณทำให้งานนี้เป็นเวลาห้านาทีสำหรับฉัน ขอบคุณ.
— andyb
1
บางคนก็ชอบที่จะโหวตโดยไม่มีเหตุผล ดังนั้นจำเป็นต้องมีนโยบายต่อต้านมัน Btw เราต้องการขนาดที่แตกต่างกันจริงๆหรือเรา 16x16 และ 32x32 เพียงพอสำหรับการสร้างเว็บไซต์
— Emil
โดยส่วนตัวแล้วฉันไม่รู้ว่าแนวทางปฏิบัติที่ดีที่สุดคืออะไร ในไซต์ของฉันฉันคิดว่าเราใช้เพียงอย่างเดียว สิ่งเหล่านี้อาจเป็นประโยชน์สำหรับเว็บแอปแบบโปรเกรสซีฟของ Chrome เมื่อรวมกับ manifest.json
— Jared Menard
ฉันพบแหล่งข้อมูลนี้ในfavicomatic.comเรียกว่า "Favicon Cheat Sheet" github.com/audreyr/favicon-cheat-sheet
— Jared Menard
20

GIMPเป็นโปรแกรมที่ดีสำหรับสิ่งนั้น เพียงบันทึกภาพเป็น PNG จากนั้นเพิ่ม

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

ใน<HEAD>ส่วนของเพจของคุณ

— สเตฟาโนบอรินี่
แหล่งที่มา
7
Gimp ยังเสนอตัวเลือกในการบันทึกเป็น favicon.ico ซึ่งจะช่วยลดปัญหาในการเพิ่มลิงก์
4
น่าเสียดายที่ MSIE รุ่นเก่า (ซึ่งยังค่อนข้างเป็นที่นิยม) จะไม่ยอมรับ PNG แทนไฟล์ที่จัดรูปแบบ ICO "ที่เหมาะสม"
— MárÖrlygsson
ในการตรึงเว็บไซต์ไว้ที่ทาสก์บาร์ Windows ก็ต้องใช้ ico เช่นกัน
— Necriis
8

คุณสร้างไฟล์ไอคอนขนาด 16x16 หรือ 32x32 หรือ 64x64 ตั้งชื่อเป็น favicon.ico และวางไว้ในรูทของโฟลเดอร์สาธารณะของเว็บไซต์ของคุณ

มีเว็บไซต์ที่จะแปลงรูปแบบกราฟิกอื่น ๆ เป็น. ico ให้คุณ กล่าวคือ. http://tools.dynamicdrive.com/favicon/

— จิม
แหล่งที่มา
4
นอกจากนี้:คุณสามารถบันทึกไฟล์ Favicon ของคุณได้ทุกที่หากคุณเพิ่ม a <link rel="shortcut icon" href="link/to/fav.ico" />ลงใน<head>บล็อกของเพจของคุณ
— MárÖrlygsson
1
tools.dynamicdrive.com/favicon ยังช่วยให้คุณสามารถรวมหลายขนาดใน Favico เดียวซึ่งดีมาก
— hdorio
5

หนึ่งในเครื่องมือที่ดีที่สุด favicon ออนไลน์เป็นFaviconGenerator.com การออกแบบที่รวดเร็วและทันสมัยไม่เป็นขุย

— เคาะ X
แหล่งที่มา
1
FaviconGenerator.comยังให้การเข้าถึง API จาก node / grunt / gulp
— Matt
3

หากคุณต้องการสร้างไฟล์. ico คุณยังสามารถใช้GIMPเพื่อสร้าง Favicons เบราว์เซอร์สมัยใหม่สามารถใช้ไฟล์รูปภาพธรรมดาได้ แต่เดิมทีฉันคิดว่ามันเป็นแค่ไฟล์. ico เป็นโปรแกรมแก้ไขภาพโอเพนซอร์สคล้ายกับ Photoshop สร้างและแก้ไขภาพที่มีขนาดที่เหมาะสม (เช่น 32 x 32) แบนเป็นเลเยอร์เดียว (เว้นแต่คุณต้องการหลายไอคอนในไฟล์เดียวกัน) และบันทึกเป็น. ico จะจัดรูปแบบให้ถูกต้องจากนั้นใช้ Stefano's <link rel="SHORTCUT ICON" HREF="/favicon.ico">เพื่อใช้ในหน้าเว็บของคุณ

— ลิง
แหล่งที่มา
3

ผมใช้โอเพนซอร์สPaint.netโปรแกรมพร้อมกับปลั๊กอินไอคอน

จากนั้นคุณสามารถสร้างและบันทึกรูปภาพในรูปแบบ. ico โดยมีขนาดต่างๆทั้งหมดฝังอยู่ในไฟล์. ico

— แมทธิวล็อค
แหล่งที่มา
อืม paint.net.amihotornot.com.au เป็นโฮสต์สำหรับปลั๊กอิน Icon? ถูกต้องหรือไม่?
— RonaldB
@RonaldB ใช่มันเป็นที่ตั้งของปลั๊กอินนั้น โดเมนแปลก ๆ ไม่ใช่
— Matthew Lock
3

เมื่อสร้างไอคอน Fav คุณต้องคำนึงถึงปัจจัยต่อไปนี้:

  • แพลตฟอร์มที่รองรับเมื่อสิบปีก่อนคุณต้องการสนับสนุนเบราว์เซอร์เดสก์ท็อปเท่านั้นและวิธีแก้ปัญหาคือสร้างfavicon.icoภาพคลาสสิก ปัจจุบันคุณต้องการรองรับ iOS (และ iOS Safari) และ Android (และ Android Chrome) อาจเป็น Windows 10 (และ Edge) และ Mac Book Pro Touch Bar ใหม่ด้วย (macOS Safari) คุณไม่สามารถใช้เพียงภาพเดียว "ขนาดเดียวที่พอดีกับทุกภาพ" ได้อีกต่อไป
  • ออกแบบทันทีที่คุณรองรับหลายแพลตฟอร์มคุณกำลังเผชิญกับแนวทางการออกแบบที่หลากหลาย ตัวอย่างเช่น Google ใช้ไอคอนโปร่งใสสำหรับแอปที่มาพร้อมเครื่องบน Android ในขณะที่ไอคอน iOS ไม่สามารถโปร่งใสได้เลย คุณไม่สามารถใช้เพียงแนวทาง "การออกแบบเดียวที่เหมาะกับทุกคน"
  • ไอคอนและโค้ด HTML ที่สร้างขึ้นเป็นเวลาสองหรือสามปีการอ้างอิงได้รับการสร้างไอคอนให้ได้มากที่สุดเพื่อให้ครอบคลุมทุกกรณี ฉันกลัวว่าฉันจะสร้างเทรนด์นี้ขึ้นมาด้วยตัวเอง: - / ปัญหาคือคุณจบลงด้วยบรรทัดอะไรสัก 20 อย่างหรือ HTML ซึ่งมากเกินไป เพื่อให้ได้โซลูชันทางเทคนิคที่น่าพอใจคุณต้องสร้างความสมดุลระหว่างจำนวนไอคอน / HTML ที่สร้างขึ้นและแพลตฟอร์มที่รองรับ

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

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

— Philippe_b
แหล่งที่มา
1

และหากคุณใช้ asp.net ลองใช้วิธีนี้เพื่อใช้ไอคอน Fav กับเพจของคุณ:

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

แต่คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่นี่: http://doctype.com/

— ทาริก
แหล่งที่มา
1
โปรดทราบว่า doctype.com ปิดให้บริการในวันที่ 15 กุมภาพันธ์ 2013 อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้
— Krease
1

ฉันสร้าง Favicons ของฉันด้วย 16 x 16 หรือ 32 x 32 โดยใช้ Photoshop ฉันบันทึกเป็น gif จากนั้นฉันใช้IrfanViewเพื่อแปลง gif เป็น ico

— สูงสุด
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.