ویب سائٹ کے لیے فیو آئیکنز اور سائٹ آئیکنز کی اہمیت
ایک پیشہ ور ویب سائٹ کے لیے فیو آئیکن (Favicon) اور سائٹ آئیکنز انتہائی اہم کردار ادا کرتے ہیں۔ یہ چھوٹے گرافکس براؤزر کے ٹیبز، بک مارکس، موبائل ہوم اسکرینز اور پروگریسو ویب ایپس (PWAs) میں آپ کی برانڈ شناخت کو واضح کرتے ہیں۔ جب کوئی صارف متعدد ٹیبز کھولتا ہے، تو صرف فیو آئیکن ہی اسے آپ کی ویب سائٹ کو فوری طور پر پہچاننے میں مدد دیتا ہے۔ اس کے علاوہ، جدید موبائل آپریٹنگ سسٹمز جیسے کہ iOS اور Android، ویب سائٹس کو ہوم اسکرین پر محفوظ کرنے کی سہولت دیتے ہیں، جہاں ایک مناسب سائز کا آئیکن ویب سائٹ کو ایک مقامی ایپ (Native App) جیسا لک فراہم کرتا ہے۔
مختلف آلات اور پلیٹ فارمز کے لیے آئیکنز کی اقسام
مختلف آلات اور براؤزرز کو اپنی اسکرین کی کثافت اور انٹرفیس کے مطابق الگ الگ سائز کے آئیکنز کی ضرورت ہوتی ہے:
- براؤزر ٹیب آئیکنز: روایتی طور پر براؤزر کے ٹیبز میں 16 × 16 اور 32 × 32 پکسلز کے آئیکنز استعمال ہوتے ہیں۔
- Apple Touch Icons: آئی فون اور آئی پیڈ کی ہوم اسکرینز کے لیے 180 × 180 پکسلز کا آئیکن استعمال ہوتا ہے۔
- PWA اور اینڈرائیڈ آئیکنز: اینڈرائیڈ آلات اور انسٹال شدہ ویب ایپس کے لیے 192 × 192 اور 512 × 512 پکسلز کے بڑے آئیکنز کی ضرورت ہوتی ہے تاکہ وہ ہائی ریزولوشن اسکرینز پر واضح نظر آئیں۔
یہ ٹول ان تمام ضروری سائزز کو ایک ہی بار میں تیار کر کے ایک ZIP فائل میں پیک کر دیتا ہے۔
اصل تصویر کے انتخاب کے لیے بہترین طریقے
بہترین کوالٹی کے آئیکنز حاصل کرنے کے لیے اصل تصویر کا انتخاب کرتے وقت درج ذیل اصولوں کو مدنظر رکھنا ضروری ہے:
- ویکٹر فارمیٹ (SVG): اگر آپ کے پاس لوگو SVG فارمیٹ میں ہے، تو یہ سب سے بہترین انتخاب ہے۔ چونکہ SVG ایک ویکٹر فارمیٹ ہے، اس لیے اس سے تیار کردہ ہر سائز کا آئیکن (چاہے وہ 16 پکسل کا ہو یا 512 پکسل کا) بالکل واضح اور تیز کناروں کے ساتھ بنتا ہے، اور ویکٹر فائل خود بھی آئیکن پیک میں شامل ہو جاتی ہے۔
- راسٹر فارمیٹ (PNG یا JPG): اگر آپ PNG یا JPG تصویر استعمال کر رہے ہیں، تو اس کا سائز کم از کم 512 × 512 پکسلز ہونا چاہیے۔ اگر اصل تصویر اس سے چھوٹی ہوگی، تو بڑے آئیکنز بنانے کے لیے اسے اپ اسکیل (upscale) کرنا پڑے گا جس سے وہ دھندلے نظر آ سکتے ہیں۔ ٹول میں فائل اپ لوڈ کرنے کی حد 50 MB تک ہے۔
غیر چوکور تصاویر اور پس منظر کے اختیارات کی ترتیبات
تمام معیاری آئیکنز ہمیشہ چوکور (Square) ہوتے ہیں۔ اگر آپ کی اصل تصویر چوکور نہیں ہے، تو یہ ٹول اسے کھینچنے (stretch) کے بجائے دو طریقوں سے ایڈجسٹ کرتا ہے:
- فٹ کریں (پیڈنگ): یہ ڈیفالٹ آپشن ہے۔ اس میں آپ کی پوری تصویر نظر آتی ہے، جو چوکور فریم کے مرکز میں رکھ دی جاتی ہے اور اس کے ارد گرد خالی جگہ (پیڈنگ) چھوڑ دی جاتی ہے۔
- بھریں (کراپ کریں): اس آپشن میں تصویر چوکور حصے کو مکمل طور پر بھر دیتی ہے اور باہر نکلنے والے کناروں کو کاٹ دیا جاتا ہے۔
پس منظر کے لیے آپ کے پاس دو اہم اختیارات ہیں:
- شفاف (Transparent): یہ ڈیفالٹ ترتیب ہے اور براؤزر ٹیبز کے لیے بہترین ہے۔
- رنگین پس منظر: آپ اپنی پسند کا پس منظر کا رنگ منتخب کر سکتے ہیں۔ آئی فون اور آئی پیڈ کی ہوم اسکرینز شفاف حصوں کو کالا کر دیتی ہیں، اس لیے ایپل آلات کے لیے پس منظر کا رنگ منتخب کرنا زیادہ محفوظ رہتا ہے۔
آئیکن پیک کی فائلیں اور ان کا کردار
جب آپ آئیکنز تیار کرتے ہیں، تو آپ کو ایک ZIP فائل ملتی ہے جس میں درج ذیل فائلیں شامل ہوتی ہیں:
| فائل کا نام | سائز / فارمیٹ | استعمال اور کردار |
|---|---|---|
favicon.ico |
16, 32, 48 px | کلاسک براؤزر ٹیب آئیکن |
PNG icons |
16, 32 px | ٹیب آئیکن (PNG) |
PNG icon |
180 px | آئی فون اور آئی پیڈ ہوم اسکرین (Apple Touch Icon) |
PNG icons |
192, 512 px | اینڈرائیڈ اور انسٹال شدہ ویب ایپس |
site.webmanifest |
ٹیکسٹ فائل | آلات کو بتاتا ہے کہ بڑے آئیکنز کہاں ہیں |
Vector |
SVG (اگر اصل فائل SVG ہو) | جدید براؤزرز کے لیے لامحدود اسکیل ایبل آئیکن |
site.webmanifest ایک چھوٹی ٹیکسٹ فائل ہے جو جدید براؤزرز اور موبائل آپریٹنگ سسٹمز کو آپ کی ویب سائٹ کے بڑے آئیکنز اور ان کے سائزز کے بارے میں معلومات فراہم کرتی ہے تاکہ وہ درست آئیکن لوڈ کر سکیں۔
ویب سائٹ پر آئیکنز انسٹال کرنے کا طریقہ
تیار کردہ آئیکنز کو اپنی ویب سائٹ پر لاگو کرنے کا طریقہ کار انتہائی سادہ ہے:
- ٹول سے تیار کردہ ZIP فائل ڈاؤن لوڈ کریں اور اسے ان زپ کریں۔
- ان تمام فائلوں کو اپنی ویب سائٹ کے روٹ فولڈر (Root Folder) میں اپ لوڈ کریں، تاکہ
favicon.icoفائل تک براہ راست/favicon.icoکے ذریعے رسائی حاصل کی جا سکے۔ - ٹول کے ذریعے فراہم کردہ HTML کوڈ کاپی کریں اور اسے اپنی ویب سائٹ کے ہر صفحے کے
<head>سیکشن میں پیسٹ کر دیں۔ براؤزر خود بخود صارف کے آلے کے مطابق صحیح سائز کا انتخاب کر لیں گے۔
رازداری اور ڈیٹا پروسیسنگ کی معلومات
اس ٹول کو استعمال کرتے وقت آپ کی رازداری مکمل طور پر برقرار رہتی ہے۔ آپ کی تصویر کو آپ کے براؤزر میں ہی آئیکنز میں تبدیل کیا جاتا ہے۔ BroBroGo پر کچھ بھی اپ لوڈ نہیں کیا جاتا، جس کا مطلب ہے کہ آپ کا ڈیٹا آپ کے اپنے کمپیوٹر یا موبائل سے باہر نہیں جاتا۔
اکثر پوچھے جانے والے سوالات (FAQ)
آئیکن پیک میں کون سی فائلیں ہوتی ہیں؟
اس میں 16، 32 اور 48 پکسل ورژن کے ساتھ favicon.ico، 16، 32، 180، 192 اور 512 پکسلز پر PNG آئیکنز، اور ایک site.webmanifest شامل ہے جو بڑے آئیکنز کی فہرست فراہم کرتا ہے۔ اگر آپ SVG سے شروع کرتے ہیں تو ویکٹر خود بھی شامل ہوتا ہے۔ ایک ہی ZIP میں سب کچھ مل جاتا ہے۔
میری اصل تصویر کا سائز کیا ہونا چاہیے؟
ایک SVG یا ویکٹر فائل مثالی ہے — ہر آئیکن ویکٹر سے تیار کیا جاتا ہے، اس لیے 16 پکسلز بھی بالکل واضح رہتے ہیں۔ PNG یا JPG کے لیے، کم از کم 512 × 512 سے شروع کریں؛ چھوٹی تصاویر کا سائز بڑھانے سے وہ دھندلی نظر آ سکتی ہیں۔
کیا پس منظر شفاف ہونا چاہیے یا رنگین؟
ٹیب آئیکنز شفاف پس منظر کے ساتھ اچھے لگتے ہیں۔ تاہم، آئی فون اور آئی پیڈ کی ہوم اسکرینز شفاف حصوں کو کالا کر دیتی ہیں — اگر لوگ آپ کی سائٹ کو اپنی ہوم اسکرین پر شامل کر سکتے ہیں، تو پس منظر کا رنگ منتخب کرنا بہتر ہے۔
اگر تصویر چوکور نہ ہو تو کیا ہوتا ہے؟
آئیکنز چوکور ہوتے ہیں، لیکن آپ کی تصویر کبھی کھینچی نہیں جاتی۔ ڈیفالٹ طور پر یہ ارد گرد پیڈنگ کے ساتھ مرکز میں ہوتی ہے؛ لمبے کناروں کو کاٹنے کے لیے "بھریں (کراپ کریں)" پر سوئچ کریں۔
میری سائٹ پر فائلیں کہاں جاتی ہیں؟
انہیں اپنی سائٹ کے روٹ فولڈر میں اپ لوڈ کریں، تاکہ favicon.ico تک /favicon.ico کے ذریعے رسائی حاصل کی جا سکے، پھر تیار کردہ لائنوں کو اپنے صفحات کے <head> میں پیسٹ کریں۔ براؤزر خود بخود صحیح سائز کا انتخاب کر لیتے ہیں۔