ساخت فاویکون
از یک عکس یا لوگو، یا از یک حرف و ایموجی، فاویکون سایت بسازید: favicon.ico، آیکون اپل و اندروید، فایل manifest و کد HTML آمادهٔ کپی.
این ابزار بدون اینترنت هم کار میکند.
فایل شما از دستگاهتان خارج نمی‌شود
یک یا دو نویسه بهترین خوانایی را در اندازهٔ ۱۶ پیکسل دارد.
کد HTML برای بخش head
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
فایل‌ها را در ریشهٔ سایت (کنار صفحهٔ اصلی) بگذارید و این کد را داخل تگ head قرار دهید.
در منوی «افزودن به صفحهٔ اصلی» اندروید نمایش داده میشود.
محتوای site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#0f766e",
"background_color": "#ffffff",
"display": "standalone"
}
راهنمای استفاده
۱. انتخاب کنید فاویکون از «حرف یا ایموجی» ساخته شود یا از «عکس یا لوگو».
۲. متن و رنگ‌ها را تنظیم کنید یا تصویر لوگو را انتخاب کنید. شکل (مربع، گوشه‌گرد یا دایره) و فاصله از لبه را تعیین کنید.
۳. آیکون‌ها در همهٔ اندازه‌ها همان لحظه ساخته می‌شوند؛ پیش‌نمایش ۱۶ پیکسلی را ببینید تا مطمئن شوید در تب مرورگر خواناست.
۴. همه را یک‌جا به‌صورت ZIP دانلود کنید، فایل‌ها را در ریشهٔ سایت بگذارید و کد HTML را در بخش head صفحه‌ها قرار دهید.
نکته‌هایی برای فاویکون خوانا
- در اندازهٔ ۱۶ پیکسل جزئیات دیده نمی‌شود؛ به‌جای لوگوی کامل از حرف اول نام برند یا نماد ساده‌شدهٔ لوگو استفاده کنید.
- رنگ متن و پس‌زمینه باید تضاد زیادی داشته باشند تا در حالت روشن و تیرهٔ مرورگر دیده شوند.
- اگر لوگو شفاف است، کمی فاصله از لبه بگذارید تا در آیکون اندروید به لبه‌ها نچسبد.
پرسش‌های متداول
فاویکون چیست و کجا دیده میشود؟
فاویکون آیکون کوچک سایت است که در تب مرورگر، نوار بوکمارک، نتایج جست‌وجوی گوگل در موبایل و صفحهٔ اصلی گوشی (وقتی سایت به آن اضافه شود) نمایش داده میشود.
چرا هم favicon.ico لازم است و هم فایلهای PNG؟
فایل ICO قدیمیترین و سازگارترین قالب است و مرورگرها حتی بدون کد HTML هم آن را از ریشهٔ سایت میخوانند. PNGها برای نمایش تیز در صفحههای با تراکم بالا، آیفون (apple-touch-icon) و اندروید لازماند.
favicon.ico ساختهشده چه اندازههایی دارد؟
سه اندازهٔ ۱۶، ۳۲ و ۴۸ پیکسلی داخل یک فایل ICO قرار میگیرند و ویندوز و مرورگر هر کدام را که لازم داشته باشند انتخاب میکنند.
چرا آیکون اپل پسزمینهٔ سفید دارد؟
آیفون شفافیت آیکون صفحهٔ اصلی را سیاه نمایش میدهد و گوشهها را خودش گرد میکند؛ برای همین apple-touch-icon همیشه مربع و بدون شفافیت ساخته میشود.