كيفية إنشاء فافيكون للموقع: نصائح وخدمات مفيدة | أخبر الويب
- كيفية إنشاء فافيكون للموقع: نصائح وخدمات مفيدة من الصعب تخمين فافيكون عندما تسمع هذه الكلمة لأول...
- كيفية جعل فافيكون في برنامج فوتوشوب
- كيفية حفظ فافيكون
- كيفية إدراج موقع فافيكون
- كيفية استبدال فافيكون
- كيفية إنشاء favicons أكثر تعقيدا
كيفية إنشاء فافيكون للموقع: نصائح وخدمات مفيدة
من الصعب تخمين فافيكون عندما تسمع هذه الكلمة لأول مرة. هذا هو رمز مصغر يتم عرضه على علامات تبويب المتصفحات ، في خطوط العناوين وغيرها من المناطق ، اعتمادًا على نظام التشغيل الذي تستخدمه ومتصفح الإنترنت. يمكن أن يطلق عليه بأمان واحد من أكثر العناصر تعقيدًا ومتقلبة في تصميم الموقع.
من الصعب جدًا إنشاء فافيكون جيدًا ، نظرًا لأن الأيقونة صغيرة ، يجب أن تكون واضحة وتعرض شيئًا ذي صلة بموقعك. يمكن أن يكون إنشاء فافيكون متوافقًا مع جميع المتصفحات الشائعة مهمة شاقة. في هذه المقالة سوف نتعامل مع جميع الجوانب المعقدة لإنشائها. إذا كنت بحاجة أيضًا إلى شعار ، فلدينا إذن مقال كيف نفعل ذلك.
كيفية إنشاء فافيكون
لنبدأ بتصميم الفافيكون. يجب أن يعكس التصميم الجيد ، على الرغم من صغر حجمه ، جوهر موقعك وأن يكون جزءًا أساسيًا من هوية الشركة. عادةً ما يكون الرمز هو رمز (رمز) لشركة وليس شعارًا بالكامل (رمز ، نص وشعار).
بصفتها المفضلة ، تستخدم هذه المواقع أيقوناتها (أو الصور القريبة منها).
يجب عدم استخدام النص الموجود في فافيكون ، لأن هذا النص سيكون غير قابل للقراءة نظرًا لصغر حجم الصورة. الاستثناءات الوحيدة لهذه القاعدة هي أحرف النص المشهورة عالميًا والتي ترتبط تلقائيًا بعلامة تجارية معينة. على سبيل المثال ، غادر المورد على الإنترنت ويكيبيديا على الحرف المفضل "W" ، و Facebook - الحرف "F".
توجد على هذه الرموز المفضلة حروف مرتبطة بقوة بعلامة تجارية معينة. على سبيل المثال ، يستخدم Facebook علامة الرسم الخاصة به. لاحظ أيضًا أن وحدات البكسل مرئية على صورة ديزني. هذا لأنه تم التقاط لقطة الشاشة على شاشة Retina المتوافقة مع 16 × 16 رمزًا ، بينما تستخدم مواقع الويب 32 × 32 رمزًا.
نظرًا لأن favicons عبارة عن صور صغيرة ، يلعب كل بكسل دورًا مهمًا. في بعض الأحيان بعد تصغير الشعار ، تصبح وحدات البكسل الفردية مرئية ، والتي تصبح الصورة "غير واضحة". لتحقيق الوضوح ، تحتاج إلى تحرير الرمز على مستوى البكسل.
لتجنب ذلك ، تحتاج إلى تغيير حجم الشعار باستخدام برامج تحرير خاصة مثل Photoshop أو GIMP. تحتاج أولاً إلى تقليل حجم الصورة إلى 64 × 64 بكسل (هذا هو أكبر حجم فافيكون). ثم تحتاج إلى تحرير كل بكسل باستخدام أداة القلم الرصاص حتى تصبح الصورة واضحة. هذه عملية شاقة ، لكن النتيجة تستحق العناء. عندما يكون favicon 64x64 جاهزًا ، تحتاج إلى القيام بالمهمة نفسها مع صورة 16 × 16 و 24 × 24 و 32 × 32 بكسل. العديد من الأحجام تحتاج إلى صورة معروضة بشكل صحيح في جميع المتصفحات والأدوات الذكية:
- 64x64 - الإشارات المرجعية متصفح سفاري.
- 32 × 32 - شاشات عالية الدقة (شبكية العين) ؛
- 24 × 24 - الإشارات المرجعية في Internet Explorer و MicroSoft Edge ؛
- 16 × 16 - Google Chrome والمتصفحات الأخرى.
كيفية جعل فافيكون في برنامج فوتوشوب
تحتاج أولاً إلى إنشاء بعض اللوحات ذات الأبعاد المذكورة أعلاه.
ثم تحتاج إلى إضافة رمز أو بريد إلكتروني أو صورة أخرى إلى اللوحة القماشية.
كيفية حفظ فافيكون
بعد إنشاء رموز بأحجام مختلفة ، احفظ كل منها كملف PNG شفاف (24 بت). في Photoshop ، يمكنك استخدام ميزة "حفظ للويب" المتوفرة في قائمة "ملف". ثم تحتاج إلى دمج جميع ملفات PNG في ملف ICO واحد. يمكنك استخدام كل من ملفات PNG وملفات ICO في نفس الوقت ، ولكن غالبًا يفضل Safari و Chrome تنسيق ICO فقط. في رأيي ، من الأسهل إنشاء ملف ICO واحد. تنسيق ICO ليس شائعًا للغاية ، ولكن لحسن الحظ هناك عدد من الأدوات التي يمكن أن تساعدك في تحويل ملفاتك إلى هذا التنسيق. لهذا الغرض ، أفضل استخدام محرر أيقونة X . هذه خدمة مجانية عبر الإنترنت تقوم على الفور بتحويل الصور التي تم تنزيلها إلى ملف ICO واحد ، وبعد ذلك يمكنك تنزيله. هذا ليس شيئًا معقدًا ، ما عليك سوى اتباع التعليمات الموجودة على الموقع. إذا كنت تعتبر نفسك شخصًا يائسًا ، فيمكنك تجربة محرر البيكسل لهذه الخدمة ورسم إشارة صوتية بنفسك. (على الرغم من أنني أفضل تحرير favicons في محرر أكثر احترافًا ، على سبيل المثال ، في Photoshop).
عن طريق تحميل صور PNG إلى محرر X-Icon ، ستحصل على ملف ICO واحد في المخرجات.
كيفية إدراج موقع فافيكون
لذلك ، لديك بالفعل ملف ICO. الآن تحتاج إلى إضافته إلى الموقع. إعادة تسمية الملف إلى favicon.ico ووضعه في المجلد الجذر لموقع الويب الخاص بك (حيث يتم تخزين ملف index.html والملفات القياسية الأخرى). بعد الإضافة الناجحة ، يمكنك مشاهدته على موقع الويب الخاص بك. com / favicon.ico. تبحث جميع المتصفحات تقريبًا عن ملف favicon.ico في المجلد الجذر. لذلك ، من المهم تنزيل الفافيكون في هذا المجلد. للتوافق مع المتصفحات المختلفة ، من الأفضل عدم إضافة أي عناصر أو روابط HTML تشير إلى موقعها. تعمل هذه الخدعة لجميع المتصفحات ، حتى IE6. أيضًا ، إذا كان لديك موقع WordPress ، فيمكنك إضافة العديد من السمات في إعدادات السمات في العديد من السمات. ويمكن أيضا أن تستخدم هذه الطريقة.
كيفية استبدال فافيكون
لسبب لا يمكن تفسيره ، تضيفه المتصفحات إلى ذاكرة التخزين المؤقت. لذلك ، عند تحميل ملف ICO جديد ، قد يستمر المستعرض في إظهار favicon القديم. ماذا تفعل في هذه الحالة؟ يمكنك إضافة ملف HTML مؤقت يشير إلى موقع المفضلة لديك. في نهاية عنوان URL أيضًا ، تحتاج إلى إضافة سلسلة استعلام قصيرة:
<link rel = "shortcut icon" href = "موقع الويب الخاص بك .com / favicon.ico؟ v = 2 ″ />
لذلك سوف يعتقد المتصفح أن هذا هو عنوان URL فريد ، وبالتالي ، سيضطر لعرض أيقونة جديدة. بعد تحديث favicon ، يمكن إزالة رمز HTML هذا بالكامل. إذا كنت بحاجة إلى إجراء تغييرات على favicon ، استخدم نفس التقنية ، في كل مرة تزيد من الرقم بعد "v" في سلسلة الاستعلام. وبالتالي ، سوف يرى المتصفح في كل مرة عنوان URL هذا فريدًا ويعرض نسخته الجديدة. ولا تنسَ حذف كود HTML بعد التحديث الناجح.
كيفية إنشاء favicons أكثر تعقيدا
في هذه المقالة ، أردت أن أصف طريقة عالمية وسهلة لإنشاء favicons ستعمل على أي منصة تقريبًا. ولكن في تصميم وتطوير المواقع لا يوجد حد الكمال. إذا كنت تريد معرفة كيفية إنشاء رموز أكثر تعقيدًا ، يمكنك تجربة استخدام الخدمة favico.js . يسمح لك بإنشاء صور ديناميكية بأرقام مختلفة. بفضل هذا الرمز ، يمكنك رؤية عدد الرسائل غير المقروءة ، حتى عندما لا تكون علامة التبويب المقابلة نشطة. إذا كنت ترغب في إنشاء favicons متحركة على الإنترنت ، يمكنك تجربة استخدام مولد favicon favicon.cc .
المزيد من المولدات على الانترنت يمكنك أن تجد هنا .
إذا كنت ترغب في مشاركة النصائح الخاصة بك على إنشاء favicons أو طرح سؤال ، أنا في انتظارك في التعليقات!