มาตรฐานที่ทันสมัยสำหรับการเพิ่ม favicon ในเว็บไซต์ของฉันคืออะไร รูปแบบและขนาดของรูปภาพมาตรฐานคืออะไร?
ฉันจะเพิ่ม favicon ในเว็บไซต์ของฉันได้อย่างไร
คำตอบ:
หากต้องการใช้งานกับเบราว์เซอร์ทุกประเภทขอ.icoแนะนำให้ใช้ขนาด 32x32 ซึ่งใช้กันอย่างแพร่หลาย 16x16 ยังใช้งานได้ (นี่เป็นขนาดที่แท้จริงที่ใช้ในเบราว์เซอร์ในสถานที่ส่วนใหญ่)
ไม่รวมอยู่ในคำถามของคุณพวกเขาควรมีความลึกของสี 8 หรือ 24 บิต
มันอาจจะน่าสังเกตว่าถ้าคุณวางแผนที่จะทำสิ่งที่ผู้ใช้คั่นหน้าเว็บไซต์ของคุณนั่นเป็นสิ่งที่แยกต่างหาก<link>สำหรับภาพเช่น StackOverflow ของ:
<link rel="apple-touch-icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png">ซึ่งเป็น:
คุณสามารถใช้เครื่องมือเช่นhttp://www.favicon.cc/เพื่อนำเข้ารูปภาพและแปลงเป็น favicon หรือเพียงแค่สร้างมันขึ้นมาใหม่
หลังจากนั้นหากคุณตั้งชื่อไฟล์ของคุณfavicon.icoและวางไว้ที่รากของเว็บไซต์ของคุณเว็บเบราว์เซอร์ส่วนใหญ่จะได้รับไฟล์โดยอัตโนมัติ
แต่คุณสามารถประกาศอย่างชัดเจนในไฟล์ html ของคุณดังนี้:
<link rel="shortcut icon" type="image/png" href="path/to/your/favicon.png" />ด้วยข้อดีที่จะใช้รูปแบบอื่นนอกเหนือจากicoใช้ favifen differents ในหน้า differents ใส่ favicon ของคุณไปยังที่อื่นใช้ชื่อfaviconอื่นเป็นต้น
มาร์กอัปที่มีพา ธ http ของโดเมนแบบเต็มสำหรับ IEและเก็บ favicon ไว้ในโฟลเดอร์เอกสาร:
<link rel="shortcut icon" href="http://www.your-site-domain/favicon.ico">รูปแบบภาพมาตรฐาน:
- .ico
- 16 x 16 พิกเซล
สำหรับอุปกรณ์เบราว์เซอร์และระบบปฏิบัติการที่แตกต่างกันคุณสามารถใช้ไอคอนต่างๆ ตัวอย่างด้านล่างคือรายการที่อาจทำให้คุณได้รับแรงบันดาลใจ ทำโดยทั้งหมดหมายถึงแก้ไข / แก้ไขรายการเป็นสิ่งที่ความคืบหน้า
<link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="96x96" href="/images/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/images/icons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="/images/icons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/images/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/images/icons/android-chrome-192x192.png" sizes="192x192" />
<link rel="mask-icon" href="/images/icons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="theme-color" content="#282B34" />คุณไม่ต้องการลิงค์อีกต่อไป แต่มันมีประโยชน์ แต่ตราบใดที่คุณปล่อยให้ไฟล์ชื่อ favicon.ico (และเป็น ico) ในรูทของคุณมันจะถูกใช้เป็น favicon
ฉันมีปัญหาเล็กน้อยในการสร้างไฟล์. ico ด้วย GIMP แต่โพสต์นี้ให้คำแนะนำโดยละเอียด เคล็ดลับดูเหมือนจะบันทึกเป็นรูปแบบ GIF ก่อนที่จะแปลงเป็นตารางสีที่จัดทำดัชนีจากนั้นแปลงเป็นรูปแบบ ICO