favicon.png बनाम favicon.ico - मुझे ICO के बजाय PNG का उपयोग क्यों करना चाहिए?

Question

इस तथ्य के अलावा कि पीएनजी एक अधिक सामान्य छवि प्रारूप है, क्या favicon.png बनाम favicon.ico के पक्ष में कोई तकनीकी कारण है?

मैं आधुनिक ब्राउज़रों का समर्थन कर रहा हूं जो सभी PNG पसंदीदा आइकन का समर्थन करते हैं।

Answer 1

इस थ्रेड में कई अन्य लोगों के कई अपडेट और नोट्स के कारण रिप्लेस (और कम्युनिटी विकी) को बदल दिया गया:

• ICO और PNG दोनों पूर्ण अल्फा चैनल आधारित पारदर्शिता की अनुमति देते हैं
• ICO पुराने ब्राउज़रों के लिए पश्चगामी अनुकूलता की अनुमति देता है (जैसे IE6)
• PNG में संभवतः पारदर्शिता के लिए व्यापक टूलिंग समर्थन है, लेकिन आप अल्फा-चैनल ICOs बनाने के लिए टूल पा सकते हैं, जैसे कि डायनामिक ड्राइव टूल और फ़ोटोशॉप प्लगइन @mercator द्वारा उल्लिखित।

अधिक जानकारी के लिए यहां अन्य उत्तरों से परामर्श करने के लिए स्वतंत्र महसूस करें।

Comments

ICO अल्फा चैनल की अनुमति देता है

— rolvaro González

-1 ICO पूर्ण अल्फा चैनल सहित कई प्रस्तावों का समर्थन करता है। वैसे, 1-बिट अल्फा को "पारदर्शिता" के रूप में जाना जाता है। ICO की एकमात्र वास्तविक सीमा लंबाई में (किसी भी दिशा) में 256 या उससे अधिक आइकन के साथ थी, हालाँकि इसे कई बार दूर किया जा चुका है।

— क्रिश्चियन

-1 .ico एक फ़ाइल में कई रिज़ॉल्यूशन की अनुमति देता है (उदाहरण के लिए 16x16 और 32x32)। जब आप डेस्कटॉप पर शॉर्टकट बनाते हैं तो आइकन अच्छा रहता है।

— गागरिन 22

अधिकांश ब्राउज़र लिंक किए गए एक से अधिक रूट में favicon.ico का पक्ष लेते हैं। आपके समाधान से अधिकांश ब्राउज़र लिंक किए गए png के बजाय गैर-पारदर्शी .ico को चुन लेंगे ।

— लोड

@ क्यों यह विशेष रूप से एक पारदर्शी आईसीओ के बजाय एक गैर-पारदर्शी आईसीओ उठाएगा?

— रोब ग्रांट

Answer 2

सभी आधुनिक ब्राउज़र (क्रोम 4, फ़ायरफ़ॉक्स 3.5, IE8, ओपेरा 10 और सफारी 4 के साथ परीक्षण) हमेशा अनुरोध करेंगे favicon.icoजब तक कि आपने शॉर्टकट आइकन निर्दिष्ट न किया हो <link>। इसलिए यदि आप स्पष्ट रूप से एक निर्दिष्ट नहीं करते हैं, तो favicon.ico404 से बचने के लिए हमेशा एक फ़ाइल रखना सबसे अच्छा है। याहू! सुझाव है कि आप इसे छोटा और कम करने योग्य बनाते हैं।

और आपको केवल अल्फा पारदर्शिता के लिए PNG के लिए जाने की जरूरत नहीं है। ICO फाइलें अल्फा ट्रांसपेरेंसी को ठीक (यानी 32-बिट कलर) सपोर्ट करती हैं, हालांकि शायद ही कोई टूल आपको इन्हें बनाने की अनुमति देता है। अल्फ़ा पारदर्शिता के साथ फाइल बनाने के लिए मैं नियमित रूप से डायनामिक ड्राइव के फेविकॉन जेनरेटर का उपयोग favicon.icoकरता हूँ। यह एकमात्र ऑनलाइन टूल है जो मुझे पता है कि वह कर सकता है।

इसमें एक मुफ्त फ़ोटोशॉप प्लग-इन भी है जो उन्हें बना सकता है।

Comments

ग्रेट हिंट इस डायनामिक ड्राइव टूल! तुरंत बुकमार्क कर लिया। धन्यवाद!

— मार्कोस बुर्के

पुन: उपकरण, यह काफी हद तक असत्य है; कई आइकन डिजाइनिंग टूल हैं। मैंने अतीत में खुद को एक साधारण लिखा था।

— क्रिश्चियन

उन लोगों के लिए, जिनके पास फ़ोटोशॉप के लिए $ 650 रुपये नहीं हैं, आप संपूर्ण लेयरिंग और पारदर्शिता के साथ .png फ़ाइलों को बनाने, संपादित करने और सहेजने के लिए pixlr.com (मुफ्त में) का उपयोग कर सकते हैं :)

— स्कॉट बी

@ स्पेसर .icoपीएस में संपादन प्राप्त करना अविश्वसनीय रूप से कठिन है । और यहां तक ​​कि अगर आप करते हैं, तो अंतिम परिणाम बहुत बुरा है, आपको लगता है कि .bmpयह एक बेहतर प्रारूप था (यह बहुत बड़ा मेटा-डेटा जोड़ता है जिससे एक बड़ा दर्द फिर से संपादित होता है)।

— क्रिश्चियन

@ मायिकवोर्मन्स: यह अभी भी एक पीएनजी के रूप में पढ़ा जाता है; अधिकांश आधुनिक ब्राउज़र फ़ाइल एक्सटेंशन के बारे में इतना ध्यान नहीं रखते हैं। BTW, यह सबसे अच्छा जवाब है और इसे स्वीकार किया जाना चाहिए।

— rvighne

Answer 3

.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 thingy iPhone उपयोगकर्ताओं के लिए है जो एक वेबसाइट का शॉर्टकट बनाते हैं।

Comments

PNG अल्फा चैनल

— canlvaro González

हाँ, मेरी बात है कि ico के सब कुछ png के ऐसा कर सकते हैं (अल्फा पारदर्शिता) एक फ़ेविकॉन के रूप में कर सकते हैं किया गया था, और इसके अलावा वे के बाद से साल 0. सभी ब्राउज़रों द्वारा समर्थित हैं

— Wouter वैन Nifterick

विकिपीडिया के अनुसार इंटरनेट एक्सप्लोरर इस तरह एक लाइन का समर्थन करने में विफल रहेगा: <लिंक rel = "आइकन" प्रकार = "छवि / vnd.microsoft.icon" href = " example.com/image.ico " />

— frankster

संभावना है कि वेबसाइट वर्ष 0 से ब्राउज़र का समर्थन नहीं करती है इसलिए परेशान क्यों हो? IE6 में एक आधुनिक वेबसाइट को आज़माएँ और देखें कि क्या होता है?)

— डोमिनिक

Answer 4

* .Ico फ़ाइलों का सैद्धांतिक लाभ यह है कि वे एक से अधिक आइकन पकड़ सकते हैं। उदाहरण के लिए, आप अल्फा चैनल के साथ एक छवि स्टोर कर सकते हैं और विरासत प्रणालियों के लिए 16 रंग संस्करण, या आप 32x32 और 48x48 आइकन जोड़ सकते हैं (जो तब दिखाई देगा जब उदाहरण विंडोज एक्सप्लोरर के लिए लिंक खींच रहा है)।

हालाँकि, यह अच्छा विचार ब्राउज़र कार्यान्वयन के साथ टकरा जाता है।

Comments

इस से संबंधित तथ्य यह है कि IE9 भी win7 टास्कबार को पिन करने के लिए उन बड़े आइकन का उपयोग करता है देखें: stackoverflow.com/questions/3723715/…

— GazB

उह, सैद्धांतिक? विंडोज 7 के साथ भेजे गए एक ही आइकन का उपयोग विंडोज 95 में 8 बिट रंग मोड में किया जा सकता है। मुझे लगता है कि यह काफी व्यावहारिक है, नहीं?

— क्रिश्चियन

कृपया ध्यान दें कि यह उत्तर 2009 में लिखा गया था। उस समय ब्राउज़र दृश्य अब की तुलना में काफी अलग था।

— अल्वारो गोंजालेज

Answer 5

पीएनजी के 2 फायदे हैं: इसका आकार छोटा है और यह अधिक व्यापक रूप से उपयोग और समर्थित है (मामले में फेविकॉन को छोड़कर)। जैसा कि ICO से पहले उल्लेख किया गया है, इसमें कई आकार के चिह्न हो सकते हैं, जो डेस्कटॉप अनुप्रयोगों के लिए उपयोगी है, लेकिन वेबसाइटों के लिए बहुत अधिक नहीं है। मैं आपको अपने आवेदन की जड़ में एक favicon.ico लगाने की सलाह दूंगा। यदि आपके पास अपनी वेबसाइट के प्रमुखों तक पहुंच है, तो पीएनजी फ़ाइल को इंगित करने के लिए टैग का उपयोग करें। इतना पुराना ब्राउज़र favicon.ico दिखाएगा और नए लोगों को png दिखाएगा।

Png और Icon फाइल्स बनाने के लिए मैं द जिम्प की सिफारिश करूंगा ।

Comments

वेबसाइटों के लिए इतना नहीं? जब तक हर कोई रेटिना जैसी डिस्प्ले का उपयोग शुरू नहीं करता तब तक प्रतीक्षा करें; अचानक एक बहुत अच्छा कारण होगा कि कोई अपने favicon में 32x32 या बड़े आकार को शामिल कर सकता है ...

— रोमन स्टार्कोव

हम फ़ेविकॉन्स के बारे में बात कर रहे हैं, इसलिए समर्थन का मुद्दा वास्तव में आप जो कहते हैं उसके विपरीत है

— डेविड हेफर्नन

+1 मूल प्रश्न को संबोधित करता है और पारदर्शिता में कम नहीं होता है। साथ ही एक ऐप का भी उल्लेख करता है जो कि .ico प्रारूप का समर्थन करता है ।

— कोवाक्स्बव

Answer 6

Google+ जैसे कुछ सामाजिक उपकरण बाहरी लिंक के लिए फ़ेविकॉन प्राप्त करने के लिए एक सरल विधि का उपयोग करते हैं, http://your.domainname.com/funicon.ico लाते हैं

चूंकि वे HTML सामग्री को प्रीफ़ैच नहीं करते हैं, इसलिए <link>टैग काम नहीं करेगा। इस स्थिति में, आप mod_rewrite नियम का उपयोग करना चाहते हैं या फ़ाइल को डिफ़ॉल्ट स्थान पर रख सकते हैं।

Comments

नहीं पता कि यह सही है या गलत लेकिन यह मेरे लिए तय करने का तर्क था कि मुझे png के अलावा रूट में favicon.ico बनाना है।

— अलेक्सई तेनित्स्की

मुझे यह पता है कि यह काम telly.com , -via paul lindner से है जो Google plus टीम पर है। plus.google.com/117259934788907243749/about

— jdavid.net

फ़ेविकॉन को मूल में रखना डी वास्तविक मानक है, इसलिए मैं इस उत्तर में वर्णित कारणों से इसका पालन करूंगा।

— स्टिजन डे विट

Answer 7

एक ico एक png हो सकता है।

अधिक सटीक रूप से, आप सामान्य बिटमैप + अल्फा के बजाय इस न्यूनतम कंटेनर प्रारूप के अंदर एक या अधिक पीएनजी स्टोर कर सकते हैं, जिसे हर कोई आईसीओ के साथ दृढ़ता से जोड़ता है।

समर्थन पुराना है, विंडोज विस्टा (2007) में दिखाई दे रहा है और ब्राउज़र द्वारा अच्छी तरह से समर्थित है, हालांकि आइकन संपादन सॉफ्टवेयर द्वारा जरूरी नहीं है।

किसी भी मान्य png (हेडर सहित) को 6 बाइट वालेो हेडर और 16 बाइट इमेज डायरेक्टरी द्वारा तैयार किया जा सकता है ।
GIMP को देशी समर्थन है। बस ico और "Compressed (PNG)" टिक के रूप में निर्यात करें।

Answer 8

यदि आप विश्वसनीय IE6 संगतता चाहते हैं तो किसी भी मामले में PNG से बचें।

Comments

कोई कारण नहीं है कि आप दोनों का उपयोग नहीं कर सकते हैं - IE6 के लिए निर्देशिका ट्री में एक आईसीओ और <link>आधुनिक ब्राउज़रों के लिए पेज कोड में एक पीएनजी के माध्यम से निर्दिष्ट ।

— अंबर २

आप दोनों का उपयोग क्यों करेंगे? यदि आप एक ico बनाने से परेशान हैं तो एक png का उपयोग करने से क्या लाभ होगा? निश्चित रूप से यह सिर्फ अतिरिक्त काम और अतिरिक्त कोड है।

— Mr_Chimp

@Mr_Chimp क्योंकि png एक खुला मानक और अधिक दूरंदेशी है? यह मार्कअप की एक अतिरिक्त रेखा है।

— व्याट8740

हाय @Orcra - मुझे लगता है कि आपको यह बहुत मजेदार नहीं लगेगा, आप इसे पढ़ रहे थे ~ 8 साल पहले जब मैंने यह जवाब लिखा था, और IE6 जैसी चीजों पर विचार करना था :) StackOverflow संपादन उत्तरों की अनुमति देता है, तो कृपया इसे स्वयं को अपडेट करने के लिए स्वतंत्र महसूस करें। आज कुछ प्रासंगिक है

— aehlke

@ ओह, आपके पास एक उचित बिंदु है, टाइमस्टैम्प की जांच नहीं करने के लिए मेरा बुरा।

— ओरका

Answer 9

इसके लायक क्या है, मैं यह करता हूं:

    <!-- 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 को रूट में रखता हूं ।