ما هي نقطة Favicons؟
عندما أبدأ في إخبار الناس بأهمية وجود فافيكون لاستراتيجيتهم الشاملة للعلامة التجارية عبر الإنترنت ، فإنهم عادة ما يقولون نفس الشيء: "ألا تأخذ هذه العلامة التجارية شيئًا بعيدًا جدًا؟"
غالبًا ما يكون جوابي: "ليس إذا كنت جادًا في جهودك الخاصة بالعلامة التجارية!"
هذا صحيح ، فافيكونز هي أشياء صغيرة جداً ، ربما هي الأقل أهمية في الموقع ، لكن الاهتمام بالتفاصيل يجعل الموقع بارزاً ؛ وحتى لو بدا الأمر مجنونا ، ففايكونز مهم جدا من وجهة نظر العلامة التجارية.
بالنظر إلى WDD هو موقع موجه إلى جمهور مصمم ، أعتقد أن العديد منكم يعرف بالفعل ما هي favicons وكيفية إنشائها ؛ ولكن قد تساعدك هذه المقالة في تحديد سبب إجرائها ، وستكون أيضًا بمثابة صفحة موارد جيدة.
إنني أشارك قائمة كبيرة بالموارد ذات الصلة بـ favicon أدناه ، لذا ضع في اعتبارك وضع إشارة مرجعية على هذه الصفحة للرجوع إليها في المستقبل. أوه ، وإذا قمت بذلك ، لاحظ رمز favicon WDD في قائمة مرجعية الخاص بك ؛)
فقط في حال لم تكن مصممًا ، أو أي نوع من الحزام الأسود في فافيكون-آرت ، تغطي هذه المقالة على الأرجح كل شيء ستحتاج معرفته عن هذه المربعات الصغيرة 16 × 16 بكسل ، وحتى بعض التثيلات المثيرة للاهتمام أيضًا . لذلك استمتع!
ما هو favicon؟
Favicons عبارة عن صور مربعة صغيرة عادةً 16 × 16 بكسل والتي تستخدمها متصفحات الويب لعرض تمثيل رسومي للموقع الذي يتم زيارته على الجانب الأيسر من شريط عناوين المتصفح. من المحتمل أن تكون قد رأيت العديد من الأيقونات من قبل ، حتى لو لم تكن تعرف ما هي. إذا كان هناك أي شك ، فإن الصورة أدناه ستساعد.
مثالان على favicons على متصفح Google Chrome المبوب.
إذا كنت مهتمًا بفهم جزء من تاريخ الإنترنت ، فإليك حقيقة مثيرة للاهتمام:
كلمة favicon عبارة عن واجهة مأخوذة من كلمات "المفضلة" و "icon" ، وتم تسميتها على هذا النحو لأنها كانت مدعومة من قبل Microsoft Internet Explorer 5 وفقط في حالة عدم استخدام IE ، فإن ميزة وضع إشارة مرجعية للمتصفح هذه يسمى المفضلة.
ما هو الغرض من favicon؟
في الأيام الأولى للإنترنت ، كانت أدوات مثل Google Analytics مجرد أحلام في أذهان عدد قليل من المهووسين بالشبكة ، لذا فقد يبدو الأمر غريبًا في هذا الوقت ، حيث تم استخدام الرموز المفضلة كطريقة لتقدير عدد زيارات موقع الويب من خلال حساب عدد الزوار الذين وضعوا إشارة مرجعية على الصفحة. (هذا مقتطف آخر مثير في تاريخ الإنترنت!)
لكن الحقائق المثيرة للاهتمام جانبا ، فإن السبب الرئيسي لوجود favicons في الوقت الحاضر هو تحسين تجربة المستخدم. يتم استخدام Favicons في جميع المتصفحات الحديثة في شريط العناوين ، وفي شريط الروابط ، وفي منطقة وضع الإشارات المرجعية وفي علامات تبويب التصفح. بالإضافة إلى ذلك ، تعرض بعض المتصفحات أيضًا favicons عندما تنشئ رابطًا مختصرًا لموقع الويب المقابل في سطح المكتب وجهازك الجوّال.
من المؤكد أن السبب الرئيسي وراء امتلاك favicon هو التحسن الواضح في تجربة المستخدم. سيعرض موقع الويب بدون أحد رموز متصفح عامة على جميع نقاط التفاعل التي ذكرتها أعلاه ، وإذا كنت مهتمًا بتجربة المستخدم الخاصة بك ، فيجب أن تهتم بشخصية favicons.
لكنني لا أستطيع تجنب رؤية الأشياء من خلال باقة العلامات التجارية ، مجال خبرتي ، لذا أعتقد أن الرموز المفضلة أكثر أهمية من وجهة نظر العلامة التجارية. مرة أخرى ، مع وجود العديد من نقاط التفاعل ، فإن عدم استخدامها لزيادة الوعي بالعلامة التجارية يعد جريمة. الحقيقة هي أن إيجاد طرق مبتكرة لتحسين العلامة التجارية الخاصة بك على الانترنت هو دائما مهمة صعبة ، وامتلاك favicon هو وسيلة سهلة وبسيطة لتحقيق ذلك. لذا احضر لنفسك صديقي!
كيف تصنع فافيكون؟
إنشاء favicon على شبكة الإنترنت أمر سهل كما فطيرة. في واقع الأمر ، لا تحتاج حتى إلى أن تكون مصممًا للقيام بذلك. من المؤكد أنه يساعد إذا كنت كذلك ، حيث يمكنك وضع مهاراتك في العمل وخلق شيء مميز بالفعل ، ولكن حتى من هم أقل ذكاءً من الناحية التكنولوجية يمكنهم القيام به في حوالي 5 دقائق أو أقل ، وذلك باستخدام الأدوات المناسبة.
تتيح لك مواقع الويب الموجودة في القائمة أدناه إنشاء فافيكون ببساطة عن طريق تحميل صورة موجودة مسبقًا. لذلك إذا كنت تريد إنشاء رمزًا لعلامتك التجارية ، فكل ما عليك فعله هو تحميل شعارك إلى أحد المواقع التالية وتنزيل ملف favicon. من السهل peasy ، الليمون squeezy.
إليك قائمة من عوامل التوليد Favicon التي تبحث عنها:
- Favicon CC
- Favicon مولد
- ديناميكية محرك أداة Favicon
- شامي Favicon الخدمة
- Favicon Generator ORG
- فافيكون المملكة المتحدة
- Degraeve Favicon
- مكافحة فافيكون
- الجنرال فافيكون
- Favigen
تختلف مواقع الويب المذكورة أعلاه كثيرًا من حيث الملف الناتج الذي تحصل عليه ؛ لا سيما من حيث حجم الملف والامتداد. إذا كنت تتطلع إلى الحصول على الملف الأكثر توافقًا ، فأوصيك بشدة بتنزيل صورة بحجم 16 × 16 بكسل بتنسيق "ico".
إذا كنت بحاجة إلى بعض الإلهام ، فجرّب الاطلاع على معارض favicon أدناه:
كيف تستخدم فافيكون الخاص بك؟
بمجرد أن تكون قد تم تصميمها بعناية ، يجب ألا يستغرق تثبيتها على الخادم الخاص بك أكثر من دقيقتين في خطوتين سهلتين. لذلك ستحتاج إلى الوصول إلى المجلد الجذر لموقع الويب الخاص بك وأداة تحرير النص لتغيير شفرة HTML لموقعك على الويب.
الخطوة 1
ستحتاج إلى رفع ملف "favicon.ico" إلى خادمك. للقيام بذلك ، قم بتوجيه شريط عنوان المستعرض الخاص بك إلى خادم FTP الخاص بك ؛ يجب أن يكون عنوان URL الخاص بك مشابهاً لهذا:
ftp://[email protected]اضغط على Enter وسيطالبك المتصفح باسم المستخدم وكلمة المرور قبل منح الوصول إلى خادم الملفات. بمجرد دخولك ، ما عليك سوى تحميل ملف "favicon.ico" إلى المجلد الجذر ، وبذلك تكون قد انتهيت.
الخطوة 2
ستحتاج الآن إلى تعديل صفحة HTML لموقعك على الويب لمساعدة المتصفحات في العثور على صورتك المفضلة. أبقِ نافذة FTP مفتوحة ، ابحث عن ملف "index.html" أو "header.php" وقم بتنزيله من الخادم الخاص بك واتبع الخطوات التالية وفقًا للملف الذي تحصل عليه:
إذا كان موقعك الإلكتروني مصنوعًا من HTML عادي ، فأدخل الكود أدناه في منطقة HEAD من ملف "index.html" ، ولا تنس تغيير "yoursite.com" لعنوان موقعك على الويب.
إذا كنت تستخدم WordPress ، فأدخل الكود أدناه في منطقة HEAD من ملف "header.php".
مع القيام بذلك ، قم بتحميل الملف إلى المكان الذي حصلت عليه منه. انت انتهيت!
في الواقع ، فإن معظم المتصفحات الحديثة ذكية بما يكفي للعثور على ملف favicon حتى بدون أي كود ، ولكن فقط طالما أن صورة favicon تحتوي على 16 × 16 بكسل ، فقد تم تسميتها باسم "favicon.ico" وهي المحفوظة في المجلد الجذر لمجلد موقع الويب الخاص بك.
كيف تصنع favicon في Photoshop
مع وجود العديد من الأدوات المتوفرة لمساعدتك في إنشاء المفضلة لديك ، فلماذا تريد أن تأخذ الطريق الصعب وإنشاءه في Photoshop؟ حسنًا ، إذا كنت مصممًا وتريد الحصول على أفضل ما يمكن من فافيكون ، فمن المؤكد أن هذه هي الطريقة المحترفة للقيام بذلك. الحيلة هي أن Photoshop لا يدعم ملفات "ico" بشكل أصلي ، لذا تحتاج إلى ذلك قم بتنزيل هذا البرنامج المساعد من Telegraphics .
تأكد من تثبيته قبل اتباع البرنامج التعليمي أدناه. لن يعمل Photoshop بدونه.
ابحث عن الخيار "ICO" في مربع "حفظ باسم" في Photoshop لتأكيد تثبيت المكون الإضافي.
قم بإنشاء مستند جديد في Photoshop لتحديد عنصر القائمة "ملف" والخيار التالي "جديد" ، ثم قم بتعيين الرسم الخاص بك على 64 × 64 بكسل. لماذا ا؟ نظرًا لأن حجم favicon النهائي بحجم 16 × 16 صغير جدًا ، فإن الحصول على قماش أكبر للعمل عليه سيساعدك على تدفق العصير الإبداعي الخاص بك. ثم قم بلصق شعارك في المستند وأطلق قوة سحرية يونيكورن.
بمجرد الانتهاء من ذلك ، ما عليك سوى اختيار القائمة "صورة" والخيار التالي "حجم الصورة" وتقليل الصورة إلى 16 × 16 بكسل. تذكر أن تنقر على "Resample Image" واختر "Bicubic Sharper" ، وهذا للتأكد من عدم ضبابية الصورة عند تغيير حجمها. إذا كنت لا تحب النتيجة النهائية ببساطة التراجع عن التغييرات latests الخاصة بك مع "AltCtrl / AltCmd + Z" ومواصلة العمل على التصميم حتى كنت راضيا عن ذلك.
من أجل الانتهاء من favicon كل ما عليك القيام به هو النقر على "ملف" القائمة والخيار التالي "حفظ باسم" ، هناك تذكر أن اسم الملف الخاص بك باسم "favicon.ico". مرة أخرى ، أنجزت المهمة!
استنتاج
تعتبر Favicons واحدة من تلك الأشياء الصغيرة التي لا نوليها الكثير من الاهتمام ، ولكن الحقيقة هي أنه بعيدًا عن كونها غير مهمة ، فهي جزء مهم جدًا من الويب ، سواء من منظور واجهة المستخدم أو نقطة العلامة التجارية من رأي.
يقول البعض أن الأشياء الرائعة تأتي بأحجام صغيرة ، وأعتقد أن هذا ينطبق أيضًا على favicons ، لأن أي مصمم ويب و / أو متخصص في العلامة التجارية دائمًا ما يستغرق وقتًا لإضافة رمز إلى مواقع عملائهم ، حتى عندما لا يكون لدى العميل فكرة عن ما هو favicon ، يدل على قدر كبير من الاحتراف والاهتمام بالتفاصيل. نوع الجودة التي يقدرها كل عميل.
هل تنشئ favicons لعملائك؟ هل هم الكثير من المتاعب لمكافأة قليلة جدا؟ دعنا نعرف أفكارك في التعليقات.