Категории

    Новости

    Тонгкат Али
    http://silverfox.in.ua/product-tag/tongkat-ali/ (англ. Long Jack, Tongkat Ali) – это средство, в основном используемое спортсменами для повышения уровня тестостерона и серьезных силовых нагрузках. Но

    Иван Айвазовский
      этой (Ованес Айвазян, Иван Гайвазовский, Aivazovsky, Ivan. 1817-1900), –   русский живописец, мастер морского пейзажа (маринист). Популярнейшие картины Айвазовского - “Радуга” (1873 г. ), “Чёрное

    Изменение фона в шаблоне Joomla
    6. Сейчас колдуем с CSS так, чтоб было похоже на данный макет. Поехали: Я заключил меню в блочный элемент levoe-menu: Таким макаром, Joomla генерирует последующий код: Основная Сырье Аддитивы Диоксид

    Как быстро перенести сайт на Joomla Часть 2 Восстановление из резервной копии
    Как запустить цикл? У меня на данный момент выводит одну и туже картину либо просто "i" $q ="SELECT vm.`file_url_thumb` FROM `#__virtuemart_medias` vm LEFT JOIN `#__virtuemart_product_medias` vpm ON vpm.`virtuemart_media_id`

    Анализ сайта яндекс
    Продвижение веб-сайта в ТОП Yandex'а и Google (других поисковых машин) - главная цель для хоть какого вебмастера либо оптимизатора. В попытке закрепить собственный ресурс на фаворитных позициях выдачи

    Материнские платы на 2 процессора
    Для тех у кого нет времени, чтоб прочесть всю статью, я сразу даю рекомендуемые модели материнских плат под различные микропроцессоры. На сей день оптимальными по соотношению стоимость/качество являются

    Обозначение смайликов в картинках
    Здрасти, читатели блога Веб-сайт с нуля. Доводилось ли вам думать над тем, что означают смайлы, которые вам прислали, и как на их ответить? Сталкивались ли с необходимостью выразить свои эмоции очень

    Форд мондео ремонт
    На Форд Мондео ремонт силовых агрегатов случается довольно изредка, так как моторы южноамериканского производителя обычно надежны и долговечны. Особенного внимания стоит 2, 5л бензиновый вариант, снаряженный

    Процессоры intel socket 775
    Сокет (socket) микропроцессора - разъем, место на материнской плате компьютера куда вставляется микропроцессор. Микропроцессор, до того как он будет установлен в материнскую плату, должен подходить ей

Полезные материалы

كيفية إنشاء فافيكون للموقع: نصائح وخدمات مفيدة | أخبر الويب

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

كيفية إنشاء فافيكون للموقع: نصائح وخدمات مفيدة

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

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

كيفية إنشاء فافيكون

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

بصفتها المفضلة ، تستخدم هذه المواقع أيقوناتها (أو الصور القريبة منها) بصفتها المفضلة ، تستخدم هذه المواقع أيقوناتها (أو الصور القريبة منها).

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

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

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

لتجنب ذلك ، تحتاج إلى تغيير حجم الشعار باستخدام برامج تحرير خاصة مثل Photoshop أو GIMP
لتجنب ذلك ، تحتاج إلى تغيير حجم الشعار باستخدام برامج تحرير خاصة مثل 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 واحد في المخرجات
عن طريق تحميل صور 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 أو طرح سؤال ، أنا في انتظارك في التعليقات!