favicon.png vs favicon.ico - เพราะเหตุใดฉันจึงควรใช้ PNG แทน ICO

442

นอกเหนือจากข้อเท็จจริงที่ว่า PNG เป็นรูปแบบรูปภาพที่ธรรมดากว่านี้มีเหตุผลทางเทคนิคใดบ้างที่จะให้ความโปรดปราน favicon.png กับ favicon.ico?

ฉันรองรับเบราว์เซอร์รุ่นใหม่ที่สนับสนุนไอคอนโปรดของ PNG

png favicon ico

— Jon Galloway
แหล่งที่มา

233

คำตอบถูกแทนที่ (และเปลี่ยนเป็น Community Wiki) เนื่องจากมีการอัปเดตและบันทึกย่อมากมายจากผู้อื่นในหัวข้อนี้:

ICOs และ PNG ทั้งคู่อนุญาตให้ใช้อัลฟ่าแบบเต็มช่องสัญญาณได้อย่างโปร่งใส
ICO อนุญาตให้ย้อนกลับเข้ากันได้กับเบราว์เซอร์รุ่นเก่า (เช่น IE6)
PNG อาจได้รับการสนับสนุนการใช้เครื่องมือที่กว้างขึ้นเพื่อความโปร่งใส แต่คุณสามารถค้นหาเครื่องมือในการสร้าง ICO ของช่องอัลฟาได้เช่นเครื่องมือ Dynamic Driveและปลั๊กอิน Photoshop ที่ @mercator พูดถึง

อย่าลังเลที่จะศึกษาคำตอบอื่น ๆ ที่นี่เพื่อรับรายละเอียดเพิ่มเติม

— อำพัน
แหล่งที่มา

78

ICO อนุญาตช่องอัลฟา

— ÁlvaroGonzález

58

-1 ICO รองรับความละเอียดหลายรายการรวมถึงช่องอัลฟาเต็มรูปแบบ โดยวิธีการอัลฟา 1 บิตเป็นที่รู้จักกันในชื่อ "โปร่งใส" ข้อ จำกัด จริงเท่านั้นที่ ICO มีคือไอคอนที่มีขนาดใหญ่กว่าหรือเท่ากับ 256 ความยาว (ทุกทิศทาง) แม้ว่ามันจะถูกเอาชนะไปหลายครั้ง

— คริสเตียน

26

-1 .ico ยังอนุญาตให้มีความละเอียดหลายไฟล์ในหนึ่งไฟล์ (เช่น 16x16 และ 32x32) ดังนั้น icone ยังคงดีเมื่อคุณสร้างทางลัดบนเดสก์ท็อป

— กาการีน

4

เบราว์เซอร์ส่วนใหญ่นิยม favicon.ico ในรูทมากกว่าลิงค์ที่เชื่อมโยง ด้วยโซลูชันของคุณเบราว์เซอร์ส่วนใหญ่จะเลือก. ico ที่ไม่โปร่งใสแทน png ที่เชื่อมโยง

— แร่

@ โหมดทำไมมันจะเลือกเฉพาะ ico ที่ไม่โปร่งใสแทนที่จะเป็น ico ที่โปร่งใส

— Rob Grant

367

เบราว์เซอร์ที่ทันสมัยทั้งหมด (ทดสอบด้วย Chrome 4, Firefox 3.5, IE8, Opera และ Safari 10 4) มักจะขอให้มีการยกเว้นในกรณีที่คุณได้ระบุไว้ทางลัดผ่านไอคอนfavicon.ico <link>ดังนั้นหากคุณไม่ได้ระบุอย่างชัดเจนคุณควรมีfavicon.icoไฟล์เสมอเพื่อหลีกเลี่ยง 404 Yahoo! แนะนำให้คุณทำให้มันเล็กและแคช

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

นอกจากนี้ยังมีปลั๊กอิน Photoshopฟรีที่สามารถสร้างได้

— Mercator
แหล่งที่มา

6

คำแนะนำที่ยอดเยี่ยมของเครื่องมือ Dynamic Drive นี้! บุ๊คมาร์คทันที ขอบคุณ!

— Marcos Buarque

3

เครื่องมือใหม่มันเป็นเรื่องจริงมาก มีเครื่องมือออกแบบไอคอนหลายอัน ฉันเคยเขียนเรื่องง่าย ๆ ด้วยตัวเองในอดีต

— คริสเตียน

4

สำหรับผู้ที่ไม่ได้มี $ 650 เหรียญสำหรับ Photoshop คุณสามารถใช้ pixlr.com (ฟรี) เพื่อสร้างแก้ไขและบันทึก .png ไฟล์ที่มีชั้นเต็มรูปแบบและความโปร่งใส :)

— สกอตต์ B

3

@Pierier มันยากที่จะได้รับ.icoการแก้ไขใน PS และแม้ว่าคุณจะทำผลลัพธ์สุดท้ายนั้นแย่มากคุณคิดว่า.bmpเป็นรูปแบบที่ดีกว่า (มันเพิ่มข้อมูลจำนวนมากที่ทำให้การแก้ไขอีกครั้งมีความเจ็บปวดอย่างมาก)

— คริสเตียน

4

@mikevoermans: ยังคงอ่านเป็น PNG; เบราว์เซอร์ที่ทันสมัยส่วนใหญ่ไม่สนใจมากเกี่ยวกับนามสกุลไฟล์ BTW นี่เป็นคำตอบที่ดีที่สุดและควรเป็นคำตอบที่ยอมรับได้

— rvighne

48

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

ดูที่ประเภทStackOverflowใช้ตัวอย่าง (โปรดสังเกตว่ามันโปร่งใส):

<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico"> 
<link rel="apple-touch-icon" href="http://sstatic.net/so/apple-touch-icon.png">

สิ่งที่ apple-itouch สำหรับผู้ใช้ iphone ที่สร้างทางลัดไปยังเว็บไซต์

— Wouter van Nifterick
แหล่งที่มา

16

PNG ยังสามารถให้ช่องอัลฟา

— ÁlvaroGonzález

10

ใช่ประเด็นของฉันคือ ico สามารถทำทุกอย่างที่ png สามารถทำได้ (alpha-transparent) ในฐานะ favicon และเบราว์เซอร์ทั้งหมดได้รับการสนับสนุนตั้งแต่ปีที่ 0

— Wouter van Nifterick

ตามที่ผู้สำรวจอินเทอร์เน็ตวิกิพีเดียจะไม่สนับสนุนบรรทัดดังนี้: <link rel = "icon" type = "image / vnd.microsoft.icon" href = " example.com/image.ico " />

— frankster

2

โอกาสที่เว็บไซต์จะไม่รองรับเบราว์เซอร์ตั้งแต่ปี 0 ดังนั้นทำไมต้องกังวล ลองและโหลดเว็บไซต์ที่ทันสมัยใน IE6 และดูว่าเกิดอะไรขึ้น)

— Dominic

26

ข้อได้เปรียบทางทฤษฎีของไฟล์ * .ico คือมันเป็นคอนเทนเนอร์ที่สามารถเก็บได้มากกว่าหนึ่งไอคอน ตัวอย่างเช่นคุณสามารถจัดเก็บภาพที่มีช่องอัลฟาและรุ่น 16 สีสำหรับระบบเดิมหรือคุณสามารถเพิ่มไอคอน 32x32 และ 48x48 (ซึ่งจะปรากฏขึ้นเมื่อเช่นการลากลิงก์ไปยัง Windows Explorer)

อย่างไรก็ตามความคิดที่ดีนี้มีแนวโน้มที่จะขัดแย้งกับการใช้งานเบราว์เซอร์

— ÁlvaroGonzález
แหล่งที่มา

ที่เกี่ยวข้องกับเรื่องนี้คือความจริงที่ว่า IE9 ยังใช้ไอคอนขนาดใหญ่เหล่านั้นเพื่อ pin ไปที่ทาสก์บาร์ win7 ดู: stackoverflow.com/questions/3723715//

— GazB

เอ่อทฤษฎี? ไอคอนเดียวกันที่มาพร้อมกับ Windows 7 สามารถใช้ใน Windows 95 ในโหมดสี 8 บิต ฉันคิดว่ามันใช้งานได้จริงเหรอ?

— คริสเตียน

โปรดทราบว่าคำตอบนี้เขียนเมื่อปี 2009 ฉากเบราว์เซอร์ในขณะนั้นแตกต่างอย่างมากจากตอนนี้

— ÁlvaroGonzález

15

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

เพื่อสร้าง Png และไอคอนไฟล์ฉันจะแนะนำพิการ

— pmoleri
แหล่งที่มา

3

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

— Roman Starkov

1

เรากำลังพูดถึง favicons ดังนั้นปัญหาการสนับสนุนจึงเป็นสิ่งที่ตรงกันข้ามกับสิ่งที่คุณพูด

— David Heffernan

1

+1 ตอบคำถามเดิมและไม่จมอยู่กับความโปร่งใส นอกจากนี้ยังกล่าวถึงแอปซึ่งไม่สนับสนุนรูปแบบ .ico

— kovacsbv

12

เครื่องมือโซเชียลบางอย่างเช่น Google+ ใช้วิธีง่าย ๆ ในการรับ favicon สำหรับลิงก์ภายนอกเรียก http://your.domainname.com/favicon.ico

เนื่องจากไม่ได้ดึงเนื้อหา HTML ล่วงหน้า<link>แท็กจะไม่ทำงาน ในกรณีนี้คุณอาจต้องการใช้กฎ mod_rewrite หรือเพียงวางไฟล์ในตำแหน่งเริ่มต้น

— jdavid.net
แหล่งที่มา

1

ไม่ทราบว่ามันเป็นเรื่องจริงหรือเท็จ แต่ก็เป็นเหตุผลที่ฉันต้องตัดสินใจและสร้าง favicon.ico ในรูทนอกเหนือจาก png i ที่มี

— Alexei Tenitski

2

ฉันรู้สิ่งนี้จากการทำงานที่telly.com - -paul lindner ที่อยู่ในทีม google plus plus.google.com/117259934788907243749/about

— jdavid.net

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

— Stijn de Witt

8

ICO สามารถเป็น PNG

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

การสนับสนุนนั้นเก่าแล้วปรากฏใน Windows Vista (2007) และได้รับการสนับสนุนอย่างดีจากเบราว์เซอร์ แต่ไม่จำเป็นต้องใช้ซอฟต์แวร์แก้ไขไอคอน

png ที่ถูกต้อง (รวมถึงส่วนหัวทั้งหมด) ที่ถูกต้องสามารถนำมารวมกันได้โดยส่วนหัว 6 ไบต์ icoและไดเรกทอรีรูปภาพ 16 ไบต์
GIMP มีการสนับสนุนดั้งเดิม เพียงส่งออกเป็น ico และทำเครื่องหมาย "บีบอัด (PNG)"

— Adria
แหล่งที่มา

3

หลีกเลี่ยง PNG ไม่ว่ากรณีใด ๆ หากคุณต้องการความเข้ากันได้ของ IE6 ที่เชื่อถือได้

— aehlke
แหล่งที่มา

19

ไม่มีเหตุผลใดที่คุณไม่สามารถใช้ทั้งคู่ - ico ในแผนผังไดเรกทอรีสำหรับ IE6 และ PNG ที่ระบุผ่านทาง<link>ในรหัสหน้าสำหรับเบราว์เซอร์สมัยใหม่

— เหลืองอำพัน

10

ทำไมคุณถึงต้องใช้ทั้งคู่? หากคุณกำลังจะสร้าง ico คุณจะได้รับประโยชน์อะไรจากการใช้ png เช่นกัน? แน่นอนมันเป็นแค่การทำงานพิเศษและรหัสพิเศษ

— Mr_Chimp

@Mr_Chimp เพราะ png เป็นมาตรฐานแบบเปิดและมีการมองไปข้างหน้ามากขึ้น? เป็นมาร์กอัปหนึ่งบรรทัดที่พิเศษ

— Wyatt8740

9

สวัสดี @Orcra - ฉันคิดว่าคุณจะไม่พบว่ามันตลกจนคุณอ่านเรื่องนี้เมื่อ 8 ปีก่อนเมื่อฉันเขียนคำตอบนี้และต้องพิจารณาสิ่งต่าง ๆ เช่น IE6 :) StackOverflow อนุญาตให้แก้ไขคำตอบได้ดังนั้นโปรดอัปเดตตัวเองเป็น สิ่งที่เกี่ยวข้องในวันนี้

— aehlke

3

@aehike คุณมีจุดยุติธรรมที่ไม่ดีของฉันไม่ได้ตรวจสอบการประทับเวลา

— Orcra

0

สำหรับสิ่งที่คุ้มค่าฉันทำสิ่งนี้:

    <!-- Favicon - Generic -->
    <link rel="icon" href="path/favicon-32_x_32.png" sizes="32x32">
    <link rel="icon" href="path/favicon-57_x_57.png" sizes="57x57">
    <link rel="icon" href="path/favicon-76_x_76.png" sizes="76x76">
    <link rel="icon" href="path/favicon-96_x_96.png" sizes="96x96">
    <link rel="icon" href="path/favicon-128_x_128.png" sizes="128x128">
    <link rel="icon" href="path/favicon-192_x_192.png" sizes="192x192">
    <link rel="icon" href="path/favicon-228_x_228.png" sizes="228x228">
    <!-- Favicon - Android -->
    <link rel="shortcut icon" href="path/favicon-196_x_196.png" sizes="196x196">
    <!-- Favicon - iOS -->
    <link rel="apple-touch-icon" href="path/favicon-120_x_120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="path/favicon-152_x_152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="path/favicon-180_x_180.png" sizes="180x180">

และฉันยังเก็บ favicon.ico ไว้ในรูท

— s3c
แหล่งที่มา