फेविकॉन मानक - 2020 - एसवीजी, आईसीओ, पीएनजी और आयाम?

Question

2020 तक कौन से फ़ेविकॉन आयाम, फ़ाइल प्रारूप और मेटा / लिंक टैग का उपयोग किया जाना चाहिए? इसमें ऐप्पल आइकन, विंडोज़, एंड्रॉइड और अन्य डिवाइस शामिल हैं जिनका लोग आज उपयोग करते हैं।

मैं ओपेरा का उपयोग करता हूं और मैं देख सकता हूं कि यह svg प्रारूप का समर्थन करता है। क्या आजकल svg का उपयोग करना सबसे अच्छा उपाय है? क्या कोई विकल्प "एक फ़ाइल सभी फिट बैठता है" है?

मैं कई वेबसाइटों को ब्राउज़ कर रहा हूं और अलग-अलग "फ़ेविकॉन जनरेटर" की जांच कर रहा हूं। ये सभी वर्षों पुरानी हैं और अधिकतर पीएनजी फाइलों के साथ काम करती हैं।

उदाहरण के लिए: आईसीओ और एसवीजी के लिए किस कोड का उपयोग किया जाना चाहिए?

<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

या आयामों को निर्दिष्ट किया जाना चाहिए यदि आईसीओ में अधिक आकार हैं? मुझे एक अच्छा जवाब नहीं मिला।

<link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico">

कृपया फ़ेविकॉन का उपयोग करने के लिए आयाम, फ़ाइल प्रारूप और मेटा / लिंक टैग प्रदान करें।

Comments

realfavicongenerator.net को नियमित रूप से अपडेट किया जाता है ( realfavicongenerator.net/change_log )

— स्फिंक्सएक्स

@Sphinxxx RFG के लेखक के रूप में, मुझे आपको यहाँ धन्यवाद देने की आवश्यकता है :-)

— philippe_b

favicon.pro

— nourza

व्यक्तिगत रूप से मैं केवल एक बड़ी पीएनजी छवि का उपयोग करूंगा : 2019 में सभी आधुनिक ब्राउज़र पीएनजी का समर्थन करते हैं और इसका आकार बदल सकते हैं। हमें फेवीकोन और बहिष्कार ब्राउज़रों के इस पागल प्रसार को बिल्कुल रोक देना चाहिए जो मानक का पालन नहीं करते हैं। भविष्य में भी एक एकल एसवीजी छवि ठीक होगी, लेकिन फिलहाल यह व्यापक रूप से समर्थित नहीं है।

— कोलीमारको

Answer 1

डिस्क्लेमर: मैं RealFaviconGenerator का लेखक हूं, जिसे मैं अप-टू-डेट होने की उम्मीद करता हूं (ज्यादातर, नीचे देखें)। इसलिए आश्चर्यचकित न हों यदि यह उत्तर RFG उत्पन्न करता है।

एक आकार-फिट-सभी मिथक

कोई "एक आकार सभी फिट बैठता है" आइकन नहीं है। आप एकल SVG आइकन नहीं बना सकते हैं और यह अपेक्षा कर सकते हैं कि यह हर जगह काम करे।

तकनीकी दृष्टिकोण से, एक एकल एसवीजी आइकन एक अच्छी बात होगी। लेकिन UI और UX के दृष्टिकोण से, यह एक वांछनीय परिणाम नहीं है। IOS और Android की तुलना करें। IOS पर, सभी होम स्क्रीन आइकन गोल कोनों के साथ होते हैं ( iOS काले रंग के साथ टच आइकन के पारदर्शी क्षेत्रों को भरता है )। एंड्रॉइड पर, होम स्क्रीन आइकन अक्सर गैर-स्क्वायर आकार और पारदर्शिता (Google ऐप आइकन सहित) का उपयोग करते हैं। एक सिंगल टच आइकन सबमिट करें और एंड्रॉइड क्रोम इसका उपयोग करेगा। लेकिन आप एंड्रॉइड आइकन दिशानिर्देशों का मिलान नहीं कर पाएंगे , जबकि एक समर्पित आइकन हो सकता है।

इसलिए मैं जानबूझकर सिंगल आइकन का उपयोग करने से बचने की सलाह देता हूं। बल्कि प्रत्येक प्लेटफ़ॉर्म को व्यक्तिगत रूप से लक्षित करें, जब संभव हो (यह हमेशा मामला नहीं होता है)।

प्रतीक, मंच प्रति मंच

iOS सफारी

iOS सफारी एक टच आइकन की उम्मीद करता है । आज तक, यह 180x180 पीएनजी छवि है। इस छवि में पारदर्शिता का उपयोग नहीं किया जाना चाहिए और इसके कोनों को स्वचालित रूप से गोल किया जाएगा जब होम स्क्रीन पर जोड़ा जाएगा। साथ घोषित:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

इन वर्षों में, यह आइकन कई ब्राउज़रों के लिए "डिफ़ॉल्ट उच्च रिज़ॉल्यूशन आइकन" बन गया है। तो आप इसे कहीं और पाएंगे, जब बुकमार्क में जोड़ते हैं, आदि।

Android क्रोम

Android Chrome वेब ऐप मैनिफेस्ट पर निर्भर करता है । हालाँकि यह घोषणा एंड्रॉइड क्रोम के लिए समर्पित नहीं है, यह वर्तमान में इसका मुख्य समर्थक है। इसलिए फिलहाल, वेब ऐप मैनिफेस्ट से एंड्रॉइड क्रोम के लिए आइकन पर विचार करना अभी भी काफी सुरक्षित है।

जैसा कि नाम से पता चलता है, वेब ऐप मेनीफेस्ट, वेब ऐप के लिए है। लेकिन कोई भी वेब साइट इसे कुछ आइकन के संदर्भ के रूप में उपयोग कर सकती है।

Android को उम्मीद है कि 192x192 PNG आइकन, पारदर्शिता की अनुमति और प्रोत्साहित करेगा।

घोषणा के साथ घोषित किया गया है:

<link rel="manifest" href="/icons/site.webmanifest">

एज और आईई 12

Microsoft ने Browserconfig पेश किया , जो XML दस्तावेज़ है जो मेट्रो यूआई में फिट होने वाले विभिन्न आइकन को सूचीबद्ध करता है।

फ़ाइल और पृष्ठभूमि का रंग इसके साथ घोषित किया गया है:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

क्लासिक डेस्कटॉप ब्राउज़र

विंडोज / मैकओएस क्रोम, विंडोज / मैकओएस फायरफॉक्स, सफारी, आईई ... यह ऐसी चीजें हैं जो थोड़ी अधिक धुंधली हैं। ऐतिहासिक रूप से, एक एकल favicon.icoफ़ाइल थी, फिर भी समर्थित थी। हालांकि, अधिकांश हालिया ब्राउज़र पीएनजी आइकन चुनते हैं, जो हल्के होते हैं। प्लस कुछ ब्राउज़र ICO फ़ाइल में उचित आइकन का चयन करने में सक्षम नहीं हैं (यह प्रारूप आइकन के कई संस्करणों को एम्बेड कर सकता है), जिससे कम रिज़ॉल्यूशन का आइकन गलत तरीके से उपयोग किया जाता है।

एक को favicon.icoपूरी तरह से पुराना छोड़ने का प्रलोभन दिया जा सकता है । यद्यपि मैं RFG में यह छलांग लगाना चाहूंगा, मैंने पुराने ब्राउज़रों पर प्रभाव का मूल्यांकन करने के लिए आवश्यक परीक्षण नहीं चलाए।

इस प्रकार कॉम्बो मैं आज भी सिफारिश करता हूं, जिसमें favicon.ico16x16, 32x32 और 48x48 आइकन एम्बेड किए गए हैं:

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

अन्य ब्राउज़रों

अन्य ब्राउज़रों में समर्पित आइकन हो सकते हैं। उदाहरण के लिए कोस्ट द्वारा ओपेरा 228x228 आइकन की तलाश में है । इन ब्राउज़रों पर ध्यान देने की आवश्यकता स्पष्ट नहीं है। वे आमतौर पर टच आइकन या अन्य आइकन का उपयोग करते हैं जब वे "अपना" आइकन नहीं पाते हैं।

निष्कर्ष

जैसा कि शुरुआत में घोषणा की गई थी, यह वास्तव में RealFaviconGenerator बनाता है।

Comments

@ हाल ही में कोई परिवर्तन नहीं। यह एक मोड़ के कारण है: यदि आप अपने आइकनों को रूट डायरेक्टरी (जैसे। /favicon.ico) में रखते हैं, तो IE इसे कन्वेंशन द्वारा खोजेगा। इस प्रकार, इस विशेष मामले में कोई घोषणा नहीं। /path/to/iconsपथ के रूप में फिर से एक फ़ेविकॉन बनाएं और इस बार घोषणा उपस्थित होगी।

— फिलिप्पे_ बी

@philippe_b आह, सही है, यह समझ में आता है! स्पष्टीकरण देने के लिए धन्यवाद।

— विल

@RobertBaker यह सही है। यह अभी भी देव के अधीन है इसलिए अभी तक ब्राउज़रकॉन्फिग अभी भी जाने का रास्ता है।

— फिलिप्पे_ बी

आप favicon.ico के संभावित हटाने का मतलब है? मुझे जीत एक्सपी और विस्टा को स्थापित करने और स्थापित करने के लिए एक दिन की आवश्यकता है ताकि मैं विभिन्न पैकेजों का परीक्षण कर सकूं ... इस गर्मी?

— दर्शन

आप जैसे लोगों को वह प्यार नहीं मिलता जिसके वे हकदार हैं। मैं यहाँ हूँ अपने माथे पर बहुत ज्यादा लिपस्टिक चुंबन के साथ आप एक गीला, लापरवाह, दादी देने के लिए। अपने जनरेटर का इस्तेमाल किया, एक आकर्षण मुझे अच्छा आदमी, एक आकर्षण। एसओ पुलिस को धिक्कार है, मैं धन्यवाद कह रहा हूं!

— माइकल ट्रान्किडा

Answer 2

यह भी ध्यान देने योग्य है कि फ़ेविकॉन के साथ कुछ अन्य टैग जोड़े जाने चाहिए जैसे ओजी टैग, ट्विटर कार्ड या एमएस-एप्लीकेशन। यह सभी एक ही उद्देश्य प्रदान करता है - आपके ब्रांड की दृश्य पहचान और इसे भी शामिल किया जाना चाहिए।

ट्विटर कार्ड यहां पाया जा सकता है

मैं निम्नलिखित टैग जोड़ता हूं

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YourAccount">
<meta name="twitter:creator" content="@YourAccount">
<meta name="twitter:title" content="Title of your page">
<meta name="twitter:url" content="URL of your page">
<meta name="twitter:description" content="Your description here">
<meta name="twitter:image:src" content="URL of image">

मैंने पाया कि कई उपयोगकर्ता छवियों को 1300px तक 650px और jpg / png स्वरूपों से बनाते हैं।

सभी टैग जोड़ने के बाद उन्हें यहां सत्यापित किया जाना चाहिए

---

Facebook OG के पास अधिक विकल्प हैं लेकिन सामान्य इस प्रकार हैं:

<meta property="og:title" content="ENTER PAGE TITLE">
<meta property="og:type" content="website"><!--Different values possible -->
<meta property="og:url" content="ENTER PAGE URL">
<meta property="og:image" content="URL OF IMAGE">
<meta property="og:image:width" content="1240">
<meta property="og:image:height" content="650">
<meta property="og:site_name" content="ENTER YOUR SITE NAME">
<meta property="og:description" content="ENTER YOUR PAGE DESCRIPTION">
<meta property="fb:app_id" content="ENTER YOUR FB APP ID">

<meta property="og:see_also" content="URL to recommended page number 1">
<meta property="og:see_also" content="URL to recommended page number 2">
<!--UP TO 5 WEBSITE ADRESSES -->

फेसबुक छवि के विशिष्ट अनुपात की सिफारिश करता है और फ़ाइल का आकार 8Mb तक सीमित है। ट्विटर कार्ड के साथ इसी तरह की छवियों को रखने के लिए, मैं आयामों की सिफारिश करता हूं 1240px 650px और jpg / png प्रारूप। फेसबुक और ट्विटर ने स्वीकार नहीं किया svg ...

---

मैंने पाया कि कुछ वैश्विक ब्रांड अपनी वेबसाइट पर इस टैग का उपयोग करते हैं। एक का आयाम 150x150 पिक्सेल और पीएनजी प्रारूप था। खोज परिणामों में प्रदर्शित करने के लिए ब्राउज़र द्वारा इस छवि का उपयोग किया जा सकता है।

<meta name="thumbnail" content="path/to/image/thumb-150x150.png">

---

रियल फ़ेविकॉन जेनरेटर में माइक्रोसॉफ्ट फ़ेविकॉन भी शामिल हैं। MS-application के लिए धनुष को पेज को ऑप्टिमाइज़ करने के लिए कई अन्य मेटा टैग हैं और अन्य infos जैसे छवि प्रदर्शित की जाती हैं। यह विषय भी पढ़ने लायक है।

मुझे उम्मीद है कि यह किसी के लिए उपयोगी है और आपकी वेबसाइट की ब्रांडिंग के विषय का विस्तार करता है।