چطور فاوآیکون بسازیم
اندازه‌ها، فرمت‌ها و کدی که برای فاوآیکونی لازم دارید که همه‌جا نمایش داده شود.
فاوآیکون همان آیکون کوچکی است که در زبانهٔ مرورگر، در نشانک‌ها و کنار سایت شما در نتایج جست‌وجوی موبایل Google دیده می‌شود. نبود فاوآیکون سایت را ناتمام نشان می‌دهد و فاوآیکون تار از آن هم بدتر است. ساختن یک فاوآیکون خوب فقط چند دقیقه طول می‌کشد.
با طرح مناسب شروع کنید
فاوآیکون گاهی در اندازهٔ 16 در 16 پیکسل نمایش داده می‌شود، پس یک لوگوی کامل همراه با نوشته خوانا نخواهد بود. از نشانه‌ای ساده استفاده کنید: نماد لوگوی خودتان، یک حرف اول یا شکلی پررنگ با رنگ برندتان. با کوچک کردنش روی صفحه به یک‌چهارم اندازه امتحانش کنید: اگر هنوز می‌شود فهمید چیست، جواب می‌دهد.
از یک تصویر مربعی دست‌کم 512 در 512 پیکسل شروع کنید، ترجیحاً PNG با پس‌زمینهٔ شفاف. اگر لوگوی شما مربعی نیست، با قفل کردن نسبت روی 1:1 آن را برش دهید تا مربع شود.
فایل‌هایی که لازم دارید
| فایل | اندازه | استفاده‌کننده |
|---|---|---|
| favicon.ico | شامل نسخه‌های 16، 32 و 48 پیکسلی | مرورگرها، سیستم‌های قدیمی‌تر، درخواست پیش‌فرض /favicon.ico |
| یک آیکون PNG | 32 در 32 و 192 در 192 | مرورگرهای امروزی، صفحهٔ اصلی Android |
| apple-touch-icon.png | 180 در 180 | نشانک‌های صفحهٔ اصلی iPhone و iPad |
جست‌وجوی Google هم از فاوآیکون شما در نتایج استفاده می‌کند. فاوآیکون باید مربعی دست‌کم 48 در 48 پیکسل باشد و خزندهٔ Google بتواند در سایت شما به آن دسترسی پیدا کند.
ساختن فایل ICO
فایل PNG مربعی خود را در ابزار تبدیل PNG به ICO رها کنید. این ابزار یک فایل .ico واقعی می‌سازد که اندازه‌های کوچکی را که مرورگرها می‌خواهند در خود دارد. برای نسخه‌های PNG، اندازهٔ همان تصویر مربعی را به 180، 192 و 32 پیکسل تغییر دهید.
اضافه کردن آن به سایت
فایل favicon.ico را در ریشهٔ سایت آپلود کنید تا در نشانی yoursite.com/favicon.ico در دسترس باشد و این خطوط را درون بخش head صفحه‌هایتان اضافه کنید:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/fa/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/fa/apple-touch-icon.png">
در WordPress به Appearance، سپس Customize و بعد Site Identity بروید و یک تصویر مربعی را به‌عنوان Site Icon آپلود کنید. WordPress اندازه‌ها را برایتان می‌سازد. Shopify، Wix و Squarespace هر کدام در تنظیمات سایت یا قالب، گزینه‌ای برای فاوآیکون دارند.
وقتی فاوآیکون جدید نمایش داده نمی‌شود
مرورگرها فاوآیکون را سرسختانه در حافظهٔ پنهان نگه می‌دارند. سایت را در یک پنجرهٔ خصوصی باز کنید یا مستقیم به yoursite.com/favicon.ico بروید و صفحه را تازه‌سازی کنید. ممکن است Google روزها یا هفته‌ها پس از خزش دوبارهٔ صفحهٔ اصلی شما، آیکون را در نتایج جست‌وجو به‌روز کند.
اشتباه‌های رایج
- استفاده از لوگوی کامل با نوشته‌های ریز که در 16 پیکسل به لکه‌ای نامفهوم تبدیل می‌شود.
- آیکون سفید روی پس‌زمینهٔ شفاف که در زبانه‌های روشن مرورگر ناپدید می‌شود.
- ارائهٔ فقط یک فایل کوچک 16 پیکسلی که روی صفحه‌های با وضوح بالا تار دیده می‌شود.
- فراموش کردن فایل در /favicon.ico که برخی مرورگرها و خزنده‌ها، صرف‌نظر از آنچه در صفحه آمده، آن را درخواست می‌کنند.