फ़ेविकॉन आकार और प्रारूप के बारे में सर्वोत्तम अभ्यास करते हैं

32

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

फेविकॉन (आकार आदि के संदर्भ में, मेरे पास पहले से ही डिजाइन है) बनाते समय सबसे अच्छे अभ्यास क्या हैं? मैं हर संभव डिवाइस के लिए समायोजित करना चाहता हूं, यह मोबाइल, टैबलेट, रेटिना डिस्प्ले आदि हो। इसके अलावा, मैं नहीं चाहता कि यह धुंधली समाप्त हो जाए, इसलिए मुझे यह जानना होगा कि पिक्सेल घनत्व का उपयोग करने के लिए और सब कुछ क्या है।

अगर कुछ मैक ऐप या ऑनलाइन टूल हैं जो आपके लिए ऐसा करेंगे (और इसे ठीक से करेंगे) तो यह बहुत अच्छा होगा। अन्यथा मुझे पता है कि इलस्ट्रेटर और फ़ोटोशॉप के आसपास अपना रास्ता कैसे खोजना है।

website-design  best-practice  favicon 
— Tiwaz89
स्रोत
6
पिछले वर्षों की खबरें लेकिन: stackoverflow.com/questions/19029342/… । कोई भी कारण जो आपकी जरूरतों को पूरा नहीं करेगा?
— केएमटीएस
1
धन्यवाद @KMSTR, कि चिट्ठी शीट github.com/audreyr/favicon-cheat-sheet बिल्कुल वही है जो मैं देख रहा था।
— तिवाज़89
@KMSTR आपको चाहिए कि आप अपना वास्तविक उत्तर और जीथब से लिंक करें ताकि आपको क्रेडिट मिल सके और हम इस प्रश्न को स्वीकार कर सकें :)
— हन्ना

जवाबों:

27

Favicons से मूल बातें - 2013 के लिए सबसे अच्छा अभ्यास :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

टाइल आइकन टाइलिकॉन। पीएनजी (144x144)

Apple टच आइकन ऐप्पल-टच-आइकन-precomposed.png (152x152)

और GitHub पर फ़ेविकॉन आकार / प्रकार के लिए एक "दर्दनाक जुनूनी" धोखा शीट ।

हमेशा पढ़ने लायक: http://www.jonathantneal.com/blog/understand-the-favicon/

— KMSTR
स्रोत
मैं पढ़ रहा हूं कि 180x180 तक अब iOS 8 के साथ कॉल किया जाता है
— ड्रयूडविद
क्या आप किसी स्रोत को लिंक कर सकते हैं?
— KMSTR
1
ज़रूर। मैं अब कई स्थानों पर 180px का उल्लेख कर रहा हूं, लेकिन यह सबसे अच्छा है जो मुझे Apple से मिल सकता है: developer.apple.com/library/ios/documentation/UserExperience/…
— Drewdavid
12

क्या शामिल करें?

न्यूनतम

<!-- 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 फ़ेविकॉन्स से सबसे पुराना है, इसने तब से काम किया है जब इसे पढ़ने वाले बहुत से लोग पैदा हुए थे और आज भी पूरी तरह से हैं।

Microsoft छवियों 16x16, 32x32 और 48x48 के आकार सहित अनुशंसा करता है।

अपने फ़ेविकॉन को परिभाषित करने का मानक तरीका:

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

ब्राउजर आपकी वेबसाइट की रूट डायरेक्टरी को सर्च करेगा favicon.icoताकि आप लिंक को छोड़ सकें। कुछ पुराने ब्राउजर्स डिक्लेयर किए गए डिफॉल्ट करने पर favicon.icoभी डिफॉल्ट हो जाएंगे , इसलिए अधिक उपयुक्त आकार का PNG डिक्लेयर किया गया है, इसलिए ICO को रूट में अघोषित छोड़ना और अलग-अलग साइज के PNG को घोषित करना एक अच्छा विचार हो सकता है।

favicon.png

HTML5 ने sizesकई आकार के आइकन घोषित करने में मदद करने के लिए विशेषता पेश की । विशिष्ट पीएनजी का उपयोग करने से आपको उपयोग किए गए आकारों पर अधिक नियंत्रण प्राप्त होता है और इसका मतलब है कि केवल सही छवि लोड हो रही है।

<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">

आपके द्वारा घोषित आकार उन उपकरणों पर निर्भर करता है जिन्हें आप समर्थन करना चाहते हैं। कुछ सामान्य और नहीं-तो-सामान्य आकार:

  • 32x32
  • 48x48
  • 64x64
  • 96x96
  • 128x128 क्रोम वेब स्टोर आइकन
  • Android के लिए 160x160 क्रोम
  • 192x192 Android के लिए क्रोम
  • 195x195 ओपेरा स्पीड डायल आइकन
  • 196x196 Android के लिए क्रोम
  • 228x228 ओपेरा कोस्ट आइकन

Apple टच आइकन

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">

विंडोज टाइलें

जब आप किसी वेबसाइट को विंडोज या विंडोज फोन पर स्टार्ट स्क्रीन पर पिन करते हैं तो टाइल्स का उपयोग किया जाता है और कई आकारों में आते हैं।

<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मेटा टैग को हटाया जा सकता है और रूट फ़ोल्डर में 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>

आगे पढ़ना और संसाधन

— कै
स्रोत
सभी आगे पढ़ने और संसाधन प्रदान करने के लिए बोनस अंक, विशेष रूप से RealFaviconGenerator.net। यह एक उत्कृष्ट संसाधन है।
— bemdesign
9

यह उपकरण एक सुपर टाइम सेवर है। कोशिश करके देखो! यह आपके लिए हर चीज का ख्याल रखता है।

अपनी छवि को 800px x 800px के आसपास किसी चीज़ पर अपलोड करें ताकि उसका अच्छा और कुरकुरा हो।

http://realfavicongenerator.net/

इस मेटा टैग को भी जोड़ें ताकि आप अपने आइकॉन को नाम दे सकें अगर कुछ आईओएस डिवाइस में सेव करता है।

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

उम्मीद है की वो मदद करदे!

— CWD
स्रोत
4

सभी संभावित वेरिएंट बनाने के लिए इस 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 फ़ाइल में परिवर्तन जोड़ता है।

— मटज Kěíž
स्रोत
1

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

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

मैं अधिक विस्तृत जानकारी के साथ प्रोजेक्ट पेज को अपडेट कर रहा हूं , लेकिन इसमें पहले से ही एक बहुत ही आसान और मानक सहायता मेनू है और यूनिक्स, मैक और विंडोज पर काम करता है।

आप बस या तो .bat या .sh स्क्रिप्ट को अपने टर्मिनल में चला सकते हैं।

Windows के लिए पूर्व:

faviconbuild.bat -h

या यूनिक्स / मैक के लिए (या अगर सिग्विन का उपयोग करके विंडोज):

faviconbuild.sh -h

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

यह इस बात का एक उदाहरण है कि मैं वर्तमान में अपने एक प्रोजेक्ट में इसका उपयोग कैसे कर रहा हूं:

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

मैं बस एक परियोजना विशिष्ट फ़ोल्डर में faviconbuild फ़ोल्डर रखा तो मैं वास्तविक परियोजना फाइलों को छूने की जरूरत नहीं है और साथ ही मैं अपने source.png रखा है। स्क्रिप्ट का डिफ़ॉल्ट व्यवहार सब कुछ एक नेस्टेड बिल्ड फ़ोल्डर में डालना है जो कि gitignored है, इसलिए यदि आप git का उपयोग कर रहे हैं तो यह प्रोजेक्ट से नहीं टकराएगा।

अगर मुझे कुछ याद आ रहा है तो कृपया एक सुविधा अनुरोध सबमिट करें।

मेरे पास अधिक जानकारी के साथ एक ब्लॉग पोस्ट भी है ।

मुझे उम्मीद है कि आपको यह काम का लगेगा।

— मैथ्यू सैंडर्स
स्रोत
आपका "उदाहरण" पूरी परियोजना को डाउनलोड करता है ...
— केएमटीएस
"उदाहरण" वर्तमान में अंतिम पैकेज्ड रिलीज़ को डाउनलोड करता है जिसमें Mac / Windows के लिए ImageMagick बायनेरी और एक उदाहरण स्रोत png शामिल है ताकि आप इसे केवल आउटपुट देखने के लिए चला सकें। यह एक पोस्ट के रूप में अच्छी तरह से एक के रूप में अच्छी तरह से एक के बाद एक तारीख से बाहर है, लेकिन बहुत याद नहीं है तो रिक्त स्थान के साथ पथ से निपटने। मैंने लिनक्स बायनेरिज़ को शामिल नहीं किया क्योंकि कुछ अलग फ्लेवर हैं और आप पैकेज मैनेजर से प्राप्त कर सकते हैं। यदि आपके पास कोई है तो मैं सुझाव के लिए खुला हूं। :)
— मैथ्यू सैंडर्स
UX के दृष्टिकोण से, मुझे नहीं लगता कि "उदाहरण" डाउनलोड की अपेक्षा की ओर जाता है, बल्कि ... एक उदाहरण है। शायद समझाएं कि वास्तव में क्या होता है? जैसे, "नवीनतम रिलीज़ को डाउनलोड करें"। आपके पास दो बटन हैं "डाउनलोड करें, लेकिन 3 डाउनलोड करने वाली चीजें। उस प्रकाश में मुझे लगता है कि आगंतुक" उदाहरण "के पीछे एक गैलरी या प्रकार की अपेक्षा करेंगे।
— KMSTR
समझ गया, धन्यवाद! मैं व्यापार से एक सॉफ्टवेयर इंजीनियर हूं इसलिए UX / UI पर मेरा पहला पास आमतौर पर न्यूनतम है: P। मैं इसे और अधिक स्पष्ट करने के लिए कुछ करूंगा और संभवतः अधिक जानकारी के साथ पृष्ठ के उदाहरण को जोड़ूंगा।
— मैथ्यू सैंडर्स
मैंने एक Hexo.io जनरेट किए गए पेज के साथ GitHub जेनरेट किए गए पेज को बदल दिया । मैंने "उदाहरण" लिंक को भी हटा दिया और अधिक विवरण के बाद इसे पृष्ठ के नीचे शामिल किया।
— मैथ्यू सैंडर्स
0

फ़ेविकॉन आकार और जनरेटर के बारे में यहाँ बहुत उपयोगी जानकारी है।

मैं विभिन्न आकारों की डिजाइन आवश्यकताओं की व्याख्या करके चर्चा में जोड़ सकता हूं।

हाँ फ़ेविकॉन, आइकन, प्रतीक और लोगो आकार एक ही कला पर आधारित हो सकते हैं, लेकिन प्रत्येक को विशेष रूप से उस आकार में प्रस्तुत किया जाना चाहिए ताकि वह सबसे सटीक दिखाई दे (मैं कह रहा हूं कि ऑटो जनरेटर aliasing और ग्रेडिएंट को अच्छी तरह से नहीं संभालेंगे 16 पिक्सेल आकार और स्वतः उत्पन्न छवि 128 px आकार के लिए अनुकूलित नहीं होगी यदि आपने छोटी शुरुआत की थी।

अपनी कला को 128 पिक्स या किसी भी बड़े आकार के चौकोर प्रारूप में ड्रा करें, जो आप चाहते हैं कि सभी 3 डी ट्रिक्स का उपयोग करें। एक समय में विभिन्न आकार के आइकन निर्यात करें, परिणाम की जांच करें और उस आकार में सर्वश्रेष्ठ काम करने के लिए मास्टर को समायोजित करें।

16 x 16 के लिए, मैं वर्गों का 16x16 ग्रिड बनाऊंगा और आउटपुट का सबसे अधिक नियंत्रण रखने के लिए उन्हें व्यक्तिगत रूप से रंग दूंगा।

— वेबस्टर
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.