چگونه تولید فاوآیکون مبتنی بر مرورگر کار میکند
کل خط لوله تولید درون تب مرورگر شما با استفاده از Canvas API و کتابخانه فشردهسازی fflate اجرا میشود. بدون پردازش سمت سرور، بدون آپلود، بدون سرویسهای شخص ثالث.
- تصویر منبع خود را بارگذاری کنید یا متن یا ایموجی خود را روی یک بوم خارج از صفحه با وضوح بالا رندر کنید. اگر تصویر انتخاب کردهاید، مرورگر آن را به صورت بومی رمزگشایی میکند. اگر حالت متن را انتخاب کردهاید، صفحه کلمه شما را با فونت، رنگ جلو و رنگ پسزمینه انتخاب شده روی بوم میکشد.
- برای هر اندازه هدف (16، 32، 48، 180، 192، 512 پیکسل)، صفحه یک بوم خارج از صفحه جدید با همان ابعاد ایجاد میکند، سپس محتوای منبع را با استفاده از Canvas API روی آن میکشد. تغییر اندازه داخلی مرورگر به طور خودکار کاهش مقیاس را با فیلتر دوخطی یا دو مکعبی انجام میدهد و یک فاوآیکون واضح در هر اندازه تولید میکند.
- هر بوم از طریق
canvas.toBlob()به PNG خروجی داده میشود. پنل پیشنمایش هر شش اندازه را به شما نشان میدهد تا قبل از دانلود نتیجه را بررسی کنید. یک بلوک HTML آماده برای کپی و یک قطعه بیانیه برنامه وب (manifest.json) از نام فایلها ساخته میشود تا بتوانید مستقیماً آنها را در تگ head سایت خود قرار دهید. - وقتی روی دانلود ZIP کلیک میکنید، صفحه هر PNG Blob را در حافظه میخواند، از fflate برای بستهبندی آنها به همراه یک فایل
manifest.jsonدر یک بایگانی ZIP استفاده میکند و با یک کلیک دانلود را شروع میکند. کل بسته در مرورگر شما ساخته میشود — هیچ چیزی در هیچ مرحلهای آپلود نمیشود.
چرا فاوآیکون را در مرورگر تولید کنیم؟
- یک مجموعه کامل فاوآیکون، خطای 404 عدم وجود فاوآیکون در اولین بازدید را حذف میکند و تضمین میکند سایت شما در نشانکها، تبهای مرورگر و صفحههای نصب PWA حرفهای به نظر برسد. اندازههای از دست رفته به این معنی است که مرورگر یا چیزی بارگذاری نمیکند یا به یک مقیاس همسایه نزدیک تار بازمیگردد.
- بلوک HTML و قطعه manifest پیوست شده شما را از نوشتن دستی شش تگ و یک بلوک JSON بیانیه نجات میدهد. آنها را در head سایت خود بچسبانید، مسیرها را در صورت نیاز تنظیم کنید، و کار در ثانیهها تمام میشود نه دقیقهها.
- تولید سمت کلاینت تنها گزینه روی دستگاههای شرکتی قفلشدهای است که ویرایشگر عکس ندارند. از آنجایی که هیچ چیزی آپلود نمیشود، هیچ خطر نشت داده و نیاز به بررسی انطباق برای تصاویر حساس یا دارای برند وجود ندارد.
- حالت متن و ایموجی به شما امکان میدهد بدون هیچ تصویری فاوآیکون تولید کنید. حرف اول برند خود، یک حرف یا ایموجی تایپ کنید، یک فونت و رنگ انتخاب کنید، و یک مجموعه کامل دریافت کنید — ایدهآل برای پروژههای شخصی، نمونههای اولیه یا سایتهایی که اکنون به یک فاوآیکون موقت نیاز دارند.
کاربردهای رایج تولید فاوآیکون
هر سایتی که مردم نشانک یا نصب میکنند به فاوآیکون نیاز دارد. در اینجا سه سناریو آورده شده است که در آن یک تولیدکننده مبتنی بر مرورگر در زمان صرفهجویی میکند.
- راهاندازی یک صفحه فرود جدید یا سایت خرد. یک مجموعه کامل فاوآیکون از لوگوی برند در کمتر از یک دقیقه تولید کنید، تگهای را در head سایت کپی کنید و مستقر کنید. بدون نیاز به ابزار طراحی.
- تولید آیکونهای PWA برای یک برنامه وب پیشرو. آیکونهای PNG 192×192 و 512×512 برای manifest.json مورد نیاز هستند. آنها را در کنار بقیه مجموعه فاوآیکون در یک مرحله تولید کنید به جای تغییر اندازه دستی لوگو.
- ایجاد جایگذار برای نمونههای اولیه و سایتهای مرحلهبندی. یک حرف یا ایموجی تایپ کنید، یک رنگ پسزمینه انتخاب کنید، و بدون انتظار برای داراییهای نهایی برند از تیم طراحی، فاوآیکونهای واقعی دریافت کنید.
یک مثال عملی: تولید مجموعه فاوآیکون از لوگوی شرکت
شما یک لوگوی PNG 500×500 پیکسل دارید و برای یک سایت بازاریابی جدید به مجموعه کامل فاوآیکون نیاز دارید.
این صفحه را باز کنید و لوگوی PNG را در منطقه آپلود بیندازید. تصویر بارگذاری میشود و یک پیشنمایش در کنار شبکه اندازهها ظاهر میشود. روی تولید فاوآیکون کلیک کنید. صفحه لوگو را روی شش بوم خارج از صفحه در 16، 32، 48، 180، 192 و 512 پیکسل میکشد و هر نتیجه را به شما نشان میدهد. در زیر پنل پیشنمایش، بلوک HTML آماده برای کپی با ورودیهای rel="icon" برای اندازههای 16/32/48، یک پیوند apple-touch-icon برای اندازه 180 و یک پیوند manifest برای آیکونهای PWA ظاهر میشود. قطعه manifest در زیر آیکونهای 192 و 512 را فهرست میکند. روی دانلود ZIP کلیک کنید — صفحه تمام شش PNG را به همراه manifest.json از طریق fflate در یک بایگانی ZIP بستهبندی میکند. کل این فرآیند دو ثانیه طول میکشد و هیچ پهنای باندی فراتر از بارگذاری اولیه صفحه مصرف نمیکند.
این ابزار چه اندازههای فاوآیکونی تولید میکند؟
شش اندازه: 16×16، 32×32 و 48×48 برای فاوآیکون استاندارد مرورگر، 180×180 برای آیکون Apple Touch، و 192×192 و 512×512 برای آیکونهای بیانیه PWA. هر اندازه به صورت PNG خروجی میشود. مرورگرهای مدرن PNG را از طریق میپذیرند.
آیا میتوانم از متن یا ایموجی فاوآیکون تولید کنم؟
بله. به حالت متن یا ایموجی بروید، یک کلمه تایپ کنید یا یک ایموجی بچسبانید، یک فونت، رنگ جلو و رنگ پسزمینه انتخاب کنید و روی تولید کلیک کنید. متن روی یک بوم خارج از صفحه با وضوح بالا رندر میشود و سپس به هر اندازه فاوآیکون هدف تغییر اندازه مییابد.
آیا تصویر به سرور آپلود میشود؟
خیر. تصویر هرگز دستگاه شما را ترک نمیکند. صفحه از File API مرورگر برای خواندن تصویر در حافظه و از Canvas API برای تغییر اندازه و خروجی هر فاوآیکون استفاده میکند. در حین تولید، پنل DevTools Network را باز کنید — تنها درخواستهای خروجی بارگذاری اولیه صفحه و تماسهای تبلیغاتی هستند. هیچ داده تصویری منتقل نمیشود.
چه فرمتهایی برای آپلود تصویر پذیرفته میشوند؟
هر فرمتی که مرورگر بتواند رمزگشایی کند: PNG، JPEG، WebP، GIF و SVG (توسط مرورگر به رستر تبدیل میشود). محدودیت حجم فایل 10 مگابایت برای هر آپلود است.
دانلود ZIP چگونه کار میکند؟
صفحه از کتابخانه fflate (در صورت نیاز از مسیر اشتراکی وندور بارگذاری میشود) برای بستهبندی تمام PNGهای تولید شده به همراه manifest.json در یک بایگانی ZIP استاندارد استفاده میکند. بستهبندی کاملاً در حافظه مرورگر انجام میشود — بدون آپلود، بدون رفت و برگشت به سرور. ZIP به صورت دانلود Blob با یک کلیک ارائه میشود.
آیا میتوانم از این فاوآیکونها در هر وبسایتی استفاده کنم؟
بله. فاوآیکونهای PNG تولید شده در هر مرورگر مدرنی که از تگ پشتیبانی میکند کار میکنند. آیکون Apple Touch 180×180 iOS و Safari را پوشش میدهد. آیکونهای PWA 192×192 و 512×512 نیازهای بیانیه را برای Chrome در Android و سایر مرورگرهای پشتیبانیکننده PWA برآورده میکنند.
آیا گزینه فرمت واقعی .ico وجود دارد؟
نسخه فعلی PNG خروجی میدهد زیرا همه مرورگرهای مدرن آنها را از طریق میپذیرند. فرمت واقعی چند وضوحه .ico هنوز پشتیبانی نمیشود و ممکن است در نسخه آینده اضافه شود.