ما هو الرمز المفضل وما الغرض منه؟
A فافيكون هو شارة (رمز) الذي يظهر في علامات تبويب المتصفح، والعناوين، وقصاصات من نتائج البحث.
يلعب Favicon دورًا مهمًا في تطبيقات الويب. يمكنه تحسين مظهر الموقع في نتائج البحث ، وزيادة التعرف على موقعك ، ومساعدة المستخدم في العثور بسرعة على الصفحة المطلوبة في الإشارات المرجعية وعلامات التبويب.
بالإضافة إلى ذلك ، يمكن للمستخدم إضافة صفحة موقع الويب الخاص بك إلى الشاشة الرئيسية للهاتف أو حفظها كتطبيق ويب. في هذه الحالة ، باستخدام الأيقونة المفضلة ، يمكنك العثور بسرعة على موقع من بين عدد كبير من التطبيقات الأخرى.
ما هو الشكل الذي يجب استخدامه للرمز المفضل؟
في السابق ، تم استخدام ICO كتنسيق رئيسي. خصوصية هذا التنسيق متعددة الأبعاد. يمكن لهذا الملف تخزين العديد من أحجام الرموز. تم استبدال ICO بتنسيق PNG. لا تزال ICO مدعومة ، لكن معظم المتصفحات الحديثة تختار تنسيق رمز PNG ، وهو أخف وزناً. بعض المتصفحات غير قادرة على تحديد الرمز الصحيح في ملف ICO ، مما يؤدي إلى إساءة استخدام رمز الدقة المنخفضة.
ما المنصات التي ستغطيها هذه المقالة؟
- متصفحات سطح المكتب الكلاسيكية
- أندرويد كروم
- iOS Safari Web Clip
- نظام التشغيل Mac OS
- شبابيك
متصفحات سطح المكتب الكلاسيكية
لنبدأ بسطح المكتب الكلاسيكي.
كما ذكرنا سابقًا ، أصبح تنسيق ICO قديمًا اليوم ، لكن هذا لا يعني أنك بحاجة إلى نسيانه. يمكن لتنسيق ICO حفظ الرمز الخاص بك وعرض الرمز المفضل بشكل صحيح في بعض الحالات. على سبيل المثال ، قبل IE 11 ، لم يكن تنسيق PNG مدعومًا. لذلك ، بالنسبة لـ IE10 والإصدارات الأقل ، تحتاج إلى استخدام تنسيق ICO القديم. في هذه الحالة ، يُنصح باستخدام المجموعة التالية من تنسيقات ICO و PNG:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">لإنشاء رمز ICO متعدد الأحجام ، يمكنك استخدام خدمة محول icoconvert . عند إنشاء رمز ، حدد الأبعاد التالية: 16 × 16 ، 32 × 32 ، 48 × 48 (رمز الدقة الأعلى).
رموز PNG لها الأحجام التالية: 16 × 16 ، 32 × 32 ، 96 × 96 ، 120 × 120. لماذا رمز 120x120؟ تُعلم Yandex Help أنه يمكنها استخدام رمز بهذا الحجم.
إذا انتبهنا لقيمة rel (نوع المورد) ، فسيتم أخذ الرمز في الاعتبار من قبل معظم المتصفحات ، ويتم أخذ رمز الاختصار في الاعتبار بواسطة متصفح IE.
أندرويد كروم
يتوقع Android رؤية رمز PNG 192x192 ، ويتم تشجيع قناة ألفا (الشفافية).
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">يعتمد Android Chrome على بيان تطبيق الويب. يمكن لأي موقع استخدام البيان للارتباط ببعض الرموز.
ملف البيان نفسه بتنسيق json ويتم الإعلان عنه بالسطر التالي:
<link rel="manifest" href="…/manifest.json">يمكن إنشاء ملف البيان لنظام Android Chrome باستخدام خدمة RealFaviconGenerator .
{
"name": "My Application",
"short_name": "App",
"description": "Application OK",
"lang": "ru-Ru",
"start_url": "/",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"src": "\/res\/img\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/res\/img\/icons\/android-icon -96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/res\/img\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/res\/img\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
},
{
"src": "\/res\/img\/icons\/android-icon-512x512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}يجب أن تحتوي الرموز على الأحجام التالية: 72 × 72 ، 96 × 96 ، 144 × 144 ، 192 × 192 ، 512 × 512 بتنسيق PNG ، ويُفضل الشفافية. نظرًا لأنه يمكن أن يكون للأيقونة خلفية شفافة ، يمكنك تحديد اللون في البيان باستخدام background_color .
يجب إلغاء أنه على الهاتف يتوفر للمستخدم خيار حفظ صفحة المتصفح على الشاشة الرئيسية. سيكون ببساطة رابطًا لصفحة على موقعك ، وسيتم سحب رمز بالاسم android-icon-192x192.png ، والذي تم الإعلان عنه في التعليمات البرمجية الخاصة بك.
إذا قمت بتوصيل بيان بالموقع ، فعند فتح الصفحة ، قد يُطلب من المستخدم حفظ الموقع كتطبيق. في هذه الحالة ، يمكنك إعلان نفس الرمز بشكل مرئي ( android-icon-192x192.png) أو إعادة تصميم رمز التطبيق ليناسب احتياجاتك وإعلانه في البيان بالأبعاد المناسبة.
iOS Safari Web Clip
يتوقع iOS Safari رؤية أيقونة Apple touch . هذا رمز PNG 180 × 180 ، لا توجد قناة ألفا (بدون شفافية). سيتم تقريب زوايا الأيقونة تلقائيًا ، مما يسهل إنشاء رمز لمس التفاح .
يمكن لمستخدمي IOS أيضًا إضافة موقع إلى الشاشة الرئيسية وسيبدو مثل التطبيق. يتم عرض هذا الارتباط كرمز ويسمى Web Clip.
تم تصميم أحجام الرموز التالية لدعم الأجهزة المختلفة ، مثل iPhone و iPad:
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">في الشفرة ، أضف السمة rel = "apple-touch-icon" وحدد الحجم باستخدام الأحجام.
إذا كان الموقع لا يحتوي على رمز بحجمه هو الحجم الموصى به للجهاز ، فسيتم استخدام أقرب رمز أكبر. رمز لمس التفاح الرئيسي هو رمز 180x180. يمكن للأجهزة الأخرى مزج الرمز.
لا تنسَ المساحة المتروكة عند إنشاء رمز. يجب أن تكون 4 بكسل على الأقل من جميع الجوانب. هذا لمنع الرمز الخاص بك من القطع حيث أن أيقونة تطبيق iOS لها زوايا مستديرة.
تجدر الإشارة إلى أن أجهزة iOS ليست الوحيدة التي تبحث عن رمز Apple touch... قد تستخدم بعض المتصفحات ، مثل Android Chrome ، رموز Apple touch ، لأنها أكثر شيوعًا من رموز PNG عالية الدقة الأخرى.
نظام التشغيل Mac OS
في نظام التشغيل Mac OS ، الأمور مختلفة تمامًا. إذا حاول المستخدم حفظ الموقع على سطح المكتب ، فسيتم عرض لقطة شاشة للصفحة مع رمز html بدلاً من رمز الموقع.
لإضافة رمز ، تحتاج إلى استخدام تنسيق SVG ، والذي سيسمح لك بعمل قناع رمز. سيتم عرض هذا الرمز عند تثبيت علامة تبويب في Safari.
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">تحتاج إلى إضافة سمة rel = "mask-icon" في شفرتك . يجب أن يكون رمز SVG نفسه باللون الأسود. يتم تعيين لون الرمز في سمة color = "# e52037" .
تُستخدم أيقونة SVG في علامة تبويب مثبتة (بدون تركيز) بلون أحادي. في التمرير (علامة التبويب المثبتة - التركيز) ، سيتم رسم الرمز باللون الذي يحتوي على سمة " اللون ". يتم أيضًا تمرير لون سمة " اللون " إلى شريط اللمس .
عند إنشاء رمز ، تحتاج إلى إزالة جميع الظلال الموجودة ، وجعلها مسطحة وبسيطة. يمكنك تبسيط رمز إلى كائن واحد باستخدام عمليتي "Union" و "Flatten". هذه العمليات سهلة التطبيق في Figma.
إذا أغلقت عينيك عن إنشاء رمز قناع ، فسيعرض المتصفح ببساطة الحرف الأول من مجال موقعك.
شبابيك
مع Windows ، يتطلب الأمر القليل من العبث للقيام بعمل جيد.
بالنسبة إلى إصدارات IE10 والإصدارات الأقل ، يجب استخدام تنسيق ICO نظرًا لأن PNG لم يكن مدعومًا قبل IE11.
مع وصول IE11 و Windows 8.1 ، أصبح من الممكن تثبيت المواقع كبلاط حي. بالنسبة للبلاط الصغير ، يتم استخدام الأيقونة الافتراضية ، ولكن للبلاط الكبير والواسع ، تحتاج إلى تعيين صورة بحجم معين. يمكن القيام بذلك عن طريق إضافة علامات البيانات الوصفية إلى ترميز الموقع أو عن طريق إنشاء Browserconfig.xml (ملف تكوين المتصفح).
مثال على إضافة علامات البيانات الوصفية إلى ترميز موقع الويب الخاص بك للمربعات الكبيرة:
<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-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">باستخدام هذا الخط ، نحدد لون خلفية البلاط:
<meta name="msapplication-TileColor" content="#2b5797">يمكنك تحديد اسم موقع الويب الخاص بك:
<meta name="application-name" content="My Application">ما هو تكوين المتصفح ؟ إنه مستند XML يسرد مختلف الرموز التي تتوافق مع Metro UI.
لتضمين الملف browserconfig في الترميز، إضافة السطر التالي إلى رئيس :
<meta name="msapplication-config" content="…/browserconfig.xml">سيبدو الملف نفسه كما يلي:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="…/mstile-70x70.png"/>
<square150x150logo src="…/mstile-150x150.png"/>
<square310x310logo src="…/mstile-310x310.png"/>
<wide310x150logo src="…/mstile-310x150.png"/>
<TileColor>#ffc40d</TileColor>
</tile>
</msapplication>
</browserconfig>و browserconfig يحدد ملف الصور لأحجام بلاط مختلفة.
توصي Microsoft باستخدام أحجام صور أكبر لدعم الشاشات ذات كثافة البكسل العالية.
توفر القائمة التالية بعض الإرشادات لاستخدام أحجام مختلفة:
- صغير - 70 × 70 (الحجم الموصى به: 128 × 128)
- متوسط - 150 × 150 (الحجم الموصى به: 270 × 270)
- عريض - 310 × 150 (الحجم الموصى به: 558 × 270)
- كبير - 310 × 310 (الحجم الموصى به: 558 × 558)
على سبيل المثال ، بالنسبة لصورة مقاس 70 × 70 ، فإن الحجم الموصى به هو 128 × 128. هذا يعني أنك بحاجة إلى إنشاء صورة بحجم 128 × 128 بخلفية شفافة ، وسيكون اسمها mstile-70x70 . افعل الشيء نفسه مع باقي الأبعاد.
تحضير الأكلات المفضلة
قبل إضافة الرموز الخاصة بك إلى المجلد الجذر للموقع ، تحتاج إلى إعدادها. الأحجام الأصلية للأيقونات ليست كبيرة جدًا ، ولكن يمكن ضغطها بأقل فقد للجودة.
على سبيل المثال ، في حالتي ، كان وزن جميع الصور 200 كيلو بايت ، وبعد الضغط كان 50 كيلو بايت. لم تتغير جودة الصور بصعوبة. يمكنك استخدام أي خدمة ملائمة لضغط الصور. لقد استخدمت iloveimg .
خاتمة
تسلسل الاتصال في ترميز موقع الويب:
<link type="image/x-icon" rel="shortcut icon" href="…/favicon.ico">
<link type="image/png" sizes="16x16" rel="icon" href="… /favicon-16x16.png">
<link type="image/png" sizes="32x32" rel="icon" href="…/favicon-32x32.png">
<link type="image/png" sizes="96x96" rel="icon" href="…/favicon-96x96.png">
<link type="image/png" sizes="120x120" rel="icon" href="…/favicon-120x120.png">
<link type="image/png" sizes="192x192" rel="icon" href="…/android-icon-192x192.png">
<link sizes="57x57" rel="apple-touch-icon" href="…/apple-touch-icon-57x57.png">
<link sizes="60x60" rel="apple-touch-icon" href="…/apple-touch-icon-60x60.png">
<link sizes="72x72" rel="apple-touch-icon" href="…/apple-touch-icon-72x72.png">
<link sizes="76x76" rel="apple-touch-icon" href="…/apple-touch-icon-76x76.png">
<link sizes="114x114" rel="apple-touch-icon" href="…/apple-touch-icon-114x114.png">
<link sizes="120x120" rel="apple-touch-icon" href="…/apple-touch-icon-120x120.png">
<link sizes="144x144" rel="apple-touch-icon" href="…/apple-touch-icon-144x144.png">
<link sizes="152x152" rel="apple-touch-icon" href="…/apple-touch-icon-152x152.png">
<link sizes="180x180" rel="apple-touch-icon" href="…/apple-touch-icon-180x180.png">
<link color="#e52037" rel="mask-icon" href="…/safari-pinned-tab.svg">
<meta name="msapplication-TileColor" content="#2b5797">
<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-310x310.png">
<meta name="msapplication-square310x310logo" content="…/mstile-310x150.png">
<meta name="application-name" content="My Application">
<meta name="msapplication-config" content="…/browserconfig.xml">
<link rel="manifest" href="…/manifest.json">
<meta name="theme-color" content="#ffffff">باستخدام آخر سطر من التعليمات البرمجية " theme-color " ، يمكنك رسم شريط العناوين وشريط الإشعارات بأي لون. تحدد قيمة المحتوى اللون.
استخدم RealFaviconGenerator للتحقق من أيقونات موقع الويب الخاص بك . ستوضح لك هذه الخدمة كيف يتم عرض الرموز الخاصة بك على منصات مختلفة ، وتخبرك أين وما هي المشاكل التي قد تكون هناك.
بالإضافة إلى ذلك ، يمكن لهذه الخدمة إنشاء الأحجام وتنسيقات الرموز والرموز المطلوبة. لكن من الضروري التحقق من المصادر بحثًا عن وجود جميع الأحجام الموصى بها للعرض الصحيح على الأجهزة المختلفة.