نحوه استفاده
- گزینه حروف را انتخاب کنید و یک یا دو حرف را با رنگ‌های خود وارد کنید، یا گزینه تصویر را انتخاب کنید و یک لوگو (ترجیحاً مربع، حداقل ۵۱۲ پیکسل) برگزینید.
- پیش‌نمایش همه اندازه‌ها را بررسی کنید، به‌ویژه ۱۶ و ۳۲ px که در برگه‌های مرورگر ظاهر می‌شوند.
- فایل ZIP را دانلود و فایل‌های آن را در ریشه وب‌سایت خود بارگذاری کنید.
- تگ‌های HTML را در بخش head صفحه‌های خود قرار دهید و در صورت نیاز نام را در site.webmanifest تنظیم کنید.
نحوه کار
مرورگرها و دستگاه‌ها آیکون‌ها را در جاهای مختلف جستجو می‌کنند. مجموعه‌ای که اینجا تولید می‌شود موارد رایج را پوشش می‌دهد: favicon.ico با تصاویر ۱۶، ۳۲ و ۴۸ پیکسلی برای تب‌های مرورگر، نشانک‌ها و نرم‌افزارهای قدیمی که /favicon.ico را به‌طور خودکار درخواست می‌کنند؛ فایل‌های PNG با ابعاد ۱۶ و ۳۲ پیکسل که با تگ‌های link ارجاع می‌شوند؛ یک apple-touch-icon با ابعاد ۱۸۰ × ۱۸۰ که وقتی کسی سایت شما را به صفحه اصلی iPhone یا iPad اضافه می‌کند استفاده می‌شود؛ و آیکون‌های ۱۹۲ و ۵۱۲ پیکسلی که از site.webmanifest برای صفحه اصلی Android و برنامه‌های وب قابل نصب ارجاع می‌شوند.
فایل favicon.ico آیکون‌ها را به‌صورت تصاویر PNG داخل یک محفظه ICO ذخیره می‌کند که همه مرورگرهای فعلی و Windows Vista یا نسخه‌های جدیدتر می‌توانند بخوانند. فایل‌های ICO و ZIP توسط کد موجود در همین صفحه ساخته می‌شوند؛ چیزی به سرور ارسال نمی‌شود.
اندازه‌های کوچک به طراحی ساده نیاز دارند: در ۱۶ × ۱۶ پیکسل خطوط نازک و متن‌های کوچک محو می‌شوند، بنابراین یک حرف درشت یا یک علامت لوگوی ساده‌شده بهتر از لوگوی کامل همراه با کلمات عمل می‌کند. تصویر در چند مرحله باکیفیت کوچک می‌شود. apple-touch-icon همیشه با رنگ پس‌زمینه یکدست ساخته می‌شود، زیرا iOS بخش‌های شفاف را با رنگ سیاه پر می‌کند و iOS گوشه‌های آن را خودش گرد می‌کند.
پس از بارگذاری آیکون‌های جدید، مرورگرها ممکن است مدتی همچنان favicon قدیمی را نشان دهند، زیرا آن را به‌شدت در حافظه پنهان نگه می‌دارند. تازه‌سازی اجباری یا باز کردن مستقیم /favicon.ico معمولاً کمک می‌کند.
نمونه‌ها
آیکون حرفی برای پروژه جدید
تایپ «TG» با حروف سفید روی مربعی با گوشه‌های گرد سبز تیره، آیکونی تمیز می‌سازد که در تب مرورگر در ابعاد ۱۶ × ۱۶ پیکسل خوانا باقی می‌ماند، بدون نیاز به لوگوی طراحى‌شده.
آیکون از لوگوی موجود
یک لوگوی PNG با ابعاد ۱۰۲۴ × ۱۰۲۴ با پس‌زمینه شفاف که روی «جای دادن کل تصویر» تنظیم شده باشد، آیکون‌های تب شفاف و apple-touch-icon را روی رنگ برند شما تولید می‌کند.
لوگوی عریض
برای یک لوگوتایپ ۱۲۰۰ در ۳۰۰، برش مرکز فقط حروف میانی را نگه می‌دارد. جا دادن کل تصویر همه چیز را نگه می‌دارد اما آن را بسیار ریز می‌کند؛ معمولاً یک نشان مربعی جدا بهتر دیده می‌شود.
پرسش‌های متداول
آیا هنوز به favicon.ico نیاز دارم؟
هنوز مفید است. برخی مرورگرها، فیدخوان‌ها و ابزارها حتی بدون تگ link، /favicon.ico را از ریشه سایت درخواست می‌کنند. مرورگرهای مدرن همچنین از آیکون‌های PNG که در HTML ارجاع شده‌اند استفاده می‌کنند.
فایل‌ها را کجا قرار دهم؟
آن‌ها را در پوشه ریشه وب‌سایت خود، کنار صفحه اصلی بارگذاری کنید تا /favicon.ico و مسیرهای دیگر در HTML کار کنند. اگر از زیرپوشه استفاده می‌کنید، مسیرها را در تگ‌های link و در site.webmanifest تغییر دهید.
چرا فاوآیکون قدیمی من هنوز نمایش داده می‌شود؟
مرورگرها فاوآیکون‌ها را جداگانه و برای مدت طولانی کش می‌کنند. یک بارگذاری مجدد کامل را امتحان کنید، /favicon.ico را در یک برگه جدید باز کنید یا در پنجره خصوصی بررسی کنید. تغییر نام فایل‌ها، مثلاً favicon-v2.ico، نیز بارگذاری مجدد را اجباری می‌کند.
آیا این ابزار فاوآیکون SVG می‌سازد؟
خیر. این ابزار فایل‌های PNG و ICO می‌سازد که همه‌جا کار می‌کنند. اگر از قبل یک لوگوی SVG دارید، می‌توانید خودتان آن را با یک تگ link از نوع image/svg+xml در کنار این فایل‌ها اضافه کنید.
حریم خصوصی
آیکون‌ها، فایل ICO و فایل ZIP در مرورگر شما ساخته می‌شوند. تصویر و متن شما بارگذاری، ذخیره یا در تحلیل‌های آماری استفاده نمی‌شوند.