نحوه ایجاد رایگان فاویکون آنلاین (راهنمای 2026)

این نماد کوچک در برگه مرورگر - نمادی که در کنار عنوان صفحه ظاهر می شود - فاویکون نامیده می شود و کوچکترین تصمیم برای برندسازی در وب سایت شما است. سایت‌هایی که این نماد را ندارند، یک نماد صفحه خالی عمومی را نمایش می‌دهند، که بی‌صدا به بازدیدکنندگان نشان می‌دهد که «ناقص» است. خبر خوب: ایجاد یک فاویکون حدود یک دقیقه طول می کشد. این راهنما به شما نشان می دهد که چگونه ما رایگان است سازنده فاوآیکون چگونه هر تصویری را به مجموعه‌ای از فاوآیکن‌های با اندازه صحیح تبدیل کنیم و آنها را به وب‌سایت خود اضافه کنیم.

فاوآیکون چیست و چرا مهم است؟

فاویکون (مخفف عبارت «نماد دلخواه») تصویر کوچکی است که مرورگرها در برگه‌ها، نشانک‌ها، فهرست‌های تاریخچه و گاهی اوقات در نتایج جستجو نمایش می‌دهند. معمولاً فقط در ابعاد 16×16 پیکسل نمایش داده می‌شود - خیلی کوچک - اما در هر صفحه از سایت شما ظاهر می‌شود. یک فاوآیکون سفارشی، تب‌های شما را در یک نگاه قابل تشخیص می‌کند، به کاربران کمک می‌کند سایت شما را در میان بیست تب باز پیدا کنند و ظاهر حرفه‌ای کل وب‌سایت را تکمیل می‌کند. لازم نیست طراح باشید. یک شکل ساده و پررنگ، یک حرف روی پس‌زمینه رنگی یا یک نسخه ساده از لوگوی شما در این اندازه‌ها کاملاً مناسب است.

یک مولد فاویکون رایگان چه کاری انجام می‌دهد؟

سازنده فاوآیکون از هر تصویری که آپلود می‌کنید، یک فاوآیکون PNG در چهار اندازه استاندارد ایجاد می‌کند: 16×16 - اندازه آیکون تب و بوکمارک مرورگر کلاسیک؛ 32×32 - برای تب‌ها در مرورگرهای مدرن و میانبرهای نوار وظیفه در نمایشگرهای با تراکم بالا؛ 48×48 - برای میانبرهای دسکتاپ در برخی سیستم‌ها؛ 180×180 - اندازه آیکون لمسی اپل، که وقتی کسی سایت شما را در صفحه اصلی آیفون یا آیپد خود ذخیره می‌کند، نشان داده می‌شود. همه چیز در مرورگر شما اتفاق می‌افتد - تصویر منبع شما هرگز روی سرور آپلود نمی‌شود.

گام به گام: فاوآیکن‌های خودتان را بسازید

1. تصویر منبع را انتخاب کنید. چیزی ساده و پررنگ انتخاب کنید: علامت لوگو، حروف اول یا یک نماد تمیز. تصاویر مربعی بهترین عملکرد را دارند. از تصاویر دقیق اجتناب کنید - جزئیات در 16 پیکسل ناپدید می شوند.
2. سازنده فاوآیکون باز کردن روی هر مرورگر مدرنی اجرا می‌شود؛ نیازی به نصب چیزی نیست.
3. عکس خود را آپلود کنید یک فایل را از دستگاه خود انتخاب کنید. این ابزار کاملاً محلی باقی می‌ماند - هیچ چیزی منتقل نمی‌شود.
4. یک مجموعه آیکون ایجاد کنید. این ابزار نسخه‌های PNG با ابعاد 16، 32، 48 و 180 پیکسل از تصویر شما ایجاد می‌کند.
5. دانلود فایل‌ها. هر اندازه را ذخیره کنید. نام فایل را ساده و ثابت نگه دارید، برای مثال favicon-16.png، favicon-32.png، favicon-48.png و apple-touch-icon.png.
6. آنها را در وب سایت خود آپلود کنید. فایل ها را به همراه سایر فایل های سایت خود در پوشه اصلی یا پوشه تصاویر سایت خود قرار دهید.
7. HTML را اضافه کنید (به زیر مراجعه کنید). از صفحات شما<head> به آیکون‌ها ارجاع دهید تا مرورگرها بدانند که باید از آنها استفاده کنند.

افزودن فاویکون به وب سایت شما: HTML

وقتی فایل‌های آیکون روی سرور شما قرار گرفتند، می‌توانید آنها را به صفحات HTML خود اضافه کنید.<head> این خطوط را به بخش اضافه کنید (مسیرهایی را که فایل‌ها را در آن قرار داده‌اید، تنظیم کنید):

<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

مرورگرها به طور خودکار اندازه مورد نیاز خود را انتخاب می کنند. خط مربوط به آیکون apple-touch، آیفون و آیپد را پوشش می‌دهد، زمانی که بازدیدکنندگان سایت شما را به صفحه اصلی خود اضافه می‌کنند. اگر سایت شما از یک قالب هدر مشترک استفاده می کند، این خطوط را یک بار اضافه کنید تا هر صفحه یک فاویکون دریافت کند. قابل مشاهده نیست؟ مرورگرها فاوآیکن‌ها را به شدت کش می‌کنند. پس از افزودن فاوآیکون، یک به‌روزرسانی اساسی (Ctrl+Shift+R در ویندوز، Cmd+Shift+R در مک) انجام دهید یا صفحه را در یک پنجره خصوصی/ناشناس باز کنید تا بررسی شود.

نکات طراحی: چه چیزی یک فاوآیکون خوب را می‌سازد؟

• آن را فوق العاده ساده نگه دارید. در ابعاد 16×16 پیکسل جایی برای جزئیات وجود ندارد. یک حرف، یک شکل ساده یا یک علامت دو رنگ همیشه از یک لوگوی کامل بهتر است.
• از کنتراست بیشتری استفاده کنید. متن سفید روی یک مربع تک رنگ به وضوح خوانده می‌شود؛ خطوط خاکستری نازک روی رنگ سفید ناپدید می‌شوند.
• در اندازه واقعی آزمایش کنید. تصویر منبع خود را با عرض 16 پیکسل تجسم کنید - اگر نمی‌توانید بگویید چیست، قبل از ایجاد، آن را ساده کنید.
• با رنگ برند خود هماهنگ کنید. استفاده از رنگ اصلی سایت شما به عنوان پس‌زمینه فاوآیکون، فوراً آیکون تب را به برند شما مرتبط می‌کند.
• از لبه‌های شفاف خودداری کنید. اگر منبع شما پس‌زمینه شفاف دارد، مطمئن شوید که شکل قابل مشاهده به اندازه کافی پررنگ است تا در کاهش مقیاس دوام بیاورد - در 16 پیکسل، لبه‌های محو شده به رنگ خاکستری تیره در می‌آیند.
• مفهوم یکسان در همه اندازه ها. برای همه اندازه‌ها از یک تصویر منبع یکسان استفاده کنید تا آیکون تب، آیکون بوکمارک و آیکون صفحه اصلی شما یک علامت قابل تشخیص یکسان داشته باشند.

از اشتباهات رایج اجتناب کنید

• استفاده از یک لوگوی کاملاً دقیق. یک لوگو با یک برچسب به یک لکه غیرقابل خواندن در اندازه فاویکون تبدیل می شود. فقط نماد یا حرف اولیه را استخراج کنید.
• نماد لمس اپل را فراموش کنید. نسخه 180 پیکسلی همان چیزی است که کاربران آیفون هنگام ذخیره سایت شما در صفحه اصلی خود می‌بینند - آن را از دست ندهید.
• مسیرهای فایل نامعتبر در HTML. اگر فاوآیکون قابل مشاهده نیست، شایع‌ترین علت آن مسیری است که با محل واقعی فایل‌ها مطابقت ندارد. مقادیر href را دوباره بررسی کنید.
• تست فقط در یک مرورگر. نماد تب خود را حداقل در Chrome و یک مرورگر دیگر بررسی کنید و در صورت امکان صفحه اصلی تلفن را ذخیره کنید.

حریم خصوصی شما: عکس ها هرگز از دستگاه شما خارج نمی شوند

لوگوی شما نام تجاری شماست – آپلود آن در یک سایت فاویکون تصادفی به معنای تحویل آثار هنری خود به سرور یک غریبه است. سازنده فاوآیکون همه چیز با جاوا اسکریپت به صورت بومی در مرورگر شما پردازش می شود. هیچ چیزی آپلود، ذخیره یا ثبت نشده است.

سوالات متداول

آیا مولد فاویکون رایگان است؟

بله - بدون ثبت نام، بدون محدودیت، و آیکون‌هایی که دانلود می‌کنید متعلق به شماست تا در هر وب‌سایتی از آنها استفاده کنید.

با کدام تصویر شروع کنم؟

یک PNG مربع از علامت لوگو یا نماد ساده، در حالت ایده آل حداقل 512×512 پیکسل. تصاویر با منبع بزرگ و واضح بهتر از تصاویر کوچکتر کوچکتر هستند.

آیا هنوز به فایل .ico نیاز دارم؟

مرورگرهای مدرن همگی فاوآیکن‌های PNG را می‌پذیرند، که این ابزار را می‌سازد. فرمت کلاسیک favicon.ico هنوز هم کار می‌کند اما دیگر برای مرورگرهای فعلی ضروری نیست.

چرا فاوآیکون جدید من نمایش داده نمی‌شود؟

تقریباً همیشه در حال ذخیره سازی است. صفحه را به شدت رفرش کنید، حافظه پنهان مرورگر خود را برای سایت پاک کنید یا در یک پنجره ناشناس آزمایش کنید. HTML خود را بررسی کنید.<link> همچنین مسیرهای فایل را در تگ‌ها تأیید کنید.

همین حالا فاوآیکون خود را بسازید: رایگان سازنده فاوآیکون · رایگان فشرده ساز تصویر · رایگان انتخاب رنگ