الرموز المفضلة هي الرموز الصغيرة التي تراها في علامات تبويب المتصفح. عادةً ما تكون ملفات ICO بسيطة ، ولكنها أصبحت في السنوات الأخيرة رمزًا لموقعك على الويب ، مع العديد من الأحجام والأنواع المتنافسة.
كيف تستخدم فافيكون؟
ستدعم معظم المتصفحات أنواعًا مختلفة من الرموز المفضلة. في معظم الأحيان ، سيجلب متصفحك تلقائيًا الرموز المفضلة في المواقع المحتملة دون أن تخبرها بذلك ، ولكن يمكنك إضافتها يدويًا إلى موقع الويب الخاص بك أيضًا.
إذا لم يكن لديك الحجم أو التنسيق الدقيق ، فستستخدم معظم المتصفحات أعلى دقة صورة يمكنها دعمها ، وقياس الرموز المفضلة لأعلى أو لأسفل. لا تحتاج حقًا إلى تضمين 20 ملفًا مفضلاً لكل رمز رمز "رسمي" ، فقط اثنين من الملفات عالية الدقة بالإضافة إلى الإعداد الافتراضي. ولكن ، إذا كان يجب عليك تضمين كل واحد ، يمكنك الرجوع إليه ورقة الغش للمزيد من المعلومات.
بمجرد الحصول على صورة ترغب في استخدامها كرمز ، يمكنك إنشاء رموز المفضلة يدويًا في أي محرر صور. من أجل التعقل ، ربما ستحتاج إلى استخدام مولد فافيكون للقيام بذلك تلقائيًا. سيؤدي هذا إلى إنشاء مجموعة من الملفات التي تريد ربطها و العلامات في
قسم HTML لموقعك على الويب.إذا كنت لا تدير خادم الويب الخاص بك (على سبيل المثال ، إذا كنت قد قمت بإدارة الاستضافة باستخدام خدمة مثل SquareSpace) ، فسيتعين عليك التحقق من مزود الخدمة لمعرفة الإعدادات المتعلقة بملفات favicon. عادةً ما سيتعاملون معها نيابة عنك ، وسيتعين عليك فقط توفير الملفات.
علامات فافيكون العادية
الرموز المفضلة الأصلية هي ملفات favicon.ico. الحد الأدنى للحجم هو 16 × 16 ، ولكن يمكن أن تحتوي ملفات ICO على درجات دقة مختلفة. عادة ما تكون favicon.ico عبارة عن مجموعة من الرموز 16 × 16 و 32 × 32 و 48 × 48 ، وكلها مجمعة معًا. يمكنك إنشاء هذا الرمز من أي PNG باستخدام الإنترنت مولدات favicon.
يمكنك إضافة رمز favicon الخاص بك عن طريق إضافة ارتباط إلى ملف favicon.ico ، والذي يتم وضعه عادةً في الجذر (الدليل العلوي) لخادم الويب الخاص بك ، إلى جانب index.html والملفات الأخرى.
في الواقع ، لا تحتاج دائمًا إلى العلامة ، لأن معظم المتصفحات ستتحقق تلقائيًا من الملف ، ولكن من الجيد تضمينه. هذا هو النوع الأكثر شيوعًا من الرمز المفضل ، وسيتم دعمه في كل مكان تقريبًا يدعم الرمز المفضل على الإطلاق.
إذا كان رمزك المفضل لا يعمل ، فمن المرجح أن الملف ليس في المكان الصحيح. تحقق مما إذا كان http://www.yourwebsite.com/favicon.ico يمكن الوصول إليه ، وما إذا كان يتم عرضه بشكل صحيح في متصفحك. إذا قمت بتحميل الملف يدويًا ، فقد لا يكون لديه الأذونات المناسبة ، والتي يمكنك تصحيحها من سطر الأوامر باستخدام:
sudo chmod +r favicon.ico
مما يسمح بقراءتها من قبل خادم الويب الخاص بك.
PNG فافيكونز
تدعم معظم المتصفحات الأحدث رموز PNG عالية الدقة ، للاستخدام في مناطق أخرى بخلاف شريط علامات التبويب ، مثل صفحة علامة تبويب Chrome الجديدة أو سطح مكتب Android. قد ترغب في ذلك على الأرجح حتى لا يبدو رمزك مقسمًا عند تفجيره.
يمكنك استخدام هذه بالإضافة إلى ملف favicon.ico ، حيث سيختار المتصفح الدقة الأعلى.
ال مولد فافيكون ينشئ أيضًا ملف android-chrome-512×512.png ، ولكن سيتم التحقق من ذلك تلقائيًا ، ولا يحتاج إلى علامة. سيستخدم Chrome على Android Apple المس الرمز للرجوع إليه إذا كان مفقودًا. إذا كنت ترغب في تضمينه ، يمكنك تضمين أي رمز PNG بأي حجم عن طريق تغيير الأبعاد والإشارة إلى ملف مختلف:
لا توجد مشكلة كبيرة في إضافة المزيد من الروابط ، لأن معظم المتصفحات ستطلب فقط الرمز المفضل الذي تحتاجه.
Apple المس الرمز
هذا هو الرمز المستخدم عند إضافة صفحة الويب الخاصة بك إلى الشاشة الرئيسية لمستخدمي iOS من Safari ، وللعديد من الأماكن الأخرى في واجهة مستخدم iOS. مع شاشات Retina ، فإن وجود رمز عالي الدقة يحدث فرقًا كبيرًا.
الحجم الدقيق لها تغيرت كثيرا مع إصدارات مختلفة من iOS ، ولكنها ستكون دائمًا مربعة ، بعرضها الحالي 180 بكسل لـ Retina iPhones. يمكنك إضافة رمز iOS مع رابط رمز touch-touch ، كما يلي:
سيعمل نظام iOS على تقليص حجم الرموز عالية الدقة تلقائيًا ، ولكن يمكنك إضافة رموز متعددة بأحجام مختلفة لتوفير القليل من عرض النطاق الترددي بنفس طريقة رموز PNG.
ستتحقق معظم المتصفحات تلقائيًا من /apple-touch-icon.png ، لذا قد لا تحتاج حتى إلى العلامة. نظرًا لأن هذا الرمز شائع إلى حد ما ، فإنه يستخدم أيضًا كحل بديل للعديد من المتصفحات إذا لم تحدد رمز PNG عالي الدقة.
Safari و Touch Bar Icon
لدى Safari خيار استخدام أيقونات أحادية اللون لـ macOS Touch Bar. هذا ليس ضروريًا تمامًا ، وسيستمر Safari في استخدام الرموز المفضلة إذا لم يكن موجودًا ، ولكنه موجود تبدو أفضل قليلاً إذا كان الرمز الخاص بك يحتوي على خلفية ملونة.
يمكنك جعل هذه تلقائيا مع مولد فافيكون، وعليك أن تضيف:
إلى قائمة الروابط المتزايدة. لن يتحقق Safari من هذا تلقائيًا.
Windows 10 بلاط مترو
إذا قام شخص ما بإضافة موقعك إلى قائمة ابدأ أو سطح المكتب ، فسيعرض رمز موقعك.
يجب أن يقع هذا على الرموز المفضلة الأخرى إذا لم يكن لديك ذلك ، مثل Safari ليس ضروريًا تمامًا. ولكن لتبدو أفضل عند تثبيتها في قائمة ابدأ ، ستحتاج إلى بعض العلامات الوصفية للتهيئة:
حقا تحديد لون بلاط الخلفية ولون السمة. يتم وضع بقية التكوين في ملف XML:
#000000
والذي يبدو زائداً قليلاً عن ارتباط ملف واحد فقط. ستظل بحاجة إلى وضع ملف mstile-150×150.png في جذر خادم الويب ليعمل بشكل صحيح.
التجول في استضافة الملفات على جذر خادم الويب الخاص بك
إذا كنت لا ترغب حقًا في كشف أي ملفات مستضافة على جذر الخادم الخاص بك ، فيمكنك دائمًا إعادة توجيه /favicon.ico إلى موقع مختلف. على سبيل المثال ، في nginx ، يمكنك القيام بما يلي:
location = /favicon.ico {
root /new/images/path;
}الأمر الذي سيجعل nginx يظهر في / new / images / path for your favicons. لن يكون لهذا تأثير على جانب العميل ، لذلك ستظل ترغب في الارتباط بـ / favicon.ico كما لو كان كل شيء على حاله.
