ساخت favicon
لوگویتان را بارگذاری کنید و آیکون‌هایی را که سایتتان لازم دارد در یک ZIP بگیرید: favicon.ico با تصاویر 16، 32 و 48 پیکسل، PNG با اندازهٔ 48 پیکسل برای گوگل، Apple Touch Icon با پس‌زمینهٔ مات برای آیفون، آیکون‌های 192 و 512 پیکسل برای اندروید، آیکون ماسکپذیر با ناحیهٔ امن محاسبه‌شده و site.webmanifest. اگر SVG بارگذاری کنید icon.svg هم اضافه میشود. پیش‌نمایش زبانه، نتیجهٔ گوگل و صفحهٔ اصلی گوشی را می‌بینید و کد آمادهٔ <head> را کپی میکنید؛ همه‌چیز در مرورگرتان اجرا میشود.
- رایگان و بدون ثبت‌نام
- فایل شما از دستگاهتان خارج نمیشود
- تا 50 مگابایت برای هر فایل
برای شروع، تصویر لوگو یا آیکونتان را اضافه کنید. PNG، SVG، JPG و WebP همه کار می‌کنند؛ برای بهترین نتیجه از تصویر مربع حداقل 512 × 512 پیکسل استفاده کنید.
فایل شما هرگز از دستگاهتان خارج نمیشود؛ تصاویر در مرورگرتان پردازش میشوند. اطلاعات EXIF و موقعیت مکانی به خروجی اضافه نمیشود.
چطور favicon بسازیم
لوگویتان را اضافه کنید
لوگوی PNG، SVG، JPG یا WebP بارگذاری کنید. برای بهترین نتیجه تصویر مربع حداقل 512 × 512 پیکسل بگیرید؛ SVG هم قابل‌قبول است.
نام، رنگ‌ها و حاشیه را تنظیم کنید
نام سایت و نام کوتاه را بنویسید، رنگ پوسته و پس‌زمینه را انتخاب کنید و در صورت نیاز حاشیه بیفزایید. پیش‌نمایش‌ها نشان می‌دهند آیکون در زبانهٔ مرورگر، گوگل و صفحهٔ اصلی گوشی چگونه دیده میشود.
بسته را دانلود و جایگذاری کنید
ZIP را دانلود کنید، فایل‌ها را در پوشهٔ اصلی سایتتان بارگذاری کنید و قطعه‌کد <head> نمایش‌داده‌شده را به صفحه‌هایتان اضافه کنید.
چه چیزی حفظ میشود؟
حفظ میشود
- تناسب لوگوی شما: تصویر غیرمربع داخل مربع جا داده میشود و هرگز کشیده نمیشود
- شفافیت (در آیکون‌های استاندارد؛ اگر رنگ پس‌زمینه انتخاب کنید با آن پر میشود)
- اگر SVG بارگذاری کنید، icon.svg همان‌طور که هست اضافه میشود
تغییر میکند
- هر آیکون با کیفیت بالا به اندازهٔ خودش نمونه‌برداری مجدد میشود
- Apple Touch Icon و آیکون ماسکپذیر همیشه پس‌زمینهٔ مات دارند: رنگی که انتخاب میکنید یا وقتی «شفاف» انتخاب شده، سفید
- در آیکون ماسکپذیر، محتوا در ناحیهٔ امن ۸۰٪ قرار میگیرد
منتقل نمیشود
- از PNG یا JPG تصویر برداری (SVG) ساخته نمیشود؛ icon.svg فقط برای ورودی SVG وجود دارد
- اطلاعات EXIF و فراداده‌های دیگر به آیکونها اضافه نمیشود
چه زمانی به کار می‌آید؟
مجموعهٔ کامل آیکون برای سایت جدید
یک favicon.ico دیگر همه‌چیز را پوشش نمی‌دهد: صفحهٔ اصلی آیفون، اندروید و نتایج جستجوی گوگل فایل‌های متفاوتی انتظار دارند. با یک بارگذاری، همه را با نام و اندازهٔ درست می‌گیرید.
نمایش آیکونتان در نتایج گوگل
گوگل آیکون سایت را از فایلی مربع نشان میدهد که اندازه‌اش مضربی از 48 پیکسل است و باید قابل‌خزش باشد. این بسته آن فایل و پیوند <head> مربوطه را دارد.
وب‌سایتی که مثل اپلیکیشن اضافه شود (PWA)
اگر میخواهید سایتتان به صفحهٔ اصلی گوشی اضافه شود، به manifest و آیکون‌های 192 و 512 پیکسل نیاز دارید. آیکون ماسکپذیر وقتی اندروید آیکون را دایره یا مربع گوشهگرد می‌برد، جلوی بریده‌شدن لوگو را میگیرد.
محدودیت‌هایی که باید بدانید
- برای بهترین نتیجه تصویر مربع حداقل 512 × 512 پیکسل بگیرید؛ آیکون‌های بزرگ ساخته‌شده از منبع کوچک‌تر تار دیده میشوند.
- خطوط نازک و متن ریز در آیکون‌های 16 و 32 پیکسل ناخوانا میشوند؛ لوگوهای درشت و پرتضاد بهتر جواب می‌دهند.
- رنگ پوسته فقط در نوار آدرس مرورگرهای موبایل اعمال میشود و به تنظیمات مرورگر بستگی دارد.
- گوگل ممکن است چند روز یا حتی چند هفته برای به‌روزکردن آیکون در نتایج جستجو وقت بگیرد و مرورگرها هم آیکونها را در حافظهٔ نهان نگه می‌دارند.
پرسش‌های متداول
یک وب‌سایت به چه فایل‌های favicon نیاز دارد؟
روش امروزی: favicon.ico در پوشهٔ اصلی، یک PNG با اندازهٔ 48 پیکسل برای گوگل، در صورت امکان icon.svg، apple-touch-icon.png با اندازهٔ 180 پیکسل برای آیفون، آیکون‌های 192 و 512 پیکسل برای اندروید و site.webmanifest. این ابزار همه را میسازد و پیوندهای <head> را هم میدهد.
آیکون ماسکپذیر چیست؟
آیکون ماسکپذیر محتوایش را داخل ناحیهٔ امن نگه میدارد و پسزمینهاش کاملاً پر است، تا اندروید بسته به دستگاه بتواند آن را به شکل دایره، مربع گوشهگرد یا شکل دیگر ببرد. اینجا محتوا در ناحیهٔ مرکزی ۸۰٪ تصویر 512 پیکسلی قرار میگیرد.
چرا Apple Touch Icon مات و با گوشههای تیز است؟
iOS بخشهای شفاف را سیاه نشان میدهد و گوشهها را خودش گرد میکند. پس آیکون کاملاً پر و بدون گوشهٔ گرد، با رنگ پسزمینهای که انتخاب میکنید (در حالت شفاف، سفید) ساخته میشود.
چرا آیکونم در نتایج گوگل دیده نمیشود؟
فایل آیکون نباید با robots.txt مسدود شده باشد، باید از <head> صفحهٔ اصلی پیوند خورده باشد و باید مربعی با اندازهٔ مضرب 48 پیکسل باشد. بعد از اصلاح می‌توانید در Search Console درخواست ایندکس دوبارهٔ صفحهٔ اصلی بدهید؛ باز هم به‌روزرسانی ممکن است روزها یا هفته‌ها طول بکشد.
اگر تصویر غیرمربع بارگذاری کنم چه میشود؟
آیکونها بدون اعوجاج داخل مربع جا داده میشوند و در دو طرف فضای خالی میماند. اگر میخواهید قاب مربع را کامل پر کند، ابتدا با ابزار برش آن را به 1:1 ببرید.
آیا از PNG یک favicon به شکل SVG میسازد؟
خیر. تبدیل خودکار پیکسل به تصویر برداری ممکن است بیسروصدا ظاهر آیکون را عوض کند، پس icon.svg فقط وقتی اضافه میشود که خودتان SVG بارگذاری کنید.
آیا این ابزار رایگان است؟
بله، کاملاً رایگان است. حساب کاربری، اشتراک و واترمارک ندارد.
آیا فایلهایم جایی بارگذاری میشوند؟
خیر. تصاویر در مرورگرتان پردازش میشوند و هرگز از دستگاهتان خارج نمیشوند. اطلاعات EXIF و موقعیت مکانی به خروجی اضافه نمیشود.