ساخت فاویکون آنلاین

ساخت فاویکون از متن، ایموجی یا لوگو

فاویکون (یا فاوآیکون) همان آیکون کوچکی است که در تب مرورگر، بوکمارک‌ها، صفحه‌ی اصلی گوشی و حتی کنار نام سایت شما در نتایج گوگل نمایش داده می‌شود. سایتی که فاویکون ندارد یا آیکون پیش‌فرض و تار نشان می‌دهد، ناتمام و کمتر قابل‌اعتماد به نظر می‌رسد. با ابزار ساخت فاویکون تولتولیا می‌توانید در چند ثانیه از یک حرف، یک ایموجی یا لوگوی سایت، یک فایل favicon.ico واقعی و چنداندازه به‌همراه همه‌ی آیکون‌های PNG موردنیاز بسازید.

ویژگی‌های ابزار

• سه حالت ساخت: متن (۱ تا ۳ حرف)، ایموجی یا تصویر و لوگو.
• فایل ICO واقعی: نسخه‌های ۱۶، ۳۲ و ۴۸ پیکسلی در یک فایل، نه یک PNG تغییرنام‌یافته.
• آیکون‌های PNG: ۳۲×۳۲ برای مرورگر، ۱۸۰×۱۸۰ برای آیفون و ۵۱۲×۵۱۲ برای اندروید و PWA.
• شخصی‌سازی ظاهر: شکل مربع، گوشه‌گرد، دایره یا پس‌زمینه‌ی شفاف، همراه با انتخاب رنگ و فونت.
• پیش‌نمایش زنده در اندازه‌های واقعی نمایش.
• کد HTML آماده برای قرار دادن در بخش head سایت.
• بدون آپلود: تصویر شما در مرورگر پردازش می‌شود و به سرور ارسال نمی‌شود.

آموزش ساخت فاویکون در ۴ مرحله

1. حالت ساخت را انتخاب کنید: متن برای آیکون با حرف اول نام برند، ایموجی برای آیکون سریع و فان، یا تصویر برای تبدیل لوگو.
2. شکل، رنگ پس‌زمینه، رنگ متن و فونت را تنظیم کنید. تصویر به‌صورت خودکار از مرکز به شکل مربع برش می‌خورد.
3. پیش‌نمایش را در اندازه‌های ۱۶، ۳۲، ۴۸ و ۱۸۰ پیکسل بررسی کنید. مطمئن شوید آیکون در کوچک‌ترین اندازه هم خوانا است.
4. فایل favicon.ico و آیکون‌های PNG را دانلود کنید و کد HTML را در بخش head سایت خود قرار دهید.

تبدیل عکس و لوگو به ICO

اگر لوگوی سایت را به‌صورت PNG یا JPG دارید، حالت «تصویر» را انتخاب کنید تا به یک فایل ICO استاندارد تبدیل شود. تفاوت مهم این ابزار با تغییر دادن پسوند فایل این است که فایل ICO واقعی چند اندازه‌ی مختلف را در خود نگه می‌دارد و مرورگر برای هر جایگاه، اندازه‌ی مناسب را انتخاب می‌کند. اگر فقط پسوند یک فایل PNG را به ico تغییر دهید، ممکن است آیکون در برخی مرورگرها تار یا اصلاً نمایش داده نشود.

نکته: لوگوهای پرجزئیات و متن‌های طولانی در اندازه‌ی ۱۶ پیکسل خوانا نیستند. برای فاویکون، از نسخه‌ی ساده‌شده‌ی لوگو یا فقط نماد آن استفاده کنید.

اندازه‌های استاندارد فاویکون

اندازهفرمتکاربرد۱۶×۱۶ICOتب مرورگر در نمایشگرهای معمولی۳۲×۳۲ICO و PNGتب مرورگر در نمایشگرهای با وضوح بالا و نوار وظیفه۴۸×۴۸ICOمیان‌برهای ویندوز و نتایج جستجوی گوگل۱۸۰×۱۸۰PNGآیکون صفحه‌ی اصلی آیفون و آیپد (Apple Touch Icon)۵۱۲×۵۱۲PNGاندروید، وب‌اپلیکیشن‌ها (PWA) و آیکون سایت وردپرس

نصب فاویکون روی سایت

فایل favicon.ico را در پوشه‌ی اصلی (root) سایت و فایل‌های PNG را در مسیر دلخواه آپلود کنید. سپس کدی مشابه نمونه‌ی زیر را در بخش head صفحات قرار دهید. ابزار این کد را متناسب با فایل‌ها برای شما آماده می‌کند:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

در وردپرس: نیازی به ویرایش کد نیست. از مسیر «نمایش ← سفارشی‌سازی ← هویت سایت»، فایل PNG با اندازه‌ی ۵۱۲×۵۱۲ را به‌عنوان «نماد سایت» بارگذاری کنید.

فاویکون و سئو؛ نمایش آیکون در نتایج گوگل

گوگل در نتایج جستجو، به‌خصوص در موبایل، فاویکون سایت را کنار نام سایت نمایش می‌دهد. یک آیکون واضح و متمایز باعث می‌شود سایت شما میان نتایج بهتر دیده شود و کاربر آن را راحت‌تر به خاطر بسپارد. برای نمایش درست فاویکون در گوگل:

• فاویکون باید مربعی باشد و گوگل توصیه می‌کند اندازه‌ی آن بزرگ‌تر از ۴۸×۴۸ پیکسل باشد.
• فایل فاویکون و صفحه‌ی اصلی نباید در robots.txt مسدود شده باشند.
• آدرس فاویکون را ثابت نگه دارید و آن را مرتب تغییر ندهید.
• از تصاویر نامناسب یا نمادهای گمراه‌کننده استفاده نکنید؛ گوگل ممکن است آن‌ها را با آیکون پیش‌فرض جایگزین کند.

به‌روزرسانی فاویکون در نتایج گوگل ممکن است چند روز تا چند هفته طول بکشد.

این ابزار برای چه کسانی مناسب است؟

• وب‌مسترها و توسعه‌دهندگان: برای راه‌اندازی سریع سایت یا صفحه‌ی فرود جدید.
• صاحبان کسب‌وکار: برای تبدیل لوگوی موجود به مجموعه‌ی کامل آیکون‌های سایت.
• برنامه‌نویسان: برای ساخت آیکون سریع پروژه‌های شخصی و ابزارهای داخلی.
• طراحان: برای خروجی گرفتن استاندارد از نماد برند.

اگر لوگوی شما حجم زیادی دارد، ابتدا با تغییر اندازه و کاهش حجم عکس آن را بهینه کنید. برای انتخاب رنگ برند هم استخراج کد رنگ از عکس و تست کنتراست رنگ را امتحان کنید.

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

فاویکون چیست؟

فاویکون (Favicon) آیکون کوچک سایت است که در تب مرورگر، بوکمارک‌ها، تاریخچه، صفحه‌ی اصلی گوشی و نتایج جستجوی گوگل نمایش داده می‌شود.

آیا با تغییر پسوند PNG به ICO فاویکون ساخته می‌شود؟

نه به‌درستی. فایل ICO واقعی چند اندازه را در یک فایل نگه می‌دارد. تغییر پسوند فقط یک اندازه ارائه می‌دهد و ممکن است در برخی مرورگرها تار یا نادرست نمایش داده شود.

بهترین اندازه‌ی فاویکون چیست؟

یک اندازه برای همه‌جا کافی نیست. ترکیب استاندارد شامل فایل ICO با اندازه‌های ۱۶، ۳۲ و ۴۸ پیکسل، PNG ۱۸۰×۱۸۰ برای آیفون و PNG ۵۱۲×۵۱۲ برای اندروید است. این ابزار همه‌ی آن‌ها را می‌سازد.

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

مرورگرها فاویکون را برای مدت طولانی کش می‌کنند. کش مرورگر را پاک کنید یا سایت را در پنجره‌ی ناشناس باز کنید. در نتایج گوگل هم به‌روزرسانی ممکن است چند روز تا چند هفته زمان ببرد.

آیا می‌توانم از ایموجی به‌عنوان فاویکون استفاده کنم؟

بله. حالت «ایموجی» را انتخاب کنید و ایموجی دلخواه را تایپ کنید یا از گزینه‌های آماده انتخاب کنید. این روش برای پروژه‌های شخصی و ابزارهای داخلی بسیار محبوب است.

آیا تصویر من جایی آپلود می‌شود؟

خیر. تصویر شما فقط در مرورگر پردازش می‌شود و به هیچ سروری ارسال نمی‌شود.