ما هو حاليا أفضل طريقة للحصول على فافيكون عرض في جميع المتصفحات التي تدعم فافيكونس?

StackOverflow https://stackoverflow.com/questions/37073

  •  09-06-2019
  •  | 
  •  

سؤال

ما هو حاليا أفضل طريقة للحصول على فافيكون عرض في جميع المتصفحات التي تدعم حاليا ؟

يرجى تشمل:

  1. الذي صيغ الصور التي يدعمها متصفح.

  2. والتي الخطوط اللازمة في أماكن مختلفة من المتصفحات.

هل كانت مفيدة؟

المحلول

ذهبت حزام الأقواس النهج هنا.

أنا إنشاء 32 × 32 رمز في كل من .ico و .png صيغ يسمى favicon.ico و favicon.png.الرمز الاسم لا يهم حقا إلا إذا كنت تتعامل مع المتصفحات القديمة.

  1. مكان favicon.ico في موقع الويب الخاص بك الجذر إلى دعم المتصفحات القديمة (اختياري ذات الصلة فقط على المتصفحات القديمة.
  2. مكان فافيكون.بابوا نيو غينيا في الصور sub-directory (فقط للحفاظ على الترتيب).
  3. إضافة التالية HTML داخل <head> العنصر.
<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

يرجى ملاحظة أن:

  • MIME نوع .ico ملفات سجل image/vnd.مايكروسوفت.الرمز من قبل IANA.
  • Internet Explorer سيتم تجاهل type السمة رمز الاختصار العلاقة و هذا هو المتصفح الوحيد لدعم هذه العلاقة لا يجب أن تكون المقدمة.

المرجعية

نصائح أخرى

يمكنني استخدام .ico تنسيق ووضع السطرين التاليين في <head> العنصر:

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

أيضا دعم الرموز التي تعمل باللمس للهواتف الذكية والأجهزة اللوحية أنا أفضل نهج HTML5Boilerplate

المزيد من المعلومات حول الرموز التي تعمل باللمس يمكن العثور عليها في هذه المادة.

مع الوضع الحالي من المتصفح دعم لك حتى لا تضطر إلى إضافة علامة HTML من أجل فافيكون في المستند الخاص بك.المتصفحات البحث اوتوماتيكيا قائمة من الملفات ، انظر هذا المثال على دائرة الرقابة الداخلية:

إذا لم الرموز المحددة في HTML, دائرة الرقابة الداخلية سفاري سوف ابحث موقع الدليل الجذر على الرموز مع التفاح لمس رمز أو التفاح لمس رمز-precomposed البادئة.على سبيل المثال ، إذا كان مناسبا رمز حجم الجهاز هو 57 × 57 بكسل, دائرة الرقابة الداخلية بالبحث عن أسماء الملفات بالترتيب التالي:

  1. التفاح لمس رمز-57x57-precomposed.png
  2. التفاح لمس رمز-57x57.png
  3. التفاح لمس رمز-precomposed.png
  4. التفاح لمس رمز.png

نصيحتي هي أن لا تشمل فافيكون في المستند الخاص بك ولكن لديك قائمة من الملفات جاهزة في جذر الموقع:

  • التفاح لمس رمز-114x114-precomposed.png
  • التفاح لمس رمز-144x144-precomposed.png
  • التفاح لمس رمز-57x57-precomposed.png
  • التفاح لمس رمز-72 x 72-precomposed.png
  • التفاح لمس رمز-precomposed.png
  • التفاح لمس رمز.png (57px*57px)
  • فافيكون.ico HiDPI (32x32px)

عند تحميل القالب من html5boilerplate.com هذه يتم تضمين كافة ، عليك فقط أن تحل محلها مع الرموز الخاصة بك.

IE6 لا يمكن التعامل مع PNGs بشكل صحيح ، يكون حذر.

فافيكون يجب أن يكون .ملف ico للعمل بشكل صحيح على جميع المتصفحات.

المتصفحات الحديثة تدعم أيضا PNG و GIF الصور.

لقد وجدت أن أسهل طريقة لإنشاء واحد هو استخدام متاحة بحرية على شبكة الإنترنت خدمة مثل favicon.cc.

وهناك أيضا موقع حيث يمكنك التحقق من كيفية فافيكون من أي صفحة

getfavicon.org

هناك يمكنك أن ترى البرنامج التعليمي حول صنع فافيكونس, صورة أنواع القرارات, انه لطيف!

وجود favicon.* في الدليل الجذر الخاص بك تلقائيا من قبل معظم المتصفحات.يمكنك التأكد من انه تم الكشف عن طريق استخدام:

 <link rel="icon" type="image/png" href="/path/image.png" />

أنا شخصيا استخدام .بابوا نيو غينيا الصور ولكن معظم صيغ يجب أن تعمل.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top