صنع أيقونة على الانترنت. كيفية إنشاء أيقونات مفضلة أكثر تعقيدًا

19.05.2019

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

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

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

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

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

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

  1. Faviсon.cc— منشئ أيقونات مفضلة مناسب تمامًا عبر الإنترنت. باستخدامه، يمكنك، على سبيل المثال، إنشاء أيقونة خاصة بك من الصفر (حصريًا تمامًا)، ورسمها بكسل تلو الآخر. للقيام بذلك، ستحتاج إلى النقر فوق الزر "إنشاء مفضل جديد" الموجود على الجانب الأيسر من نافذة الخدمة.

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

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

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

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

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

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

  2. favicon.ru- بمجرد أن كانت هذه الخدمة أبسط بكثير من المولد عبر الإنترنت الموصوف أعلاه، لكنها أصبحت مؤخرًا نظيرتها تقريبًا، ولكن باللغة الروسية فقط. لا يسمح لك Favicon.ru فقط بتحويل أي صورة لديك (على جهاز الكمبيوتر الخاص بك أو على الإنترنت) إلى تنسيق ICO بحجم 16 × 16 بكسل، ولكنه يتيح لك أيضًا رسمها من الصفر، بكسل بكسل.

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

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

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

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

مجموعة مختارة من المولدات والمجموعات ومعارض الأيقونات المفضلة عبر الإنترنت

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

  1. FaviconGenerator - يسمح لك بتحويل أي صورة تم تنزيلها من جهاز الكمبيوتر الخاص بك إلى تنسيق المفضلة المطلوبة (يمكنك تحميل الصور).
  2. AntiFavicon هو مولد Favicon مثير للاهتمام إلى حد ما. يمكنك ذلك إنشاء أيقونة مفضلة مع نقش. ستحتاج إلى إدخال نص النقش في حقلي "النص العلوي" و"النص السفلي"، وضبط نظام الألوان في منطقة "الألوان".
  3. FavIcon from Pics هي خدمة بسيطة أخرى عبر الإنترنت - يمكنك تحديد المسار إلى الصورة على جهاز الكمبيوتر الخاص بك، وتحويل وتنزيل الملف الناتج بتنسيق ICO وGIF.
  4. Iconj - الأمر اللافت للنظر هو أنه يمكنك إما تنزيل الأيقونة التي تم إنشاؤها أو تركها في الخدمة والحصول على رابط لهذا الملف
  5. DeGraeve هو منشئ Favicon Generator قوي إلى حد ما، يشبه في وظائفه Favicon.cc الذي تمت مراجعته مسبقًا. هنا أيضًا، يمكنك القيام بكل شيء إما من الصفر، أو تحميل صورة، والتي يمكن تعديلها وتنزيلها لاحقًا بتنسيق ICO بحجم مناسب.
  6. المولد - يسمح لك بإنشاء أيقونة مفضلة من صورة تم تحميلها، وإنشائها من البداية في محرر خاص.
  7. محرر الأيقونات عبر الإنترنت favicon.ico - حسنًا، إنه يفعل كل شيء نوعًا ما - إنشاء أيقونات مفضلة من البداية وتعديل صورة موجودة.
  8. Online Favicon هي أداة فعالة جدًا لإنشاء الشعارات المصغرة وتحريرها
  9. مولد Favicon مجاني - في حال لم يناسبك أي شيء من القائمة أعلاه.
  10. مولد المفضلة - بسيطة ولذيذة ...

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

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

إذا لم تكن لديك الرغبة أو الفرصة (أنت لست فنانا ولم تكن أبدا)، فإن أسهل طريقة هي محاولة البحث في المعارض مع مجموعات من المفضلة المجانية:

  1. معرض الأيقونات لموقع favicon.ico - أكثر من 15000 شعار صغير لموقعك لكل الأذواق والألوان
  2. Iconj عبارة عن مجموعة كبيرة إلى حد ما من الأيقونات التي صممها أشخاص آخرون وتم إتاحتها للجمهور
  3. Favicon.cc - 55 ألف خيار مختلف لجميع المناسبات. هناك أيضًا أيقونات مفضلة متحركة، والتي ستكون مرئية فقط في متصفح FireFox.
  4. معرض Favicon - عدد قليل من الرموز ذات الحجم المناسب

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

كيفية تثبيت Favicon على موقع ويب وتحديد المسار إليه

سيقوم متصفحك وروبوت بحث Yandex بذلك ابحث عن الرمز المفضل بشكل أساسي في المجلد الجذر لموقعك. لذلك، يمكنك ببساطة الاتصال بالموقع عبر FTP وتحميل ملف Favicon.ico الخاص بك إلى الدليل الجذر الخاص به (عادةً مجلدات public_htm أو htdocs) (من الأفضل كتابة اسمه بأحرف صغيرة). افتح الآن موردك في بعض المتصفحات ولاحظ ما إذا كان الرمز الموجود في علامة التبويب قد تغير. هل تغير؟ لا؟ حسنًا، لا بأس.

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

افتح الكود المصدري لأي صفحة على موقعك. لعرض كود المصدر الخاص بها، ما عليك سوى النقر بزر الماوس الأيمن على الصفحة وتحديد عنصر قائمة السياق المناسب (على سبيل المثال، "كود المصدر" في Opera القديم، أو "كود مصدر الصفحة" في Mazila Firefox، أو "عرض كود الصفحة" في متصفح Opera القديم. Google Chrome أو "عرض كود HTML" في IE) أو اضغط على مجموعة المفاتيح Ctrl+U. انظر الآن إلى أعلى رمز الصفحة بحثًا عن سطر يحدد المسار إلى favicon.ico.

قد يبدو الأمر كالتالي:

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

في جملةعادةً ما يوجد Favicon في المجلد الذي يحتوي على القالب الذي تستخدمه (تمت كتابة المسار إليه في Joomla 1.5 في ملف Index.php من دليل نفس القالب، ولكن في Joomla 3 أصبح كل شيء أكثر تعقيدًا بعض الشيء). أولئك. لتغيير الأيقونة المفضلة في Joomla، كل ما عليك فعله هو اتباع هذا المسار وتحميل ملف favicon.ico الخاص بك هناك، والإجابة على سؤال الاستبدال بالإيجاب:

/templates/folder_with_the_design_template/favicon.ico

ملف فافيكون في ووردبريسافتراضيًا، يمكن أيضًا أن يكون موجودًا في المجلد الذي يحتوي على القالب الذي تستخدمه (يتم أيضًا تعيين المسار إليه هناك):

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

بشكل عام، إذا كنت تريد قم بتعيين أو تغيير المسار إلى الرمز المفضل لديك، والتي يمكن أن يفهمها كل من المتصفحات وروبوت بحث Yandex، فستحتاج إلى كتابتها في ملف القالب المناسب لـ Joomla أو WordPress أو أي محرك آخر، بين علامتي الفتح والإغلاق رأس، أسطر التعليمات البرمجية التالية:

يعتمد ملف القالب الذي يجب كتابة هذه السطور فيه على محرك موقعك. على سبيل المثال، في في ووردبريستحتاج إلى فتح ملف header.php للتحرير: wp-content/themes/Folder_with_your_theme_design. افتح header.php في المحرر وفي البداية ابحث عن علامة Html HEAD المفتوحة. في أي مكان بعد ذلك، ولكن قبل إغلاق الرأس، اكتب أحد أسطر التعليمات البرمجية أعلاه للإشارة إلى المسار إلى ملف رسم الشعار المصغر الخاص بك.

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

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

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

يمكنك مشاهدة المزيد من الفيديوهات بالذهاب إلى
");">

أنت قد تكون مهتم

تحليل مواقع الويب في الخدمات المجانية عبر الإنترنت Pr-cy وCy-pr وBe1 وXseo وغيرها
سهولة الاستخدام - كيفية جعل موقع الويب الخاص بك مناسبًا للزائرين ومحاولة إبقائهم على قراءة مقالاتك لأطول فترة ممكنة
عميل FTP عبر الإنترنت Net2ftp وتنبيهات Google - خدمات مفيدة لمشرفي المواقع
أيقونات وشارات وخلفيات وصور وشعارات للموقع (الخدمات عبر الإنترنت IconFinder و Freepik و PSDGraphics وغيرها)

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

ما هو الرمز المفضل؟

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

فوائد استخدام المفضلة

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

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

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

ميزات Yandex التي تعمل مع الرموز المفضلة

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

في السابق، كانت تحديثات الأيقونة المفضلة تتم مرة كل شهرين. الآن، في عام 2018، تقوم Yandex بفهرستها بقوة أكبر وفي بعض مواقعي الجديدة يظهر الرمز المفضل في غضون أيام قليلة.

للتحقق مما إذا كان Yandex يعرض رمزًا مفضلاً، يمكنك العثور على بوابتك الإلكترونية في قائمة البحث ومعرفة ما إذا كان الرمز مرئيًا على يساره. يمكنك أيضًا إدخال البنية التالية في شريط العناوين: بالنسبة إلى Yandex - http://favicon.yandex.net/favicon/www.site.ru (حيث تحتاج بدلاً من www.site.ru إلى كتابة مجال موقعك ). سيتم عرض Favicon الذي تم إنشاؤه بشكل صحيح على خلفية سوداء، وهذا يعني أن Yandex يراه.

إذا لم يكن الرمز المفضل مرئيًا، فقد يرجع ذلك إلى الأسباب التالية:

  • حجم الصورة لا يتوافق مع الحجم المطلوب: 16x16 بكسل؛
  • تنسيق الصورة ليس هو نفسه - يجب أن يكون ico أو jpeg أو png (الخيار الأول هو الأفضل لـ Yandex)؛
  • الصورة ضبابية أو غير فريدة - في بعض الأحيان لهذه الأسباب يقوم محرك البحث بحظر الرموز؛
  • يقوم Yandex بتحديث النظام - وبعد مرور بعض الوقت يجب أن يصحح كل شيء نفسه؛
  • يقع الموقع أبعد من الموضع المائة في نتائج البحث - وفي هذه الحالة، قد لا يتم عرض الرمز المفضل أيضًا.

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

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

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

إذا كنت تريد إنشاء ملف ico من صورة كبيرة بتنسيق، على سبيل المثال، png، فسيكون من الجيد تثبيت Adobe Photoshop أولاً. ثم يتم تثبيت البرنامج الإضافي ICO لبرنامج Photoshop (ابحث عن البرنامج الإضافي لإصدار FS الخاص بك في محرك البحث). عند تثبيته، نقوم بنسخ الملف المطلوب ICOFormat.8bi (لـ 32 بت) أو ICOFormat64.8bi (لـ 64 بت) إلى أحد المسارات التالية:

C:\Program Files\Adobe\Adobe Photoshop CS6 (64 بت)\Plug-ins\تنسيقات الملفات
C:\ملفات البرنامج (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\تنسيقات الملفات

إذا لم يكن هناك مجلد "Plug-ins" أو "File Formats"، فأنت بحاجة إلى إنشائه. الآن في مربع حوار الحفظ، يمكنك تحديد تنسيق ico. يمكن أن تكون أحجام الرموز التي تم إنشاؤها مضاعفات 8 (16×16، 24×24، 32×32، وما إلى ذلك، ولكن من الأكثر موثوقية اختيار 16×16).

يتم بعد ذلك فتح الصورة التي ستصبح الأيقونة المفضلة في Photoshop. انقر فوق "الصورة - حجم الصورة" ويتغير حجم الصورة إلى 16 × 16 بكسل. ثم اضغط على "ملف - حفظ باسم" وحدد تنسيق ICO (يجب أن يكون اسم الملف favicon.ico).

لقد قمت مؤخرًا بتحويل الصور إلى تنسيق ico بدون Photoshop. استخدام الخدمة https://realfavicongenerator.net/.

< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

< link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ >

بعد مرور بعض الوقت، سيظهر الرمز المفضل على الموقع.

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

ياندكس يخيف المهوسون المفضلة

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

خدمات

هناك أيضًا برامج وموارد خاصة لإنشاء الرموز، من بينها ما يلي شائعًا:

  • favicon.cc - سيسمح لك أبسط محرر بإنشاء صورة بسيطة، ومبدأ التشغيل يشبه إلى حد ما الرسام. يتم أيضًا تحديد الألوان، ويتم الرسم من خلال النقر على مربعات البكسل التي تحتاج إلى الطلاء فوقها. هناك أداة الإصلاح. يمكن أيضًا حفظ الصورة التي تم إنشاؤها على جهاز الكمبيوتر الخاص بك كصورة مفضلة منتهية. أثناء عملك، يمكنك رؤية النتيجة الأولية في الجزء السفلي من الشاشة بالشكل الذي سيتم عرضها به في المتصفح. يقدم المورد أيضًا مجموعة كبيرة من الرموز الجاهزة؛
  • favicon.ru – من الأفضل هنا إنشاء أيقونات مفضلة من الصور الجاهزة. يتم تنزيل الصورة من الكمبيوتر، ومعالجتها بواسطة النظام وتحويلها إلى ملف favicon.ico، والذي يمكن بعد ذلك تنزيله؛
  • Iconj وaudit4web هما قاعدتا بيانات يمكنك من خلالهما العثور على الرموز المفضلة الجاهزة.

هناك أيضًا مثل هذه الخدمة:

يمكنك اللجوء إلى المصمم لتطوير الصورة، ولكن هذا سيكلف أكثر بكثير.

نقطة أخرى هي أن الصورة الخاصة بالأيقونة لا يمكن أن تكون متحركة، فهي دائمًا ثابتة، حتى لو تم استخدام صورة ذات تأثيرات غير ثابتة كأساس.

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

بشكل عام، يجب أن يحتوي كل موقع ويب على هذه الصورة الصغيرة.

كيفية إنشاء favicon.ico لموقع على شبكة الإنترنت

لذا، سأحاول الآن أن أخبرك أين وماذا وكيف تصنع الأيقونة المفضلة. لكن عليك أولاً أن تعرف الحجم الذي يجب أن يكون عليه الرمز المفضل للموقع؟

الرمز المفضلهي صورة بتنسيقات ICO وJPEG وPNG وBMP وGIF، والتي يمكن أن يكون لها أحجام مختلفة، بدءًا من 16 × 16 بكسل. يجب تحميل رمز بهذا الحجم بالضبط على الموقع لفهرسته بواسطة روبوت Yandex.

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

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

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

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

خدمات إنشاء الأيقونة المفضلة عبر الإنترنت - إنشاء أيقونة مفضلة عبر الإنترنت

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

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

مولدات المفضلة البسيطة

في البداية، هناك العديد من المواقع التي يمكنك من خلالها بسهولة إنشاء أيقونة للموقع من خلال تحويل أي صورة إلى ملف favicon.ico، دون إمكانية التعديل.

ربما تكون www.favicongenerator.com هي الخدمة الأكثر بساطة. لا شيء إضافي - حدد صورة، وانقر فوق "إنشاء رمز مفضل!" " وقم بتنزيل الرمز الذي تم إنشاؤه.

Tools.dynamicdrive.com/favicon- خدمة بسيطة ومفهومة حيث يمكنك إنشاء أيقونة مفضلة بثلاثة أحجام. لتنزيل الملفات المستلمة، تحتاج إلى النقر فوق الزر "Download FavIcon" الموجود أسفلها.

www.cy-pr.com/tools/favicon و www.favicon.co.uk هي خدمات مشابهة للخدمة السابقة. في الأول، يمكنك جعل حجم الأيقونة المفضلة 16x16 و32x32، وفي الثانية، بالإضافة إلى 48x48 و64x64.

www.genfavicon.com - تتضمن العملية الكاملة لإنشاء الأيقونة ثلاث خطوات:

  1. حدد ملفًا (JPEG، GIF، PNG) على جهاز الكمبيوتر الخاص بك أو ببساطة أدخل عنوان URL للصورة وانقر فوق " تحميل الصور“;
  2. حدد الحجم (16×16، 32×32، 48×48، 64×64 أو 128×128) والمساحة المطلوبة من الصورة إذا كنت تريد إنشاء جزء فقط من الصورة بالنقر فوق “ التقاط وصورة“;
  3. نحن ننظر إلى النتيجة، وإذا كان كل شيء مرضيا، فقم بتنزيل الملف.

إنشاء رمز مفضل متحرك لموقع ويب باستخدام المولدات عبر الإنترنت

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

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

www.favicon.com.mx - خدمة مطابقة تمامًا للخدمة السابقة، باللغة الإنجليزية فقط.

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

antifavicon.com - هذه الخدمة، لسبب ما مع البادئة anti، مثيرة للاهتمام لأنها تسمح لك بإنشاء ملف favicon.ico بنفسك، ولكن ليس كصورة، ولكن كنص على خلفية ملونة. كل ما عليك فعله هو إدخال الحروف المناسبة واختيار الألوان. بالمناسبة، لقد صنعت رمزي المفضل هنا. اعتقدت أنني سأغيره لاحقًا، لكنني الآن معتاد على ذلك.

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

favicon.ru هو منشئ روسي شهير عبر الإنترنت حيث يمكنك إنشاء أيقونات مفضلة من الصور ورسمها. يمكنك أيضًا طلب إنشاء الأيقونة المفضلة من المتخصصين مقابل 20 دولارًا. وأتساءل عما إذا كان أي شخص يضع أوامر هناك؟

www.favicon.cc هو مولد مشهور آخر، مشابه للمولد السابق. من بين الميزات المثيرة للاهتمام في هذه الخدمة أنه يمكنك إنشاء رسوم متحركة إطارًا تلو الآخر لمدة تصل إلى 20 ثانية.

يمكنك رؤية الأيقونة المفضلة المتحركة وتنزيلها في نافذة المعاينة.

www.degraeve.com/favicon - منشئ مفضلات آخر عبر الإنترنت. يتيح لك هذا المحرر، مثل المحررات السابقة، إنشاء خلفية أيقونات شفافة.

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

ومع ذلك، قمت بحفظ منشئ أيقونات آخر عبر الإنترنت للموقع لاستخدامه لاحقًا. تستحق هذه الخدمة منشورًا منفصلاً، حيث سأخبرك بكيفية إنشاء أيقونة مفضلة لمتصفحات iPhone و iPod Touch و iPad وسأتناول المزيد من التفاصيل حول تثبيت الرموز المتحركة على الموقع. بالإضافة إلى ذلك، سأقدم لك خدمة Favicon Validator، حيث يمكنك فحص ورؤية جميع أيقونات favicon.ico إذا كان هذا الملف يحتوي على أكثر من صورة.. وداعًا للجميع!

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

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

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


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

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


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

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

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

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

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

    • يمكنك اختيار حجم الرمز من 16×16، 32×32، 48×48 و64×64.
    • كل شيء باللغة الإنجليزية.

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

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

والآن، كما وعدناكم، أفضل 5 خدمات مريحة وعالية الجودة في رأيي.

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

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

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

بأي تنسيق يجب أن أحفظ الرمز المفضل؟

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

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

كيف يمكن التأكد من ذلك رمز المفضلةهل ستعمل؟ يجب استيفاء 4 شروط.

  • يجب أن يسمى الملف - رمز المفضلة.
  • حجم الأيقونة المفضلة 16 على 16 بكسل
  • المكان الأمثل للرمز المفضل هو المجلد الجذر للموقع.
  • اكتب عنوان الأيقونة في العلامات الوصفية com.hederفي فهرس الموقع.

في تعبير HTML يبدو كما يلي:

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

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

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

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

إنشاء ملف بالحجم 16 X 16 بكسل . سنقوم بإنشاء شفافة بسيطة جدا رمز المفضلةعلى شكل حرف مع قليل من العمق. سيتم إنشاء العمق من خلال الظل والتدرج.

رسم الخلفية

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

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

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