ساخت آیکون سایت
برای ساخت آیکون سایت، لوگو را اینجا بیندازید و مجموعهٔ کامل آیکون‌ها را بگیرید؛ از آیکون 16 پیکسلی زبانه تا آیکون 512 پیکسلی برنامه، همراه کد HTML آماده. همه‌چیز در مرورگر انجام می‌شود و تصویرتان آپلود نمی‌شود.
Qwyzzle
Summit Roasters
Fox Esportsلوگویتان را اینجا بیندازید
PNG، JPG، WebP یا SVG. تصویر مربع با اندازهٔ 512 پیکسل یا بیشتر بهتر است.
در مرورگر شما ساخته می‌شود. تصویرتان آپلود نمی‌شود.
آیکون سایت چیست و کجا دیده می‌شود
آیکون سایت، تصویر مربع کوچکی است که نمایندهٔ وب‌سایت شماست. نام اولیهٔ آن از «آیکون علاقه‌مندی‌ها» آمده؛ نخستین مرورگری که نشانش داد آن را کنار نشانک‌ها در بخش علاقه‌مندی‌ها گذاشت.
در زبانهٔ مرورگر کنار عنوان صفحه دیده می‌شود؛ با عرض 16 پیکسل یا روی صفحهٔ با وضوح بالا 32 پیکسل. در نشانک‌ها و سابقهٔ مرور هم سایت را مشخص می‌کند. وقتی سایت روی صفحهٔ اصلی گوشی ذخیره شود، به آیکون برنامه تبدیل می‌شود. Google هم آن را کنار نام سایت در نتایج جست‌وجو نشان می‌دهد.
در همه‌جا کارش یکی است: با یک نگاه میان آیکون‌های دیگر شناخته شود.
چرا یک آیکون به چند فایل تبدیل می‌شود
هر کدام از این کاربردها در زمان متفاوتی آمده و فایل خودش را می‌خواهد. ابزار ساخت آیکون بالا همه را از یک تصویر می‌سازد.
زبانه، نشانک و سابقهٔ مرور از favicon.ico استفاده می‌کنند؛ یک فایل با نسخه‌های 16، 32 و 48 پیکسلی. قدیمی‌ترین فرمت است. اگر صفحه آیکونی معرفی نکند، مرورگرها هنوز در پوشهٔ اصلی سایت دنبال favicon.ico می‌گردند.
اگر از SVG شروع کنید، favicon.svg هم می‌گیرید که مرورگرهای پشتیبان SVG از آن استفاده می‌کنند. چون از شکل‌ها ساخته شده، نه پیکسل، روی هر صفحه‌ای واضح می‌ماند.
وقتی سایت به صفحهٔ اصلی iPhone یا iPad اضافه می‌شود، از apple-touch-icon.png با عرض و ارتفاع 180 پیکسل استفاده می‌کنند. iPhone بخش شفاف را سیاه می‌کند؛ پس این آیکون همیشه زمینهٔ یکدست دارد: رنگ شما، یا اگر شفاف را زده‌اید سفید.
گوشی‌های Android و سایت‌های نصب‌شده مثل برنامه، icon-192.png و icon-512.png را می‌خواهند. آن‌ها را از طریق site.webmanifest پیدا می‌کنند؛ فایل متنی کوچکی که نام سایت، اگر وارد کرده باشید، و جای آیکون‌های بزرگ را می‌گوید.
فایل‌های PNG جداگانهٔ 16 تا 48 پیکسل برای سرویس‌هایی هستند که PNG می‌خواهند. برای نتایج جست‌وجو، Google لینک‌های آیکون را از HTML صفحهٔ اصلی می‌خواند.
چطور فایل‌های آیکون را به سایت اضافه کنید
اگر شما یا توسعه‌دهندهٔ سایت فایل‌ها را ویرایش می‌کنید، دو مرحله دارد.
اول فایل دانلودی را از حالت فشرده خارج کنید و فایل‌ها را در پوشهٔ اصلی سایت بگذارید؛ همان پوشه‌ای که صفحهٔ اصلی در آن است. برای بررسی، /favicon.ico را به نشانی سایت اضافه کنید؛ باید آیکون باز شود.
بعد خطوط HTML فایل README را، که ابزار هم نشان می‌دهد، در بخش سرآیند صفحات بچسبانید؛ بخش بالای HTML که عنوان را نگه می‌دارد. برای ICO، آیکون لمسی Apple و مانیفست هر کدام یک خط هست و اگر SVG داشته باشید برای آن هم خطی وجود دارد.
معمولاً همهٔ صفحه‌ها قالب مشترک دارند و یک بار چسباندن کافی است. اول خطوط آیکون قدیمی را حذف کنید وگرنه مرورگر شاید همان را بردارد.
در سایت‌ساز می‌توانید هر دو مرحله را رد کنید: icon-512.png را در تنظیم آیکون سایت بارگذاری کنید تا خود ابزار HTML را اضافه کند.
چطور لوگو در 16 پیکسل خوانا بماند
در 16 × 16، کل آیکون فقط 256 مربع کوچک رنگی است. بیشتر لوگوها برای این اندازه طراحی نشده‌اند.
از نماد شروع کنید، نه نام. نام هشت‌حرفی در 16 پیکسل به هر حرف فقط دو پیکسل عرض می‌دهد. نماد ندارید؟ حرف اول را بزرگ و ضخیم بگذارید؛ حروف ضخیم بهتر از نازک‌ها دوام می‌آورند.
بعد جزئیات را کم کنید. خط نازک و شکاف ریز در اطراف محو می‌شوند و شعار به لکه تبدیل می‌شود.
روشن و تیره بودن مهم‌تر از خود رنگ است. زبانه‌ها بنا بر پوسته روشن یا تیره‌اند و آیکون سرمه‌ای روی نوار تیره ناپدید می‌شود. اگر نماد تیره است در ابزار به آن زمینهٔ روشن بدهید، یا برعکس.
حاشیه، فاصلهٔ میان لوگو و لبهٔ مربع است و باید متعادل باشد. زیادش لوگو را در زبانه کوچک می‌کند؛ کمش باعث می‌شود iPhone هنگام گردکردن آیکون، گوشه‌های لوگو را ببرد.
در پایان، پیش‌نمایش زبانهٔ روشن و تیره را در اندازهٔ واقعی و بدون بزرگ‌نمایی ببینید. ابزار رایگان بررسی لوگو فراتر می‌رود؛ لوگو را به 32 پیکسل کوچک می‌کند و مقدار جزئیات باقی‌مانده را می‌سنجد.
چه وقت بهتر است به‌جای کوچک‌کردن، دوباره طراحی کنید
گاهی کوچک‌کردن جواب نمی‌دهد. در تصویرسازی پرجزئیات یا طرح سه‌بعدی متکی به سایه، خود جزئیات طرح را می‌سازند و در 16 پیکسل ناپدید می‌شوند. این ابزار اندازه را عوض می‌کند، اما لوگو را دوباره نمی‌کشد.
این به معنی بدبودن لوگو نیست؛ برای جای بزرگ ساخته شده است. عمداً نسخهٔ کوچک طراحی کنید: نماد ساده‌تر یا حرف اول با فونت برند. رنگ‌ها و بخشی از شکل را نگه دارید تا ارتباطشان پیدا باشد. یک حرف واضح را همیشه به تصویر کوچک تار ترجیح می‌دهیم.
نماد تازه می‌خواهید؟ ساخت لوگو با هوش مصنوعی از نام برند و در صورت تمایل توضیح کوتاه شما طرح می‌سازد. لوگوهای قالب‌های لوگو، اگر نماد داشته باشند، فایل جداگانهٔ آن را هم دارند. هر لوگویی که از ما بخرید فایل‌های آیکون سایت را شامل می‌شود.
پرسش‌های رایج آیکون سایت
رایگان است، بدون ثبت‌نام یا واترمارک. تصویر هم پیش خودتان می‌ماند. ابزار همهٔ اندازه‌ها و ZIP را در مرورگر و روی دستگاه شما می‌سازد؛ تصویر به سرورهای ما فرستاده نمی‌شود. پس برای لوگویی که هنوز به کسی نشان نداده‌اید هم مناسب است.
مربع، با هر ضلع حداقل 512 پیکسل. بزرگ‌ترین آیکون مجموعه 512 پیکسل است؛ PNG، JPG یا WebP کوچک‌تر کشیده و آیکون بزرگ تار می‌شود. ابزار به شما هشدار می‌دهد. SVG این محدودیت را ندارد چون از شکل است نه پیکسل. لوگوی عریض فقط نوار باریکی از مربع را پر می‌کند؛ از نماد یا حرف اول شروع کنید.
همه را می‌خواهید، چون مرورگرها و گوشی‌ها فایل متفاوت می‌طلبند و کد HTML ابزار، فایل مناسب را معرفی می‌کند. همهٔ مرورگرها ICO را می‌شناسند. PNGها برای گوشی و برنامهٔ نصب‌شده‌اند و اندازهٔ کوچک هم دارند. اگر از SVG شروع کنید نسخهٔ SVG می‌گیرید که در مرورگر پشتیبان در هر اندازه واضح است.
احتمالاً مرورگر نسخهٔ ذخیره‌شده را نشان می‌دهد. مرورگر آیکون را خیلی بیشتر از بقیهٔ صفحه نگه می‌دارد. بازخوانی کامل کنید: Ctrl+Shift+R در Windows، Cmd+Shift+R در Mac و Option+Cmd+R در Safari. اگر نشد، /favicon.ico را به آخر نشانی اضافه کنید و آن را بازخوانی کنید یا در پنجرهٔ خصوصی ببینید. مرورگر دیگران به‌مرور به‌روز می‌شود.
در تنظیمات سایت‌ساز، نه پوشه. بیشتر سایت‌سازها و فروشگاه‌سازها گزینهٔ آیکون سایت دارند که یک PNG مربع می‌گیرد. icon-512.png، بزرگ‌ترین فایل ZIP، را انتخاب کنید تا برای ساخت اندازه‌های کوچک کیفیت کافی باشد. اگر اندازهٔ خاصی خواست، فایل همان اندازه را بدهید. خود سایت‌ساز HTML را می‌گذارد و README لازم نیست.
وقتی خزندهٔ Google، برنامه‌ای که صفحات را می‌خواند، دوباره صفحهٔ اصلی را ببیند، آیکون تازه را دریافت می‌کند. زمان‌بندی ثابتی ندارد. تصویر مربع و لینک آیکون در HTML صفحهٔ اصلی باید حاضر باشند. بعد اینکه چه چیزی و چه وقت نمایش داده شود با Google است؛ کمی زمان بدهید.
هنوز لوگو ندارید؟ اول یکی بسازید.
با هوش مصنوعی یا قالبی در لوگوساز طراحی کنید. هر لوگویی که از DepthLogo دانلود کنید، آیکون‌های سایتش را هم دارد.