3 طرق لإنشاء أيقونة فافيكون الخاصة بك

جدول المحتويات:

3 طرق لإنشاء أيقونة فافيكون الخاصة بك
3 طرق لإنشاء أيقونة فافيكون الخاصة بك

فيديو: 3 طرق لإنشاء أيقونة فافيكون الخاصة بك

فيديو: 3 طرق لإنشاء أيقونة فافيكون الخاصة بك
فيديو: تغيير مكان حفظ الملفات في متصفحي جوجل كروم Chrome وموزيلا فايرفوكس Firefox || شروحات MAH 2024, يمكن
Anonim

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

خطوات

طريقة 1 من 3: تصميم الأيقونة المفضلة لديك

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة الأولى
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة الأولى

الخطوة الأولى: قم بإنشاء رمز مفضل يمثل موقع الويب الخاص بك

يجب أن يحدد نوع موقع الويب الذي تمتلكه شكل الرمز المفضل لديك. حاول أن تصمم شيئًا يلتزم بصورة علامتك التجارية ويكون مميزًا ولا يُنسى للناس. سيكون الرمز المفضل لديك هو أول ما يراه الأشخاص عندما ينظرون إلى علامات التبويب في متصفحهم وسيظهر أيضًا في الإشارات المرجعية للأشخاص.

  • على سبيل المثال ، إذا كان لديك موقع ويب خاص بالطعام ، فإن اختيار رمز مفضل يحتوي على فاكهة أو خضروات لأن التصميم قد يجعله لا يُنسى.
  • إذا كان موقع الويب الخاص بك مخصصًا لشركة محاماة أو شركة استثمار ، فمن الأفضل استخدام رمز فافيكون تقليدي وأنيق.
  • إذا كان موقع الويب الخاص بك يستهدف الشباب ، فحاول إنشاء أيقونة مفضلة مرحة وملونة.
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة الثانية
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة الثانية

الخطوة 2. قرر ما إذا كنت تريد خلفية شفافة

إذا لم تقم بتعيين خلفية ، فسوف تملأ باللون الأبيض ، مما قد لا يلتزم بعلامتك التجارية. ستأخذ الخلفية الشفافة لون متصفح الشخص وستبدو أكثر انسيابية في بعض الحالات. في حالات أخرى ، سيؤدي وجود لون للخلفية إلى ظهور الحروف الأمامية أو الرسومات. قرر ما هو الأفضل لتصميمك واحتفظ به في الاعتبار أثناء تصميمه.

الرمز المفضل الأساسي هو 16x16 مربع وله لون الخلفية

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 3
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 3

الخطوة 3. قم بإنشاء رمز مفضل يسهل قراءته

نظرًا لأن صورة الأيقونة المفضلة التي ستستخدمها صغيرة ، فمن المهم أن تتمكن من إيصال علامتك التجارية دون إرباك زوارك. يترك الأيقونة المفضلة التي يصعب قراءتها انطباعًا سلبيًا ويمكن أن تخلق أسئلة في ذهن الزائر حول جودة العمل الذي يمكنك تقديمه. لا تبدو الصور والشعارات شديدة التعقيد جيدة عند تقليصها إلى 16 × 16 أو 32 × 32 بكسل.

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

الخطوة 4. إنشاء فافيكون ممتع من الناحية الجمالية

يسمى هيكل الأيقونة المفضلة شكلها. تتخذ الرموز المفضلة عادةً أشكالًا ، مثل دائرة أو مربع. عندما تقوم بتصميم الأيقونة المفضلة الخاصة بك ، فمن الأفضل عمومًا أن تتلاءم مع أحد هذه الأشكال الأساسية لأن الأشكال ذات الشكل الحر غالبًا ما تتشوش أو تشوش عند 16 × 16 بكسل. هناك جانب آخر مهم في تصميمك يسمى الوحدة الجمالية. تتضمن الوحدة الجمالية تفاصيل وأحجام المكونات المختلفة في فافيكونك وكيفية توازن فافيكونك. كلما كانت التفاصيل أكثر اتساقًا ، كلما كان شكل الأيقونة المفضلة لديك أكثر تماسكًا. على سبيل المثال ، استخدام أنواع أو أحجام خطوط مختلفة داخل رمزك المفضل لا يرضي العين ويمكن أن يجعل رمزك المفضل يبدو مرتبكًا أو فوضويًا.

  • مثال آخر على الوحدة الجمالية هو الحفاظ على الزوايا الدائرية عبر الأشكال الموجودة في فافيكونك.
  • من الأمثلة الجيدة على رمز تم تغيير شكله هو رمز Google المفضل. لقد تغير من مربع إلى دائرة.
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 5
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 5

الخطوة 5. استخدم ألوانًا متماسكة مع علامتك التجارية

عند إنشاء الأيقونة المفضلة الخاصة بك ، يجب أن تقوم بإنشائها بعمق ألوان 8 بت (256 لونًا) أو 24 بت (16.7 مليون لون) ، حيث سيعمل هذا على المتصفحات الحديثة. تأكد من أن الألوان التي تختارها يمكن العثور عليها في مكان آخر على موقع الويب الخاص بك أو أنها مرتبطة بطريقة ما بعلامتك التجارية. لن يكون الرمز المفضل بألوان غير موجودة على موقع الويب أو الشعار أو التطبيقات الخاصة بك لا يُنسى ، ولن يتمكن الأشخاص من ربط الرمز بعلامتك التجارية.

  • تتضمن بعض الاستخدامات الإبداعية للون الأيقونة المفضلة GitHub الذي يغير الألوان اعتمادًا على حالة نظامك و Trello ، والذي يتغير اعتمادًا على لون الخلفية.
  • الألوان الأكثر شيوعًا المستخدمة في الفافيكون هي الأحمر والأزرق.
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 6
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 6

الخطوة السادسة. ضع في اعتبارك جمهورك عند تصميم الأيقونة المفضلة

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

على سبيل المثال ، يستخدم Mac Os X طابعًا يمثل رمزًا عالميًا للبريد. لن يكون استخدام صندوق بريد فعالاً لأن علب البريد تختلف في أجزاء مختلفة من العالم

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 7
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 7

الخطوة 7. احصل على رأي الأصدقاء والزملاء

على الرغم من أنها ليست مكثفة من الناحية الرسومية بشكل لا يصدق ، إلا أن الأيقونة المفضلة هي جزء مهم من علامتك التجارية. على سبيل المثال ، فكر في مواقع الويب المفضلة لديك مثل Twitter أو Gmail أو Facebook أو wikiHow ، ومدى ربط الرمز المفضل بالعلامة التجارية. إذا لم تكن لديك عين جيدة للتصميم ، أو كنت محتارًا بشأن نوع التصميم الذي يجب أن يكون لديك لموقعك ، فاستشر الأصدقاء المهتمين بالتصميم أو الذين يعملون في التصميم الجرافيكي.

  • اسأل في شبكة أصدقائك لمعرفة ما إذا كان بإمكان أي شخص تقديم مشورة التصميم مجانًا.
  • الشركات الأكبر حجمًا لديها مصممو رسومات داخليون يمكنهم إنشاء صورة الأيقونة المفضلة.

الطريقة 2 من 3: إنشاء الأيقونة المفضلة الخاصة بك

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 8
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 8

الخطوة الأولى: استخدم برنامج تحرير الصور لإنشاء الأيقونة المفضلة الخاصة بك

يمكنك استخدام برامج تحرير الصور مثل Adobe Photoshop أو Illustrator لإنشاء صورة للرمز المفضل لديك. تتيح لك تطبيقات البرامج هذه أيضًا تغيير حجم الصورة وتصديرها بالتنسيق الصحيح. تسمح لك بعض البرامج بإنشاء رمزك المفضل يدويًا.

  • هناك أيضًا برامج تحرير خاصة بالرموز المفضلة يمكنك العثور عليها عبر الإنترنت.
  • استخدم محرك بحث واكتب "favicon editors".
  • اجعل حجم اللوحة القماشية 512 × 512 بكسل لأن هذا الرقم ينقسم إلى أحجام الرموز المفضلة الأكثر قابلية للتطبيق ولا يزال كبيرًا بما يكفي لتحريره بشكل فعال.
  • تتضمن برامج تحرير الصور الشائعة الأخرى GIMP و PhotoScape و Paint. NET.
  • عند استخدام هذا البرنامج ، لن تتمكن من تحرير ملفات.ico مباشرة ، ولكن يمكنك استخدام ملفات.png أو-j.webp" />
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 9
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 9

الخطوة 2. تغيير حجم الرمز المفضل لديك وحفظه

32x32 px هو حجم عناصر سطح مكتب Windows بينما 16x16 بكسل هو حجم favicons في علامة تبويب المتصفح. بعد إنشاء الرمز المفضل لديك بتنسيق أكبر ، من المهم تقليل حجمه حتى تتمكن من رؤية الشكل الذي سيبدو عليه في متصفحات الأشخاص. إذا كان غير مقروء أو غير ممتع من الناحية الجمالية ، فابدأ من جديد بتصميمك الأصلي. فكر في الأنظمة الأساسية التي من المرجح أن يتم استخدام موقع الويب أو التطبيق الخاص بك عليها ، ثم قم بإنشاء رمز مفضل لتغطية جميع القواعد الخاصة بك.

  • من المهم ملاحظة أن الأجهزة والبرامج المختلفة تستخدم أحجامًا مختلفة من الرموز المفضلة.
  • تتضمن بعض أحجام الرموز المفضلة الأخرى 57 × 57 بكسل لشاشة iOS الرئيسية القياسية ، و 72 × 72 بكسل لجهاز iPad ، و 96 × 96 بكسل لتلفزيون Google ، و 128 × 128 بكسل لمتجر Chrome الإلكتروني ، و 195 × 195 بكسل للاتصال السريع أوبرا.
  • إذا كنت ترغب في تغطية جميع القواعد الخاصة بك ، يمكنك إنشاء إصدارات من الرموز المفضلة في كل من هذه الأحجام.
  • احفظ نسخًا منفصلة من رمزك المفضل ، حتى لا تفقد العمل الذي أنجزته.
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 10
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 10

الخطوة الثالثة. ادمج ملفاتك باستخدام محول

إن الشيء العظيم في ملفات.ico هو أنه يمكنك دمج أكثر من ملف لإنشائه. هذا مفيد لأن المتصفحات والبرامج المختلفة ستحتاج إلى رمز فافي مختلف الحجم. للتأكد من أن الرمز المفضل لديك يبدو جيدًا عبر جميع الأنظمة الأساسية المختلفة ، قم بتحويل ملفاتك باستخدام محول عبر الإنترنت. اكتب "محول الرموز" في محرك البحث المفضل لديك للعثور على تطبيقات مجانية عبر الإنترنت للقيام بذلك. احفظ الملف المدمج باسم "favicon.ico".

  • يمكنك أيضًا استخدام برنامج مثل GIMP يحتوي على ميزة مضمنة ، أو تنزيل مكون إضافي يسمى ICO FORMAT إلى Adobe Photoshop.
  • أنشئ مجلدًا جديدًا حتى تتمكن من تخزين الرموز المفضلة الجديدة أو الأعمال الجارية.
  • اكتب ".ico converter" أو "favicon generator" في محرك البحث للعثور على الأدوات المختلفة التي يمكنك استخدامها.

طريقة 3 من 3: تنفيذ الأيقونة المفضلة لديك

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 11
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 11

الخطوة الأولى: قم بتحميل الأيقونة المفضلة الخاصة بك إذا كنت تستخدم محرر موقع ويب

يأتي العديد من محرري مواقع الويب مع نموذج مدمج يسمح لك بتحميل الأيقونة المفضلة إلى موقع الويب الخاص بك تلقائيًا. إذا كنت تستخدم محرر موقع ويب يحتوي على هذا المضمّن ، فابحث عن الخيارات التي تقول "تحميل الرمز المفضل" أو "إضافة الرمز المفضل" في قائمة إعدادات موقع الويب الخاص بك. حدد ملف favicon.ico الخاص بك وقم بتحميله على موقعك.

إذا لم تتمكن من العثور على مكان لتحميل الأيقونة المفضلة الخاصة بك على محرر موقع الويب الخاص بك ، فسيتعين عليك القيام بذلك يدويًا

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 12
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 12

الخطوة 2. قم بتحميل الملف إلى الدليل الجذر لموقعك

إذا كان موقع الويب الخاص بك يدعم بروتوكول نقل الملفات أو FTP ، فيمكنك استخدام عميل FTP لتحميل ملف favicon.icon الجديد الخاص بك إلى الدليل الجذر (الفهرس). إذا لم يكن الأمر كذلك ، فسيتعين عليك الانتقال إلى صفحة مضيفي الويب وتحميل الصورة يدويًا. تذكر استبدال ملف favicon.ico الحالي بملفك الجديد.

قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 13
قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 13

الخطوة 3. قم بإضافة الملف إلى العنوان الخاص بك

ابحث عن المكان الذي يمكنك من خلاله الوصول إلى ملفات PHP و CSS لموقعك. انتقل إلى ملف header.php الخاص بموقعك وقم بتحريره. تحت نوع العلامة ،"

  • هذا يجب أن يربط موقعك بالرمز المفضل لديك.

    نظرًا لأنك تستخدم PHP ، فهذا يعني أن أي مواقع تستخدم ملف الرأس الخاص بك سيكون لها الآن نفس الرمز المفضل

    قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 14
    قم بإنشاء أيقونة فافيكون الخاصة بك الخطوة 14

    الخطوة 4. قم بتحديث المستعرض الخاص بك

    بمجرد الانتهاء من تحميل الرمز المفضل ، يمكنك تحديث متصفحك لرؤية صورتك الجديدة بجوار شريط العناوين. للانتقال مباشرة إلى صورة الرمز المفضل لديك ، اكتب ، "https://www.yourdomain.com/favicon.ico."

    • إذا لم يظهر الرمز المفضل لديك في البداية ، فقد تضطر إلى إعادة تعيين ذاكرة التخزين المؤقت للمتصفح.
    • لمسح ذاكرة التخزين المؤقت ، انتقل إلى إعدادات المستعرض واحذف ملفات الإنترنت المؤقتة وملفات تعريف الارتباط والمحفوظات.

موصى به: