تقریبا در هر سایت مدرن در اینترنت یک نماد مخصوص نمایش داده شده در برگه مرورگر پس از اینکه منابع به طور کامل بارگذاری شد وجود دارد. این تصویر توسط هر مالک به طور مستقل ساخته و نصب می شود، هرچند که اجباری نیست. به عنوان بخشی از این مقاله، ما گزینه های نصب Favicon را در سایت های ایجاد شده توسط ابزارهای مختلف مورد بحث قرار خواهیم داد.

اضافه کردن Favicon به سایت

برای اضافه کردن این نوع آیکون به سایت، باید یک تصویر مناسب از شکل مربع برای شروع ایجاد کنید. برای مثال می توان این کار را با استفاده از برنامه های گرافیکی خاص انجام داد فتوشاپ ، و با استفاده از برخی خدمات آنلاین. علاوه بر این، مطلوب است آیکون آماده شده را قبل از فرمت ICO تبدیل کند و آن را به اندازه 512 × 512 پیکسل کاهش دهد.

توجه: بدون اضافه کردن یک تصویر سفارشی، نماد سند در برگه نمایش داده می شود.

همچنین ببینید:
خدمات آنلاین برای ایجاد فاویکون
چگونه یک تصویر را در قالب ICO ایجاد کنیم

گزینه 1: به صورت دستی اضافه کنید

این گزینه اضافه کردن آیکون به سایت برای شما مناسب خواهد بود اگر از یک پلتفرم استفاده نکنید که ابزارهای خاصی را ارائه می دهد.

روش 1: دانلود Favicon

ساده ترین روش، به معنای واقعی کلمه هر مرورگر اینترنت مدرن، افزودن یک تصویر قبلا ایجاد شده به دایرکتوری ریشه سایت شما است. این را می توان از طریق رابط وب یا هر مدیر FTP راحت انجام داد.

آیکون های نمونه برای این سایت در قالب ico

گاهی اوقات پوشه دلخواه می تواند با توجه به تنظیمات خود، نام "public_html" یا هر نوع دیگر را داشته باشد.

یک نمونه از قرار دادن آیکون سایت مناسب است

کارایی روش به طور مستقیم بستگی دارد نه فقط به قالب و اندازه، بلکه همچنین بر روی نام فایل درست است.

روش 2: ویرایش کد

گاهی اوقات ممکن است فقط برای اضافه کردن Favicon به دایرکتوری ریشه سایت به اندازه کافی به اندازه کافی باشد که پس از دانلود کامل بر روی تب از مرورگرها نمایش داده شود. در این وضعیت، شما باید فایل اصلی را با نشانه گذاری صفحه ویرایش کنید، با افزودن یک کد خاص به آن شروع کنید.

  1. خط زیر را بین برچسب های "HEAD" اضافه کنید، جایی که "* / favicon.ico" باید با URL تصویر خود جایگزین شود.

  2. یک مثال از اضافه کردن ICO آیکون به کد سایت

  3. بهترین استفاده از یک لینک مطلوب با پیشوند به جای نسبی است.
  4. کد با لینک مطلق به آیکون سایت

  5. در برخی موارد، مقدار "rel" را می توان به "آیکون میانبر" تغییر داد، در نتیجه افزایش سازگاری با مرورگرهای وب.
  6. مقدار rel را در لینک به نماد سایت تغییر دهید

  7. با توجه به فرمت تصویر مورد استفاده، مقدار "type" نیز می تواند شما را تغییر دهد.

    نکته: فرمت ICO محبوب ترین است.

    • ICO - "image / x-icon" یا "image / vnd.microsoft.icon" ؛
    • یک مثال از اضافه کردن ICO آیکون به سایت

    • PNG - "image / png" ؛
    • کد نمونه برای اضافه کردن آیکن های PNG به سایت

    • GIF - "image / gif" .
    • کد نمونه برای اضافه کردن آیکون GIF به سایت

  8. اگر منابع شما به طور عمده در آخرین مرورگرها هدف قرار گیرد، رشته را می توان کوتاه کرد.

  9. مثال از کد ساده برای اضافه کردن یک نماد

  10. برای دستیابی به بزرگترین سازگاری، می توانید چندین بار را با لینک به سایت فاویکون اضافه کنید.
  11. با استفاده از چند خط کد برای نماد

  12. تصویر نصب شده در تمام صفحات سایت نمایش داده می شود، اما می توان آن را با افزودن کد قبلا ذکر شده در جداول جداگانه تغییر داد.
  13. یک مثال از نماد در تب در مرورگر

در هر دو روش، زمان زیادی برای نمایش در برگه مرورگر وجود دارد.

گزینه 2: ابزار وردپرس

هنگام کار با وردپرس، می توانید با اضافه کردن کد بالا به فایل "header.php" یا استفاده از ابزارهای ویژه، از گزینه قبلی قبلا توضیح دهید. با تشکر از این، آیکون بدون در نظر گرفتن مرورگر تضمین خواهد شد که در زبانه سایت ارائه شود.

روش 1: کنترل پنل

  1. از منوی اصلی، لیست "ظاهر" را گسترش دهید و بخش "سفارشی سازی" را انتخاب کنید.
  2. به بخش سفارشی در پانل وردپرس بروید

  3. در صفحه ای که باز می شود، شما باید از دکمه "Properties Site" استفاده کنید .
  4. به ویژگی های سایت در پنل وردپرس بروید

  5. از بخش "تنظیمات" به قسمت پایین و در قسمت "Icon Site" حرکت کنید ، روی دکمه "انتخاب تصویر" کلیک کنید. در این مورد، تصویر باید دارای رزولوشن 512 × 512 پیکسل باشد.
  6. برای دانلود آیکون ها در پانل وردپرس بروید

  7. از طریق پنجره "انتخاب تصویر" تصویر دلخواه را به گالری آپلود کنید یا یک مورد قبلا اضافه شده را انتخاب کنید.
  8. آیکون های روند را برای سایت وردپرس دانلود کنید

  9. پس از آن شما به «ویژگی های سایت» بازگردانید و تصویر انتخاب شده در بلوک «آیکون» ظاهر می شود. در اینجا شما می توانید مثال را ببینید، برای ویرایش آن بروید یا اگر لازم باشد آن را حذف کنید.
  10. یک آرم وردپرس را با موفقیت نصب کردید

  11. پس از تنظیم اقدام دلخواه از طریق منوی مربوطه، روی دکمه "ذخیره" یا "انتشار" کلیک کنید.
  12. صرفه جویی در خواص سایت در وردپرس

  13. برای دیدن آرم در برگه هر صفحه ای از سایت خود، از جمله "کنترل پنل" ، آن را بارگیری کنید.
  14. یک آرم برای یک سایت وردپرس به صورت موفقیتآمیز نصب شده است

روش 2: همه در یک فاویکون

  1. در سایت "کنترل پنل" ، "Plugins" را انتخاب کنید و به صفحه "اضافه کردن جدید" بروید .
  2. به قسمت Plugins در پانل وردپرس بروید

  3. فیلد جستجو را مطابق با نام پلاگین مورد نیاز خود قرار دهید - همه در یک فاویکون - و در بلوک با پسوند مناسب، بر روی دکمه "نصب" کلیک کنید.

    پلاگین جستجو برای نصب آیکون در وردپرس

    فرآیند اضافه کردن، زمان زیادی خواهد برد.

  4. نصب افزونه در وردپرس

  5. حالا شما باید بر روی دکمه "فعال" کلیک کنید.
  6. فعال سازی پلاگین وردپرس

  7. پس از تغییر مسیر خودکار، شما باید به قسمت تنظیمات بروید. این را می توان از طریق "تنظیمات" ، با انتخاب "همه در یک فاویکون" از لیست و یا با استفاده از لینک "تنظیمات" در صفحه "پلاگین" در بلوک با پسوند مورد نیاز انجام می شود.
  8. تغییر تنظیمات پلاگین در WordPress

  9. در بخش با پارامترهای افزونه، یک آیکون را به یکی از خطوط ارائه شده اضافه کنید. این باید هر دو در "تنظیمات جلو" و در "تنظیمات Backend" تکرار شود .
  10. آیکون تنظیم ظاهر پیش فرض به وردپرس

  11. هنگامی که تصویر اضافه می شود، دکمه Save Changes را کلیک کنید.
  12. آپلود آیکن Set Backend به وردپرس

  13. پس از اتمام به روز رسانی صفحه، یک لینک منحصر به فرد به تصویر اختصاص داده می شود و در برگه مرورگر نمایش داده می شود.
  14. آیکون برای سایت وردپرس نصب شده است

این گزینه ساده تر برای پیاده سازی است. ما امیدواریم که شما موفق به نصب Favicon در سایت از طریق پانل کنترل وردپرس شوید.

نتیجه گیری

انتخاب نحوه افزودن آیکون تنها به ترجیحات خود بستگی دارد، زیرا در تمام گزینه ها می توانید نتیجه دلخواه را به دست آورید. در صورت بروز مشكلات، اقدامات انجام شده را دوباره انجام دهيد و از نظر مربوطه در نظرات بپرسيد.