إنشاء أيقونة مفضلة على الإنترنت. طريقة عالمية لإنشاء الأيقونات المفضلة

أهلاً بكم!

سأخبرك في هذه المقالة بكيفية تثبيت أيقونة مفضلة على موقع ويب. يمكن القيام بذلك باستخدام الدليل الجذر للموقع أو باستخدام وظيفة القالب. سنقوم بتحليل جميع الخيارات وتحديد الخيار الأفضل لحالة معينة.

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

Favicon هو رمز موقع ويب بقياس 16 × 16 (أو 32 × 32، ولكن ليس أكثر). يظهر في علامة تبويب المتصفح. تبدو هكذا:

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

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

دعونا نلخص:

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

بمعنى آخر، إذا كان لديك سؤال على الإطلاق: قم بإضافة أيقونة مفضلة أم لا، فالإجابة واضحة - تأكد من إضافتها.

الآن دعونا نتعرف على كيفية رسم هذا الرمز بالذات. يمكن القيام بذلك باستخدام العديد من الخدمات والمحررين عبر الإنترنت.

حيث لتحميل النسخة النهائية

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

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

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

يمكنك البحث عن الخيارات الجاهزة على مواقع الويب المختلفة. كقاعدة عامة، هناك مجموعات كاملة من الشعارات المواضيعية المختلفة التي قد تروق لبعض مشرفي المواقع.

لكنني سأكرر مرة أخرى أنه سيكون من الأفضل إنشاء أيقونة مفضلة بنفسك.

إنشاء أيقونة مفضلة

خدمات عبر الانترنت

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

ستغطي هذه الدورة أهم سمات الإبداع الكفء مشاريع المعلوماتوالتفاعل مع الفريق والجوانب المفيدة الأخرى التي ستحتاجها بالتأكيد عند تنمية أعمالك.

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

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

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

هناك العديد من الموارد على الإنترنت التي تم تخزينها بالفعل أيقونات جاهزة. هناك عدد كبير منهم، ولكننا الآن مهتمون بإنشاء أيقونة مفضلة.

هل تحتاج إلى إنشاء أيقونة مفضلة لموقعك على الويب؟ دعونا نفكر في خدمات إنشاء الرموز المفضلة عبر الإنترنت

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

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

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

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

بالطبع، يمكنك استخدام Photoshop المفضل لدى الجميع لإنشاء الأيقونة. لكنه لا يحفظ الصور بامتداد ico. أو بالأحرى، يتم حفظه، ولكن لهذا تحتاج إلى فك ضغط البرنامج المساعد الخاص - icoformat.8bi وتثبيته في المجلد Plug-Ins\File Formats في مجلد Photoshop. سيسمح لك هذا بحفظ الملفات بالامتداد المطلوب. بالنسبة لي، هذا أمر مزعج للغاية.

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

تستطيع ايضا استخذام المحولات عبر الإنترنتالصور الرسومية من تنسيق إلى آخر. على سبيل المثال هنا أو . باستخدامها يمكنك تغيير أي امتداد ملف رسوميإلى منظمة التعاون الدولي.

كيف يمكنك جعل الأيقونة تصبح أيقونة مفضلة للموقع؟

الخطوات التالية مطلوبة:

1 تأكد من استدعاء الملف .

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

3 للقيام بذلك، خذ ملف السمة الخاص بنا header.php (يمكنك تحريره في لوحة الإدارة مباشرة في WordPress، أو يمكنك تنزيله من الخادم)، وافتحه وأضفه قبل علامة الإغلاقالكود التالي:

/favicon.ico"/>

/favicon.ico"/>

4 احفظ الملف وأعد نقله إلى الاستضافة.

5 امسح ذاكرة التخزين المؤقت للمتصفح الحالي وهذا كل شيء. لقد حصلنا على النتيجة المرجوة.

بالمناسبة، ليس من الضروري أن يكون الرمز المفضل موجودًا في الجذر. تحدد سمة href مباشرة المسار إليها. اتضح مثل هذا:

ليس من الضروري أيضًا أن يكون للأيقونة امتداد ico. يمكنك أيضًا استخدام امتدادات png وgif. للقيام بذلك، يقوم الكود بتغيير نوع ملف الإخراج.

أي أننا نقوم بتغيير النوع من image/x-icon إلى image/png أو gif .

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

الدالة sp_set_favicon() (صدى " "; ) add_action("admin_head", "sp_set_favicon"); add_action("login_head", "sp_set_favicon"); add_action("wp_head", "sp_set_favicon");

الدالة sp_set_favicon() ( صدى صوت ".get_bloginfo("template_url" ) /> " ; add_action ("admin_head"، "sp_set_favicon")؛ add_action ("login_head"، "sp_set_favicon")؛ add_action ("wp_head"، "sp_set_favicon")؛

الآن سوف ينعكس في جميع الرؤوس.

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

شاهد الفيديو حول كيفية إنشاء favicon.ico واستضافته:

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

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

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

الطريقة الأولى: Favicon.by

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

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

ونتيجة لذلك، تحصل على ملف ICO رسومي يسمى favicon ودقة 16 × 16 بكسل. هذا الرمز جاهز بالفعل للاستخدام كرمز لموقع الويب الخاص بك.

الطريقة الثانية: محرر X-Icon

تطبيق متصفح HTML5 يسمح لك بإنشاء أيقونات مفصلة يصل حجمها إلى 64 × 64 بكسل. على عكس الخدمة السابقة، يحتوي X-Icon Editor على المزيد من أدوات الرسم ويمكن تكوين كل منها بمرونة.

كما هو الحال في Favicon.by، يمكنك هنا تحميل الصورة النهائية إلى الموقع وتحويلها إلى أيقونة مفضلة، وتحريرها بشكل صحيح إذا لزم الأمر.

إذا كنت تريد الحفاظ على تفاصيل الصورة التي تنوي تحويلها إلى أيقونة مفضلة، فإن X-Icon Editor يعد خيارًا رائعًا لهذا الغرض. تعد القدرة على إنشاء أيقونات بدقة 64 × 64 بكسل هي الميزة الرئيسية لهذه الخدمة.

Favicon (بالإنجليزية: Favorite Icon) هو رمز صغير (صورة، صورة) بتنسيق خاص يتم عرضه في شريط عنوان المتصفح عند عرض موقع ويب أو علامة تبويب المتصفح أو في إشاراته المرجعية ("المفضلة").

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

لماذا تحتاج إلى أيقونة مفضلة لموقع ويب؟

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

ما هو الأفضل للعرض على الأيقونة المفضلة؟

• يجب أن يتوافق الرمز مع موضوع الموقع.
• العلامة التجارية، إذا كان موقع الويب الخاص بك مرتبطًا بهذه العلامة التجارية. وفي الوقت نفسه، يمكن عرض علامات تجارية مختلفة لصفحات مختلفة؛
• استخدم الرمز المفضل الذي تريد النقر عليه، سيؤدي ذلك إلى زيادة نسبة النقر إلى الظهور عند العرض في عمليات بحث Yandex وGoogle؛
• قم بعمل العديد من تصميمات الأيقونات المفضلة لأقسام مختلفة من موقعك.
• قم بتصميم العديد من تصميمات الأيقونات المفضلة لمناسبات مختلفة (مثل رأس السنة، أو عيد الحب، أو يوم رواد الفضاء، :).

ضع الملف الناتج في جذر موقعك، حيث يوجد ملف الفهرس الرئيسي (index.php). للإشارة للمتصفح إلى موقع الأيقونة المفضلة للموقع في القسم الرئيسي من الصفحة، أدخل السطر التالي:

كيفية إنشاء أيقونة متحركة؟

تنسيق ICO لا يدعم الرسوم المتحركة. لكن المتصفحات الحديثة تسمح لك باستخدام تنسيق GIF للصور المصغرة. من الممكن تحديد ملف متحرك واحد (favicon.gif) للمتصفحات الحديثة، وآخر (favicon.ico) للمتصفحات القديمة، مثل Intertet Explorer. للقيام بذلك، أضف السطرين التاليين إلى قسم الرأس:

وبطبيعة الحال، تحتاج أولاً إلى وضع كلا الملفين في المجلد الجذر للموقع.

ماذا تفعل إذا كان عرض الصور في المتصفح محظورًا؟

إذا قمت بإنشاء رمز مفضل يحتوي على صورة مضمنة في رمز الصفحة:

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

كيفية الحصول على أيقونة المفضلة من موقع على شبكة الإنترنت

لا يضع جميع مشرفي المواقع favicon.ico في جذر الموقع. للحصول على عنوان الرمز المفضل، استخدم البرنامج النصي التالي:

]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU", $html, $out)) ( $link_tag = $out ; ; if (strpos($favicon, "://")===false) $favicon = $url "/" ltrim($favicon, "/" ) ?>

محركات البحث جوجل، ياندكس و فافيكون

تقوم روبوتات محرك البحث بتخزين أيقونات موقع الويب. تتوفر الرموز المخزنة مؤقتًا للطلبات التالية:

بالإضافة إلى ذلك، يمكن لـ Yandex أن تصنع لك "كائنًا" من أيقونات مواقع مختلفة:

أيقونات للآيفون والأيباد

حتى إذا لم تحدد رابطًا للصورة، فسيظل جهاز iPhone يبحث عن ملف باسم apple-touch-icon.png في المجلد الجذر للموقع وإذا وجده، فسوف يأخذ الصورة منه، بشكل دائري في الزوايا وسيتم تطبيق التمييز عليه تلقائيًا. لتجنب ذلك، بدلاً من apple-touch-icon.png، يجب عليك كتابة apple-touch-icon-precompose.png لأصحاب أجهزة iPhone وiPad، لأن بالنسبة لهم، نصنع أيقونة جميلة بحجم 57 × 57 (بالمناسبة، يمكن أن تكون أكبر، ولكن هذا هو الحجم القياسي للأيقونة الموجودة على شاشة الغداء)، ونربطها بهذه الطريقة:

كيفية تغيير الأيقونة المفضلة ديناميكيًا؟

إذا حاولت تغيير قيمة خاصية العلامة من خلال DOM، فلن تحصل على النتيجة المرجوة. لتغيير رمز الصفحة ديناميكيًا، يجب عليك أولاً إزالة علامة الارتباط ذات الرمز القديم من عنوان الصفحة، ثم إضافتها مع المحتوى الجديد. يتم ذلك على النحو التالي: // رابط إلى ملف الأيقونة الجديد var icon="new_favicon.ico"; var head = document.getElementsByTagName("head"); // ابحث عن الأيقونة القديمة من علامة الرأس وأزلها var links = head.getElementsByTagName("link"); ل(فار ط = 0؛ ط< links.length; i++) { var lnk = links[i]; if (lnk.rel=="shortcut icon") { head.removeChild(lnk); } } // Добавить новую иконку var link = document.createElement("link"); link.setAttribute("href",icon); link.setAttribute("type","image/x-icon"); link.setAttribute("rel","shortcut icon"); head.appendChild(link);

HTML5 والأيقونة المفضلة

تمت إضافة سمة الأحجام إلى HTML5، مما يسمح لك بإعلان عدة إصدارات مختلفة من نفس الرمز، ويمكن أن تكون هذه ملفات PNG:

كيفية إعلان بلاطة للأجهزة اللوحية على نظام التشغيل Windows 8؟

يبدو الإعلان الخاص بنظام التشغيل Windows 8.0 كما يلي:

يتوقع Windows 8.1 وIE 11 إصدارات متعددة من الصورة المعلنة في browserconfig.xml. على سبيل المثال:

لا يتعين عليك الإعلان عنه إذا لم يتم تغيير اسم الملف:

#2ب5797

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

أيقونات المفضلة للمواقع الأكثر شعبية

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

نسخة الفيديو:

كيف يجب أن يكون شكل الأيقونة المفضلة؟

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

• واضح ومفهوم
• مصنوعة بجودة جيدة
• ينقل معنى موقعك
• لديه أسلوب مشترك مع موقعك
• يتميز عن أيقونات المواقع الأخرى

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

ما هي أحجام أيقونات الموقع؟

كما تعلم، يوجد الآن مجموعة كبيرة ومتنوعة من المتصفحات والشاشات والأجهزة. ومتطلباتهم لأحجام الأيقونة المفضلة مختلفة. هناك خيارات الحجم التالية التي يجب مراعاتها:

• 16*16 بكسل - أحجام الأيقونات المفضلة القياسية، مناسبة لمعظم المتصفحات والأجهزة
• 32*32px - يستخدم في بعض الحالات متصفح الانترنتو سفاري
• 57*57px - يستخدم عند العرض ايفون
• 72*72px - يستخدم عند العرض اى باد
• 114*114 بكسل - يستخدم عند العرض على شاشات شبكية العين (57*2=114)
• 144*144 بكسل - يُستخدم عند العرض على شاشات شبكية العين اى باد (72*2=144)

ما هو التنسيق الذي يجب أن تكون عليه الرموز المفضلة؟

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

عدة طرق لإنشاء الرموز المفضلة

توجد اليوم طريقتان رئيسيتان لإنشاء الرموز المفضلة:

1. من خلال الخدمات الإلكترونية الخاصة
2. قم بإنشائه بنفسك باستخدام برامج خاصة مثل Photoshop وAdobe Illustrator

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

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

إنشاء أيقونة مفضلة

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

اختيار صورة

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

أجد الصورة المناسبة باستخدام البحث جوجلبناء على طلب "عجلة". كل ما علي فعله هو حفظه بالنقر بزر الماوس الأيمن واختيار "حفظ الصورة باسم".

الصورة ذات الصلة على صور جوجل

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

إزالة خلفية العجلة لدينا

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

قم بإنشاء أيقونة مفضلة بحجمين مختلفين

أقترح إنشاء رمزين مفضلين بحجم 64 بكسل و16 بكسل. نحتاج أولاً إلى إنشاء رمز أكبر (64 بكسل). للقيام بذلك نضغط على اختصار لوحة المفاتيح CTRL+N. في النافذة التي تظهر، نختار ارتفاع الصورة وعرضها ليكون 64 بكسل.

تحديد أبعاد الأيقونة المفضلة في المستقبل

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

تحريك العجلة إلى صورة جديدة

بعد نقل العجلات إلى صورة جديدة، نرى أنها غير مناسبة. نحن بحاجة إلى تقليل العجلة إلى 64 بكسل. للقيام بذلك، نضغط باستمرار على المفتاح يحولومن خلال النقر على النقطة القطرية للصورة نقوم بتصغيرها. لذلك قمنا بإنشاء أول أيقونة مفضلة لموقعنا الإلكتروني. دعني أذكرك أن حجمنا هو 64*64 بكسل. الآن علينا فقط حفظه عن طريق تحديد وظيفة "حفظ للويب" في علامة التبويب "ملف". نختار التنسيق PNG-24والمجلد الصور. نحن نسمي أيضًا الأيقونة المفضلة نفسها، فقط بالأحرف اللاتينية - "الرمز المفضل".

احفظ الرمز المفضل

عظيم. الآن كل ما يتعين علينا فعله هو إنشاء رمز مفضل أصغر. للقيام بذلك، انقر فوق علامة التبويب "الصورة" وحدد وظيفة "حجم الصورة". هنا قمنا بتعيين العرض والارتفاع إلى 16 بكسل. الآن كل ما علينا فعله هو حفظ هذه الصورة للويب. يمكننا أن نسميها "favicon-2".

إذن، نحن هنا، نقوم بإنشاء رمزين مفضلين لموقعنا الإلكتروني بالتنسيق "بي إن جي". أنشأنا أولاً خيارًا بحجم 64 بكسل حتى نتمكن بعد ذلك من تقليله بسهولة إلى 16 بكسل. إذا قمت أولاً بإنشاء خيار بحجم 16 بكسل، فلن تتمكن من زيادته إلى 64 بكسل دون فقدان الجودة. لذلك ضع ذلك في الاعتبار حتى لا تقوم بعمل مزدوج.

تثبيت المفضلة على الموقع

لتثبيت أيقونة مفضلة على موقع داخل علامة نحن نكتب:

إذا كان لدينا رمز مفضل بالتنسيق " منظمة التعاون الدولي"ثم نحن بدلا من ذلك " بي إن جي"يكتب " منظمة التعاون الدولي". على سبيل المثال:

كما ترون، يتم عرض أيقونة الموقع كما أردنا.

تحويل أيقونة الموقع إلى صيغة "ico".

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

تحميل الأيقونات المفضلة في خدمة xiconeditor.com

3. إذا رغبت في ذلك، يمكنك النقر على الزر "معاينة"ونرى كيف سيتم عرضها. لتنزيل أيقوناتنا المفضلة بالتنسيق "منظمة التعاون الاقتصادي"نضغط على الزر "يصدّر".

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

1. أعد نشر هذه المقالة على شبكات التواصل الاجتماعي ليستفيد منها عدد أكبر من الناس؛
2. اشترك في النشرة الإخبارية الخاصة بي حتى لا تفوت مشاركات المدونة المفيدة والمثيرة للاهتمام.

هذا هو المكان الذي لا أقول وداعا لك. شكرا لاهتمامكم ونراكم في المنشورات القادمة!