Favicon چیست؟ نحوه ایجاد و ساخت فاوآیکون

به احتمال زیاد لوگوی کنار تب مرورگر نظر شما را هم جلب کرده است. چیزی که درباره آن صحبت می‌کنیم در تصویر زیر قابل مشاهده می‌باشد.

در تصویر بالا در تب مرورگر یک لوگوی کوچک از گوگل را مشاهده می‌کنید، که به آن Favicon یا فاوآیکون گفته می‌شود. یا اینکه یک نمونۀ دیگر از آن که مربوط به سایت portal.ir است را در ادامه می‌بینید:

چرا باید از Favicon استفاده کنیم؟

استفاده و فایده اصلی استفاده از Favicon برای زیبایی وب سایت و همچنین شناخته شدن وب سایت شما در کنار تب های زیادی می‌باشد که در مرورگر باز خواهد بود. فرض کنید 20 تب در مرورگر شما باز باشد؛ در صورتی که از Favicon استفاده کنید، وب سایت شما ساده تر قابل شناسایی می‌باشد. چون تشخیص یک لوگو نسبت به نوشته، هم راحت‌تر است، هم بهتر در ذهن می‌ماند.

نحوه ساخت Favicon چگونه است؟

برای اضافه شدن لوگوی مورد نظر سایت‌تان، باید فرمت آیکون، ico، یا png را ایجاد کنیم. ابعاد این آیکون را باید روی 16*16 یا 32*32 یا 64*64 پیکسل تنظیم کنید. در صورتی که آیکون مورد نظر خود را در ابعادی که گفتیم، در نظر بگیرید، مرورگر در کنار نام وب سایت این آیکون را نشان می‌دهد.

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

در مرورگر های نسخه قدیم و همچنین Internet Explorer برای به نمایش درآوردن Favicon باید کد مربوط به آن در صفحه مورد نظر قرار گیرد. این کد چیست؟

"کد زیر باید در قسمت Head وب سایت قرار گیرد"

نمونه کد تنظیم Favicon با فرمت ico: 

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

نمونه کد تنظیم Favicon با فرمت png:

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

آموزش تنظیم Favicon در سایت ساز پرتال

در سایت ساز پرتال امکان تغییر فاوآیکون ساده می‌باشد. در ابتدا فرمت لوگوی خود را با استفاده از نرم افزارهای آنلاین به ico تبدیل کنید. سپس با باز کردن سایت خود، در پنل مدیریت روی تنظیمات وب‌سایت کلیک کنید. یکی از گزینه‌های این تنظیمات مربوط به ساخت فاوآیکون می‌باشد. فضای آن را در تصویر زیر می‌بینید. برای مشاهده تغییرات کش مرورگر خود را حذف نمایید.

همانند تصویر بالا در پنل کاربری بر روی گزینۀ "انتخاب فایل" کلیک کرده و فایل لوگوی تبدیل شده با اسم favicon.ico را آپلود کنید. به این نکته توجه کنید که برای مشاهده تغییرات باید کش مرورگر را حذف کنیم.

مراحل ساخت فاوآیکون، به همین سادگی بود! این را هم اضافه کنیم که کار با سایر بخش‌های سایت‌ساز/ فروشگاه‌ساز پرتال نیز به همین راحتی که گفتیم، می‌باشد.