آموزش تغییر و ساخت favicon

favicon چیست؟

اگر دقت کرده باشید ، هر سایتی رو که باز می کنید گوشه تب اون سایت یک آیکون کوچک هستش که به عنوان favicon سایت یا وبلاگ می شناسنش مثل شکل زیر.

فرمت و سایز  favicon

معمولا فرمت favicon ها ico هستش اما می شود از فرمت های دیگر مثل png و بقیه هم استفاده کرد اما توصیه بر اینه که از ico استفاده کنید و اکثر سایت ها و خوده ماهم همین کار رو می کنیم.در مورد سایز هم بیشتر ۱۶ * ۱۶ پیکسل سایز استاندارد هستش.

ساخت آنلاین favicon

شاید براتون سوال باشه که با چه برنامه ای باید درستش کرد ؟! اکثرا با فتوشاپ امتحان می کنند اما فتوشاپ فرمت ico رو ساپورت نمی کنه.برنامه های زیادی وجود داره اما راحت ترین راه استفاده از سایت های آنلاین ساخت favicon هستش بدون درده سر می تونید از امکاناتش استفاده کنید و مثلا عکس خودتونو تو اون سایت آپلود کنید یا متن دلخواه … سایز رو هم انتخاب کنید و بعد آماده دانلود کنید.

من خودم سایت زیر رو پیشنهاد می کنم برای ساخت آنلاین ، سایت ساده ای هستش اما خوبه.

www.favicon-generator.org

کد قرار دادن favicon

باید کدهای زیر رو قبل از <head/> داخل سایت خودتون قرار بدید.


<link rel="shortcut icon" type="image/x-icon" href=".../myicon.ico" />

دقت کنید که کد بالا برای favicon ها با فرمت ico هستش اما اگر فرمت دیگه ای دارید مثل png باید از کد زیر استفاده کنید (اما ما همچنان ico رو توصیه می کنیم !! )

همینطور در کد بالا و این پایینی باید بجای myicon.ico/… باید آدرس جایی که آپلود کردین رو بدید.

<link rel="icon" type="image/png" href=".../myicon.png" />

دانلود favicon آماده

سایت هایی زیادی هستند که مجموعه با موضوعات مختلفی برای دانلود دارند من هم یکی از اون سایت ها که خوب هستش و بدون عضویت و رایگان می تونید با هر موضوعی که دوست داشتید با فرمت ico دانلود کنید.سایت زیر رو توصیه می کنم ،ساده اما خوب هستش.

www.freefavicon.com

از منو بالا موضوع مورد نظر خودتونو انتخاب کنید مثل  Business , Network , Software , … .

تغییر favicon وردپرس

خوب خودتون استاد من هستید !! باید فایل header.php قالب وردپرس خودتونو ویرایش کنید و کد بالا را قرار بدید یا اگر فاوآیکونی هستش ، آدرس اونو عوض کنید.

امتیاز شما برای این مقاله
24 نظرات
  1. فناوری می گوید

    محمد هستم، ممنونم خیلی خیلی خیلی این نیازبود مرسی بازم تشکر

  2. احمد می گوید

    سلام
    ازسایت خوبتون بی نهایت سپاسگذارم
    به یه مشکل جالب برخورده بودم قبلا ولی زیاد مهم نبود، حالا که وقت کردم میپرسم، من favicon رو تغییردادم، در فایرفاکس درسته ولی در مکستون و اینترنت اکسپلورر همون ایکون اصلی قالب که قبلا بوده رونشون میده. کش بروزرها و هیستوری و… رو پاک کردم بازم این مشکل پابرجاست. ممنون میشم راهنمایی بفرمایید.

    1. آرش حیدری می گوید

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

  3. کارآفرین می گوید

    مرسی، با اینکه ساده بود بهم کمک زیادی کرد!

  4. aida می گوید

    سلام چه طوری باسد تو وبم بزارمش

  5. autoch.ir می گوید

    سلام
    میشه لطف کنید توضیح بدید که چطور میشه کنار عکس FAVICON یک نوشته هم داشت
    مثل سایت شما که نوشته دکتر وردپرس آموزش تغییر و ساخت FAVICON
    ممنون

  6. سایت تفریحی می گوید

    سلام ممنون عالی ومفیدبود

  7. علی می گوید

    دمت گرم آقا آرش!
    خیلی این کاره ای !
    لایک!

  8. مهدی می گوید

    دکی دمت گرم

    1. نازنین می گوید

      خب نمیشه من امتحان کردم نشد به منم بگید

  9. روژا می گوید

    سلام خسته نباشید بیزحمت می تونید یکم واضحتر توضیح بدید برای ساخت آخه من هر کار می کنم نمیتونم چطور درست کنم

  10. علی رضا علی می گوید

    دمت گرم داداش!

  11. کوتاه کننده لینک می گوید

    مرسی مفید بود

  12. آرش می گوید

    سلام
    ممنونم ، سایت بسیار خوبی دارید

    1. آرش حیدری می گوید

      خواهش می کنم ، امیدوارم مطالب کاربردی باشند
      موفق باشید

  13. یکـ مهندص باصـواد! می گوید

    متشکرم استفاده کردم!

  14. سهیل می گوید

    سلام آرش جان
    نمیشه فوآیکن متحرک قرار داد؟؟؟

    1. آرش حیدری می گوید

      سلام ، من که راستش ندیدم !

  15. admiral می گوید

    سلام و خسته نباشید
    آقا هرکاری گفتید رو به همون شکل انجام دادم ولی باز هم هیچی ! هیچ اتفاقی نمی افته ! همون برگه سفید باز جاش میاد . اگه میشه راهنمایی کنید .

    1. آرش حیدری می گوید

      سلام خواهش می کنم
      اگر درست انجام دادین ، شاید تو کش مرورگرتون ذخیره شده اون تصویر سفید ، با یک مرورگر دیگه هم امتحان کنید …

  16. نسرين می گوید

    سلام آقاي حيدري خسته نباشيد favicon تو enternet explorer نشون داده نمي شه ولي تو firefox نشون داده مي شه

    1. آرش حیدری می گوید

      سلام ، خیلی ممنون
      با توجه به دیدگاه قبلی در رابطه با اسلاید شو عرض کرده بودید فکر کنم مرورگرتون مشکل داره ، چون favicon تو همه ی مرورگر ها نشون داده میشه .

  17. ariya می گوید

    سلام و خسته نباشید
    من تازه شروع کردم که html php css رو یاد یگیرم و چند وقتی بود که دنبال همین favicon بودم ولی اسمشو نمی دونستم چیه.
    تا این که بی صورت اتفاقی اینو دیدم خیلی خوب بود.
    بعد یه سوالی برام پیش اومد این که چطور میتونم favicon های مختلف برای لینک های مختلف یک سایت تعریف کنم
    مثلاً : واسه Home یه favicon و لینک Contact to us یه favicon دیگه. ممنون از سایت خوبتون

    1. آرش حیدری می گوید

      دوست عزیز فکر کنم اگر سایت استاتیک دارید یعنی همون html این کار امکان پذیر باشه که بیاید در تگ head هر صفحه favicon محتلف قرار بدید اما اگر از سیستم هایی مثل وردپرس استفاده می کنید که از صفحه header.php مشترک در تمام صفخات استفاده میه ، فکر نکنم این کار امکان پذیر باشه.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.