एक फेविकॉन बनाना [बंद]

Question

मैं अपनी वेबसाइट के लिए फ़ेविकॉन कैसे बना सकता हूं?

Comments

किसी वेबसाइट के लिए ब्राउज़र टैब आइकन (फ़ेविकॉन) जोड़ने के लिए कैसे

— माइकल पेरोलकोव्स्की

@ गोथो यह कोई डुप्लिकेट नहीं है! एक तुम आईएस की ओर इशारा करते हैं! इससे पहले कि एक एक और डेढ़ साल से पहले!

— डोवर मिलर

मैं इस प्रश्न को ऑफ-टॉपिक के रूप में बंद करने के लिए मतदान कर रहा हूं क्योंकि यह प्रोग्रामिंग नहीं बल्कि वेब डिज़ाइन है।

— Kyll

@DovMiller बेहतर उत्तरों के साथ बेहतर प्रश्न वह है जो खुला रहना चाहिए।

— mbomb007

Answer 1

फ़ेविकॉन्स के बारे में खोज करते हुए, मैंने पाया कि मुझे सभी ब्राउज़रों और उपकरणों में काम करने के लिए 10 से अधिक प्रकार की फ़ाइलों की आवश्यकता है :(

मैं नाराज हो गया और अपना खुद का फेविकॉन जनरेटर बनाया, जो इन सभी फाइलों को बनाता है और उनमें से हर एक के लिए सही एचटीएमएल हैडर: faviconit.com

आशा हैं आप इसका आनंद ले।

Comments

बहुत बढ़िया ऐप। यह मैंने देखा है सबसे अच्छा favicon जनरेटर साइटों में से एक है।

— क्रिस लिवडहल

धन्यवाद, क्रिस! मैं मदद करने के लिए खुश हूँ!

— एडुआर्डो रूसो

@EduardoRusso यह केवल भयानक है - धन्यवाद!

— डेवनिकविल

बहुत बढ़िया। उम्मीद के मुताबिक काम करता है।

— दिलशान

उम्मीद से बेहतर काम करता है! टिनी बग (?): उन्नत का उपयोग करते समय, ब्राउज़रकॉन्फ़िग.एक्सएमएल में पथ और संस्करण शामिल नहीं हैं। अभी भी इसे प्यार करता हूँ, यद्यपि। : डी

— मर्जिंक

Answer 2

यदि आपके पास पहले से ही एक लोगो छवि है जिसे आप फ़ेविकॉन में बदलना चाहते हैं, तो आप इसे http://www.favicomatic.com/ का उपयोग करके परिवर्तित कर सकते हैं । यह कुरकुरा फ़ेविकॉन बनाता है, और मुझे उन्हें बनाने के बाद उन्हें संपादित करने की आवश्यकता नहीं है। यह 16x16 और 32x32 पर फ़ेविकॉन उत्पन्न करेगा और उन्हें उद्धृत करने के लिए: "हर लानत आकार, सर!"। साइट कुछ pngs में मौजूद पारदर्शिता का समर्थन / संरक्षण भी करती है। इसके अलावा, उनकी साइट शांत दिखती है और उपयोग में आसान है।

उदाहरण के लिए यहाँ एक स्टैकओवरफ़्लो लोगो है:

यहाँ कुछ उत्पन्न फेविकॉन हैं:

उन्होंने यह भी आवश्यक HTML उत्पन्न:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

मैंने पहले 20 या तो Google परिणामों को देखा, और यह अब तक का सबसे अच्छा था।

Comments

मैं आगे के चढ़ाव से बचने के लिए इस उत्तर को कैसे सुधार सकता हूं?

— जेरेड मेनार्ड

मुझे नहीं पता। आपके जवाब ने इसे मेरे लिए पाँच मिनट का काम बना दिया। धन्यवाद।

— -अयब

कुछ लोग बिना किसी कारण के नीचा दिखाना पसंद करते हैं। एसओ को इसके खिलाफ नीति बनाने की जरूरत है। Btw, हम वास्तव में कई अलग अलग आकार की जरूरत है या हम 16x16 और 32x32 वेबसाइट के रूप में बस के रूप में पर्याप्त हैं

— batmaci

मैं व्यक्तिगत रूप से नहीं जानता कि सबसे अच्छा अभ्यास यहाँ क्या है। मेरी साइट पर मुझे लगता है कि हम सिर्फ एक का उपयोग करते हैं। जब एक मेनिफ़ेस्ट.जॉसन के साथ संयुक्त रूप से क्रोम प्रगतिशील वेब ऐप्स के लिए यह उपयोगी हो सकता है।

— जारेड मेनार्ड

मुझे यह संसाधन favicomatic.com पर मिला , इसे " फेविकॉन चीट शीट" github.com/audreyr/favicon-cheat-sheet

— जारेड मेनार्ड

Answer 3

उसके लिए GIMP एक अच्छा कार्यक्रम है। बस छवि को PNG के रूप में सहेजें, फिर जोड़ें

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

<HEAD>आपके पृष्ठ के अनुभाग पर ।

Comments

जिम्प इसे favicon.ico के रूप में सहेजने का विकल्प भी प्रदान करता है, जो लिंक जोड़ने की परेशानी को बचाएगा।

अफ़सोस कि पुराने MSIEs (जो अभी भी काफी लोकप्रिय हैं) "उचित" ICO स्वरूपित फ़ाइल के स्थान पर PNG स्वीकार नहीं करेंगे।

— मेर Mrlygsson

वेबसाइट्स को टास्कबार पर पिन करने के लिए, विंडोज के लिए एक आईसीओ की भी आवश्यकता होती है।

— नेक्रिएस

Answer 4

आप एक आइकन फ़ाइल बनाते हैं जो 16x16 या 32x32 या 64x64 है। इसे favicon.ico नाम दें और इसे अपनी वेबसाइट सार्वजनिक फ़ोल्डर की जड़ में रखें।

ऐसी वेबसाइटें हैं जो आपके लिए अन्य ग्राफिक प्रारूपों को .ico में बदल देंगी। अर्थात। http://tools.dynamicdrive.com/favicon/

Comments

इसके अलावा: यदि आप अपने पृष्ठों <link rel="shortcut icon" href="link/to/fav.ico" />के <head>ब्लॉक में जोड़ते हैं तो आप अपनी फ़ेविकॉन फ़ाइल को कहीं भी सहेज सकते हैं ।

— मेर Mrlygsson

tools.dynamicdrive.com/favicon आपको एक से अधिक आकार को एक फ़ेविको में मिलाने की अनुमति देगा जो महान है

— hdorio

Answer 5

सबसे अच्छा ऑनलाइन फ़ेविकॉन टूल में से एक FaviconGenerator.com है । तेज, आधुनिक डिजाइन, कोई फुलाना नहीं।

Comments

FaviconGenerator.com नोड / ग्रन्ट / गल्प से उनके एपीआई तक पहुंच प्रदान करता है।

— मैट

Answer 6

यदि आप .ico फाइलें बनाना चाहते हैं, तो आप फेविकॉन बनाने के लिए GIMP का भी उपयोग कर सकते हैं । आधुनिक ब्राउज़र सामान्य छवि फ़ाइलों का उपयोग कर सकते हैं, लेकिन मूल रूप से मुझे लगता है कि यह सिर्फ .ico फाइलें थी। यह फोटोशॉप की तरह एक ओपन सोर्स इमेज एडिटर है। सही आकार की छवि बनाएं और संपादित करें (32 x 32 कहो), एक परत के समतल करें (जब तक कि आप एक ही फ़ाइल में कई आइकन नहीं चाहते हैं), और एक .ico के रूप में सहेजें। यह इसे सही ढंग से प्रारूपित करेगा, फिर स्टेफानो का <link rel="SHORTCUT ICON" HREF="/favicon.ico">उपयोग इसे अपने वेबपेज में करने के लिए करें।

Answer 7

मैं आइकन प्लगइन के साथ ओपन सोर्स पेंट.नेट प्रोग्राम का उपयोग करता हूं ।

फिर आप .ico फ़ाइल में एम्बेड किए गए सभी विभिन्न आकारों के साथ .ico प्रारूप में एक छवि बना और सहेज सकते हैं।

Comments

हम्म, paint.net.amihotornot.com.au आइकन प्लगइन के मेजबान के रूप में? क्या यह वैध है?

— रोनाल्डबी

@RonaldB हाँ यह उस प्लगइन का घर है। अजीब डोमेन यह नहीं है

— मैथ्यू लॉक

Answer 8

फ़ेविकॉन बनाते समय, आप निम्नलिखित कारकों को ध्यान में रखना चाहते हैं:

• समर्थित प्लेटफ़ॉर्म दस साल पहले, आप केवल डेस्कटॉप ब्राउज़र का समर्थन करना चाहते थे और समाधान क्लासिक favicon.icoचित्र उत्पन्न करना था । आजकल, आप iOS (और iOS Safari) और Android (और Android Chrome) का समर्थन करना चाहते हैं। शायद विंडोज 10 (और एज) और नया मैक बुक प्रो टच बार, (मैकओएस सफारी) भी। अब आप केवल एक "एक आकार सभी फिट बैठता है" छवि का उपयोग नहीं कर सकते।
• डिज़ाइन जैसे ही आप कई प्लेटफार्मों का समर्थन करते हैं, आप कई डिज़ाइन दिशानिर्देशों का सामना कर रहे हैं। उदाहरण के लिए, Google Android पर अपने स्वयं के मूल एप्लिकेशन के लिए पारदर्शी आइकन का उपयोग कर रहा है, जबकि iOS आइकन बिल्कुल भी पारदर्शी नहीं हो सकते हैं। आप बस एक "एकल डिजाइन सभी फिट बैठता है" दृष्टिकोण का उपयोग नहीं कर सकते।
• जेनरेट किए गए आइकन और HTML कोड दो या तीन साल के लिए, सभी मामलों को कवर करने के लिए अधिक से अधिक आइकन उत्पन्न करने के लिए संदर्भ दिया गया है। मुझे डर है कि मैंने इस प्रवृत्ति को खुद से बनाया है: - / समस्या यह है कि आप 20-कुछ लाइनों या HTML के साथ समाप्त होते हैं, जो कि बहुत अधिक है। संतोषजनक तकनीकी समाधान के लिए, आपको उत्पन्न आइकनों / HTML और समर्थित प्लेटफार्मों की मात्रा को संतुलित करने की आवश्यकता है।

हमेशा की तरह, आप इन सभी परिसंपत्तियों को मैन्युअल रूप से बना सकते हैं। जब तक आपके पास बहुत, बहुत विशिष्ट आवश्यकताएं और एक बजट नहीं है, यह निश्चित रूप से जाने का तरीका नहीं है।

अधिकांश लोगों के लिए सही तरीका एक फेविकॉन जनरेटर का उपयोग करना है जो आपको सभी आइकन के रूप को तय करने देता है और सभी विवरणों का ध्यान रखता है। केवल एक ही ऐसा करता है जो रियल फेविकॉन जेनरेटर है । पूर्ण प्रकटीकरण: मैं इस साइट का लेखक हूं।

Answer 9

और यदि आप asp.net का उपयोग कर रहे हैं तो अपने पेज पर फेविकॉन लागू करने के लिए इस तरह से प्रयास करें:

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

लेकिन आप अधिक जानकारी यहाँ पा सकते हैं: http://doctype.com/

Comments

नोट के रूप में, doctype.com 15 फरवरी, 2013 तक बंद रहा । इसके बारे में और पढ़ें ।

— क्रीज

Answer 10

मैं अपने favicons को या तो 16 x 16 या 32 x 32 का उपयोग करते हुए फ़ोटोशॉप करता हूं। मैं इसे तब gif के रूप में सहेजता हूं और मैं gif को एक ico में बदलने के लिए IrfanView का उपयोग करता हूं ।