مولد فاوآیکون
متن، ایموجی یا لوگو را به یک favicon.ico واقعی به‌همراه تمام اندازه‌های PNG موردنیاز سایتتان تبدیل کنید.
کد HTML برای قرار دادن در <head>
دربارهٔ این ابزار
این تولیدکنندهٔ فاوآیکون چه کاری انجام می‌دهد
این ابزار آیکون کوچکی را می‌سازد که در زبانه مرورگر، نوار نشانک‌ها و میان‌بر صفحه اصلی نمایش داده می‌شود — از متن تایپ‌شده یا حروف اول، یک ایموجی یا تصویر آپلودشده — و یک فایل واقعی و قابل‌استفاده favicon.ico (نه فقط یک PNG تغییرنام‌یافته)، به‌علاوه فایل‌های PNG جداگانه در هر اندازه‌ای که واقعاً نیاز دارید و تگ‌های دقیق HTML برای چسباندن در <head> سایتتان.
مناسب چه کسانی است
برای هرکسی که سایت یا وب‌اپلیکیشن جدیدی راه‌اندازی می‌کند و به فاوآیکون سریع نیاز دارد، بدون اینکه مجبور باشد ابزار طراحی را باز کند — از یک آیکون سریع با حرف اول متن و رنگ برندتان، ایموجی به‌عنوان نماد لوگو، یا تصویر لوگوی فعلی‌تان که به‌درستی تغییر اندازه داده و بسته‌بندی شده است.
نحوهٔ استفاده
- یک حالت را انتخاب کنید: متن (۱ تا ۳ حرف، یک فونت، شکل و رنگ انتخاب کنید)، ایموجی (یک ایموجی را تایپ کنید یا از ایموجی‌های آماده انتخاب کنید)، یا تصویر (یک لوگو یا عکس بارگذاری کنید — تصویر به‌صورت خودکار از مرکز، به شکل مربع برش می‌خورد).
- پیش‌نمایش زنده را در اندازه‌های واقعی مورد استفاده مرورگرها ببینید: 16×16، 32×32، 48×48 و 180×180 برای آیکون‌های لمسی اپل.
- دانلود نسخهٔ واقعی در اندازه‌های مختلف
favicon.ico(که نسخه‌های 16، 32 و 48 پیکسلی را طبق انتظار مرورگرها در یک فایل دارد) ارائه می‌دهد؛ یا فایل‌های PNG جداگانه را در اندازه‌های 32×32، 180×180 یا اندازه بزرگ 512×512 برای آیکون‌های اپلیکیشن دریافت کنید. - قطعه‌کد آمادهٔ HTML را کپی کنید و در کنار فایل‌های دانلودشده، داخل <head> سایتتان قرار دهید.
موارد استفاده در دنیای واقعی
- راه‌اندازی یک سایت یا صفحهٔ فرود جدید که فقط پیش از انتشار، به یک آیکون تب سریع و حرفه‌ای نیاز دارد.
- نمونه‌سازی یا ابزارهای داخلی جایی که یک فاویکون متنی بر پایه حرف اول (مثلاً یک مربع رنگی با نخستین حرف نام پروژه) سریع‌تر از سفارش طراحی لوگو است.
- تبدیل یک لوگوی موجود به مجموعهٔ استاندارد فاویکون، با تغییر اندازه صحیح و بسته‌بندی به‌صورت یک فایل .ico به‌همراه اندازه آیکون Apple Touch، به‌جای اینکه فقط یک PNG بزرگ آپلود کنید و امیدوار باشید مرورگرها آن را به‌خوبی تغییر اندازه دهند.
- پروژه‌های شخصی سرگرم‌کننده جایی که یک فاویکون ایموجی (موشک یا لامپ) بدون نیاز به هیچ طراحی خاصی، به سایت شخصیت می‌دهد.
سؤالات متداول
تفاوت favicon.ico واقعی با تغییر نام یک فایل PNG به .ico چیست؟
یک فایل .ico استاندارد، محفظه‌ای است که می‌تواند چند اندازهٔ تصویر را در یک فایل نگه دارد؛ بنابراین مرورگر برای زبانه، نشانک یا میان‌بر، مناسب‌ترین اندازه را انتخاب می‌کند. تغییر نام یک فایل PNG به .ico فقط همان یک اندازه را در اختیار شما می‌گذارد و ممکن است در برخی مرورگرها تصویر تار یا نادرست نمایش داده شود. این ابزار یک فایل ICO واقعی و چنداندازه تولید می‌کند که نسخه‌های 16، 32 و 48px را در کنار هم دارد.
آیا به همهٔ اندازه‌های مختلف نیاز دارم یا یکی کافی است؟
بخش‌های مختلف به اندازه‌های متفاوتی نیاز دارند: زبانه‌های مرورگر معمولاً از 16×16 یا 32×32 استفاده می‌کنند، میان‌برهای صفحهٔ اصلی iOS به 180×180 نیاز دارند و برخی تنظیمات Android/PWA اندازهٔ 512×512 را می‌خواهند. ارائهٔ اندازه‌های مناسب مانع می‌شود مرورگرها تصویر نامتناسب را بکشند یا کوچک کنند و در نتیجه، تصویر نرم و بی‌کیفیت به نظر برسد.
فایل‌های تولیدشده را کجا بارگذاری کنم؟
قرار دادن favicon.ico در پوشهٔ ریشهٔ سایتتان (بیشتر مرورگرها بررسی می‌کنند /favicon.ico به‌صورت خودکار) و فایل‌های PNG را در هر مسیری که HTML شما به آن‌ها ارجاع می‌دهد قرار دهید، سپس تگ‌های <link> ارائه‌شده را در <head> صفحه‌تان بچسبانید.
آیا می‌توانم از یک ایموجی به‌عنوان فاوآیکون استفاده کنم؟
بله — هر ایموجی را تایپ یا لمس کنید تا مستقیماً روی بوم آیکون نمایش داده شود. این راهی سریع و رایگان برای ساخت یک فاویکون متمایز، بدون نیاز به هیچ کار طراحی، است و برای پروژه‌های جانبی و ابزارهای داخلی محبوبیت دارد.
آیا تصویر بارگذاری‌شدهٔ من دچار تغییر شکل می‌شود؟
نه — پیش از تغییر اندازه، تصویر به‌طور خودکار از مرکز به شکل مربع برش می‌خورد (با استفاده از ضلع کوتاه‌تر)، بنابراین تناسبات درست می‌ماند؛ فقط محتوای خارج از این برش مربعی در آن قرار نمی‌گیرد و ممکن است لبه‌های یک تصویر بسیار عریض یا بلند حذف شوند.