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

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

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

พื้นฐานจากFavicons - แนวปฏิบัติที่ดีที่สุดสำหรับปี 2556 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

ไอคอน Apple Touch apple-touch-icon-precomposed.png (152x152)

และแผ่นชีท "ที่ทำให้เจ็บปวด" อย่างเจ็บปวดไปจนถึงขนาด / ประเภท faviconบน GitHub

ควรอ่านเสมอ: http://www.jonathantneal.com/blog/understand-the-favicon/

จะรวมอะไรบ้าง

ขั้นต่ำ

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

สำหรับการครอบงำ

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

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

Microsoft แนะนำให้รวมรูปภาพขนาด 16x16, 32x32 และ 48x48

วิธีมาตรฐานในการกำหนด favicon ของคุณ:

<link rel="shortcut icon" href="/favicon.ico" />

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

favicon.png

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

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - ประเภทลิงก์ "ไอคอน"

ขนาดที่คุณประกาศขึ้นอยู่กับอุปกรณ์ที่คุณต้องการสนับสนุน ขนาดทั่วไปและที่ไม่ธรรมดามีดังนี้:

• 32x32
• 48x48
• 64x64
• 96x96
• ไอคอนขนาด128x128 Chrome เว็บสโตร์
• 160x160 Chrome สำหรับ Android
• 192x192 Chrome สำหรับ Android
• ไอคอน 195x195 Opera Speed ​​Dial
• 196x196 Chrome สำหรับ Android
• ไอคอน228x228 Opera Coast

ไอคอน Apple Touch

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

หากไม่มีการระบุไอคอนโดยใช้องค์ประกอบลิงก์ iOS จะค้นหาไอคอนไดเรกทอรีด้วยapple-touch-iconคำนำหน้า อุปกรณ์ iOS ไม่ได้มีเพียงอุปกรณ์เดียวเท่านั้นที่ใช้ไอคอนเหล่านี้ (เช่น Android Chrome) ดังนั้นการประกาศว่าเป็นตัวเลือกที่ปลอดภัยกว่า

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• แนวทางอินเทอร์เฟซสำหรับมนุษย์ iOS - ขนาดไอคอน

• iOS Developer Library - การระบุไอคอนเว็บเพจสำหรับเว็บคลิป

Windows Tile

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

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

ขนาดรูปภาพที่แนะนำนั้นใหญ่กว่าชื่อของภาพเหล่านั้นที่แนะนำ ขนาดเหล่านี้เป็นขนาดที่แนะนำจากmicrosoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

สีกระเบื้องและชื่อ

พฤติกรรมเริ่มต้นของกระเบื้องคือการใช้ชื่อของกระเบื้องจาก<title>แท็กและเคารพความโปร่งใสใด ๆ ในภาพกระเบื้องแสดงสีพื้นหลัง คุณสามารถปรับแต่งสีและชื่อเรื่องโดยใช้เมตาแท็กเหล่านี้:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

ทั้งหมดmsapplicationแท็ก meta สามารถถอดออกและแทนที่ด้วยไฟล์ XML browserconfig.xmlในโฟลเดอร์รากเรียกว่า ไฟล์ XML ควรมีลักษณะดังนี้:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

การอ่านและทรัพยากรเพิ่มเติม

• Favicon สูตรโกง

• Favicons, ไอคอนสัมผัส, ไอคอนไทล์, ฯลฯ คุณต้องการอะไร? - เขียนเป็นคำถาม แต่มีข้อมูลที่มีประโยชน์มากมาย (และคุณสามารถอ่านมันเป็นบทความลืมว่ามันเป็นคำถาม)

• คู่มือไอคอน

• ImageMagick - เครื่องมือบรรทัดคำสั่งที่มีประโยชน์สำหรับการแปลงรูปภาพ

• RealFaviconGenerator.net - เครื่องกำเนิด favicon ที่ครอบคลุม

• FAVIC-O-MATIC - ตัวกำเนิด favicon ที่ครอบคลุมพร้อมรูปแบบเอาต์พุตที่ปรับแต่งได้ง่าย

เครื่องมือนี้ช่วยประหยัดเวลาได้อย่างมาก ลอง! ดูแลทุกอย่างให้คุณ

อัปโหลดรูปภาพของคุณที่ประมาณ 800px x 800px เพื่อให้สวยงามและคมชัด

http://realfavicongenerator.net/

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

<meta name="apple-mobile-web-app-title" content="Website Name">

หวังว่าจะช่วย!

ใช้งาน GRUNT นี้เพื่อสร้างตัวแปรที่เป็นไปได้ทั้งหมด:

https://github.com/gleero/grunt-favicons

สร้างไอคอนประเภทและขนาดที่รู้จักทั้งหมดจากภาพ PNG ใช้ ImageMagick

อินพุต:โลโก้สี่เหลี่ยมจัตุรัสใน png นอกจากนี้คุณยังสามารถอยู่ใกล้กับไฟล์ต้นฉบับด้วยคำนำหน้าความละเอียดเช่น source.16x16.png

เอาท์พุท:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

เพิ่มการเปลี่ยนแปลงในไฟล์ html

http://faviconit.com

จะสร้างไอคอนขนาดแตกต่างกันประมาณ 15 ขนาดสำหรับอุปกรณ์ทั้งหมดจาก PNG ความละเอียดสูงหนึ่งรายการ

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

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

ฉันจะอัปเดตหน้าโครงการพร้อมข้อมูลรายละเอียดเพิ่มเติม แต่มันมีเมนูช่วยเหลือที่เป็นประโยชน์และเป็นมาตรฐานอยู่แล้วและทำงานบน Unix, Mac และ Windows

คุณเพียงเรียกใช้สคริปต์. bat หรือ. sh ในเทอร์มินัลของคุณ

อดีตสำหรับ Windows:

faviconbuild.bat -h

หรือสำหรับ Unix / Mac (หรือ Windows หากใช้ Cygwin):

faviconbuild.sh -h

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

นี่คือตัวอย่างของวิธีที่ฉันใช้มันในหนึ่งในโครงการของฉัน:

./faviconbuild/faviconbuild.sh -i ./source.png

ฉันวางโฟลเดอร์ faviconbuild ไว้ในโฟลเดอร์เฉพาะของโครงการดังนั้นฉันจึงไม่ต้องแตะไฟล์โครงการจริงและวางไว้ข้างๆที่ฉันวาง source.png พฤติกรรมเริ่มต้นของสคริปต์คือการวางทุกอย่างไว้ในโฟลเดอร์บิลด์ที่ซ้อนกันซึ่งถูก gitignored ดังนั้นจึงไม่ขัดแย้งกับโปรเจ็กต์หากคุณใช้ git

หากฉันทำอะไรหายไปโปรดส่งคำขอคุณลักษณะ

ฉันยังมีโพสต์บล็อกพร้อมข้อมูลเพิ่มเติม

ฉันหวังว่าคุณจะพบว่ามีประโยชน์นี้

มีข้อมูลที่เป็นประโยชน์มากมายเกี่ยวกับขนาดและกำเนิดของ favicon ที่นี่

ฉันสามารถเพิ่มการอภิปรายโดยการอธิบายความต้องการการออกแบบที่มีขนาดแตกต่างกัน

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

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

สำหรับ 16 x 16 ฉันจะสร้างตารางสี่เหลี่ยมขนาด 16x16 และระบายสีแต่ละส่วนเพื่อให้ได้ผลผลิตมากที่สุด