فیو آئیکنز بنائیں

ایک آئیکن نو فائلیں کیوں بن گیا

سیٹ کی ہر فائل اس لیے موجود ہے کہ کوئی خاص چیز اسے پڑھتی ہے اور کچھ اور نہیں پڑھتی۔ 16، 32 اور 48 والی favicon.ico اب بھی وہی ہے جسے براؤزر ڈیفالٹ طور پر سائٹ کے روٹ پر ڈھونڈتا ہے، اور بہت سا پرانا سافٹ ویئر سب سے پہلے اسی کو دیکھتا ہے۔ favicon-16x16.png اور favicon-32x32.png وہ ہیں جنہیں موجودہ براؤزر ٹیب کے لیے ترجیح دیتے ہیں، کیونکہ بالکل درست سائز کی PNG اسکیلنگ سے بہتر ہے۔ 180 پکسل کی apple-touch-icon.png وہ ہے جو iOS ہوم اسکرین پر لگاتا ہے — اس میں ٹرانسپیرنسی کی سپورٹ نہیں، اس لیے اسے کالے کونوں کے ساتھ آنے کے بجائے ٹھوس بیک گراؤنڈ پر جوڑا جاتا ہے۔ android-chrome-192x192.png اور 512x512.png وہ ہیں جنہیں انسٹال شدہ پروگریسو ویب ایپ اپنے لانچر آئیکن اور اسپلیش اسکرین کے لیے استعمال کرتی ہے، اور یہ site.webmanifest میں درج ہوتی ہیں۔

ان سب کے لیے ایک بڑی PNG دینا ہر جگہ برا کام کرتا ہے، اور یہی سب سے عام شارٹ کٹ ہے۔ براؤزر سولہ پکسل بنانے کے لیے آدھا میگا بائٹ ڈاؤن لوڈ کرتا ہے، iOS ٹرانسپیرنسی کے اصول نظر انداز کر کے آپ کا لوگو کالے مربع پر رکھ دیتا ہے، اور لانچر آئیکن پلیٹ فارم کے لگائے گئے ماسک سے کٹ جاتا ہے۔ سیٹ اسی لیے تھکا دینے والا ہے کہ ہر استعمال کرنے والا اپنی الگ شرط رکھتا ہے۔

HTML اسنیپٹ تصاویر جتنا ہی اہم ہے۔ براؤزرز ان میں سے زیادہ تر فائلیں خود نہیں ڈھونڈتے — صرف روٹ پر موجود favicon.ico روایت کے مطابق مل جاتی ہے — اس لیے link ٹیگز ہی انہیں جوڑتے ہیں، اور manifest کو اپنا الگ ٹیگ چاہیے۔ اسنیپٹ روٹ ریلیٹو پاتھس استعمال کرتا ہے، جو تب تک بغیر تبدیلی کے کام کرتے ہیں جب تک فائلیں ویب روٹ میں ہوں؛ اگر آپ انہیں کسی سب فولڈر میں رکھیں تو اسنیپٹ اور manifest دونوں کے پاتھس بدلنے ہوں گے۔

پہلے 16 پکسل کے لیے ڈیزائن کریں۔ اس سائز پر ایک شکل اور شاید دو رنگوں کی گنجائش ہوتی ہے — نہ ٹیکسٹ، نہ گریڈیئنٹ، نہ باریک تفصیل، اور پورا ورڈ مارک تو بالکل نہیں۔ کم از کم 512 پکسل کی مربع، نمایاں اور ہائی کنٹراسٹ سورس، یا SVG، سب سے صاف سیٹ دیتی ہے؛ پیش نظارہ 16px والی شکل خوشامد کے بجائے ایمانداری سے دکھاتا ہے، کیونکہ بعد میں مایوس یہی کرے گی۔ غیر مربع سورس کو کراپ کرنے یا کھینچنے کے بجائے ٹرانسپیرنسی سے بھر کر مربع بنایا جاتا ہے۔

جب آپ کو کچھ اور چاہیے

یہاں بننے والا سیٹ عملی جدید بنیادی حصہ ہے۔ اگر آپ کو پوری لمبی فہرست چاہیے — Windows ٹائل تصاویر، Safari کا pinned-tab ماسک آئیکن، Microsoft browserconfig، Apple کے پرانے سائز — تو RealFaviconGenerator یہ سب دیتا ہے اور بعد میں آپ کی لائیو سائٹ بھی جانچتا ہے، جو واقعی کارآمد کام ہے اور یہ ٹول نہیں کر سکتا۔

بلڈ پائپ لائن کے لیے آئیکنز ہاتھ سے بنانا سرے سے غلط طریقہ ہے۔ favicons، pwa-asset-generator اور sharp پر بنے فریم ورک پلگ انز ہر ڈیپلائے پر ایک سورس فائل سے پورا سیٹ بناتے ہیں، اس لیے لوگو بدلنے پر آئیکنز پرانے نہیں رہ سکتے — اور عملاً ہمیشہ یہی ہوتا ہے۔