فیو آئیکن (favicon) کیسے بنائیں.

Favicon / ICO جنریٹر کھولیں اور تصویر منتخب کریں۔ ایک PNG، JPG، JPEG، WebP یا GIF اپ لوڈ کریں، یا 'Try a sample' منتخب کریں۔ اس عملی مثال میں favicon-orbit.png کا استعمال کیا گیا ہے، جو کہ شفاف کونوں کے ساتھ 512 × 512 پکسل کا ایک بنفشی مدار کا نشان ہے۔ ان پٹ 202,491 بائٹس ہے۔

اگر آپ کے برانڈ کا لوگو مکمل نہیں ہے، تو ٹول پیج پر 'متن' منتخب کریں۔ ایک یا دو حروف درج کریں اور 'جاری رکھیں' پر کلک کریں۔ ایڈیٹر میں 'Modern sans'، 'Classic serif' اور 'Monospace' فونٹس کے ساتھ ساتھ ٹیکسٹ اور بیک گراؤنڈ کے لیے الگ الگ رنگوں کی سہولت موجود ہے۔ زیادہ سے زیادہ تین حروف تک کی اجازت ہے، لیکن چھوٹے سائز میں اضافی حروف کو پہچاننا مشکل ہو سکتا ہے۔

اصل آرٹ ورک کو برقرار رکھیں۔ جنریٹر نئی آئیکن فائلیں تخلیق کرتا ہے اور سورس فائل کو اوور رائٹ نہیں کرتا ہے۔ GIF ان پٹ ایک متحرک فیوی آئیکن کے بجائے ایک ساکن آئیکن بن جاتا ہے۔

مونوگرام کے لیے، فونٹ مینو تین شامل اسٹائلز کے ساتھ شروع ہوتا ہے۔ ایک معاون ڈیسک ٹاپ براؤزر پر 'سسٹم فونٹس استعمال کریں' کو منتخب کریں اور اپنے آلے پر انسٹال کردہ فونٹس شامل کرنے کے لیے رسائی کی اجازت دیں۔ ملحقہ فونٹس کا موازنہ کرنے کے لیے پچھلے اور اگلے شیورونز (chevrons) کا استعمال کریں، یا کوئی فیملی منتخب کریں اور لائیو پیش نظارہ کا معائنہ کریں، خاص طور پر 16 پکسلز پر۔ فونٹس آپ کے آلے پر رہتے ہیں؛ شامل اسٹائلز بغیر اجازت کے کام کرتے ہیں۔

ایڈیٹر براؤزر کے ہلکے اور گہرے ٹیبز کے ساتھ ساتھ عام آئیکن سائز کے پیش نظارے بھی دکھاتا ہے۔ پہلے 16-پکسل والی مثال کو چیک کریں؛ یہ اس بات کا سب سے سخت امتحان ہے کہ آیا نشان قابل شناخت رہتا ہے یا نہیں۔ ایپل ٹچ پریویو ایک 180-پکسل ایکسپورٹ کی نمائندگی کرتا ہے اور ورک اسپیس میں چھوٹا دکھایا گیا ہے۔

فون پر، سیٹنگز کھولیں۔ Create from کو Uploaded image پر اور Image fit کو پوری تصویر دکھائیں پر رہنے دیں۔ اس نمونے کے لیے، Space around content کو 0 پر سیٹ کریں اور شفاف پس منظر کو فعال کریں۔ سورس میں پہلے سے ہی اس کی اپنی گول بنفشی شکل اور واضح حاشیے موجود ہیں، لہذا اسے کسی اضافی رنگین پس منظر کی ضرورت نہیں ہے۔

مختلف سورس کے ساتھ، 'تصویر مکمل دکھائیں' (Show the whole image) اس کے کناروں کو برقرار رکھتی ہے، جبکہ 'آئیکن بھریں' (Fill the icon) انہیں تراش سکتی ہے۔ گول مربع، مربع اور دائرہ بیرونی شکل کا تعین کرتے ہیں۔ شفاف پس منظر صاف حصوں کو محفوظ رکھتا ہے لیکن پہلے سے تصویر میں موجود غیر شفاف پس منظر کو ہٹا نہیں سکتا۔ ہر فریمنگ تبدیلی کے بعد سب سے چھوٹے پیش منظر (preview) کا جائزہ لیں۔

Download کے تحت، اس مثال کے لیے Website icon package (ZIP) منتخب کریں۔ نمونے کے لیے Website name کو My website پر چھوڑ دیں، یا اپنے پروجیکٹ کے لیے اسے اصلی برانڈ نام سے تبدیل کریں۔ یہ نام site.webmanifest میں استعمال ہوتا ہے؛ اسے تصویر پر متن کے طور پر شامل نہیں کیا جاتا۔

Start منتخب کریں۔ براؤزر favicon.ico کے سات فریم تیار کرتا ہے جن میں 16, 24, 32, 48, 64, 128 اور 256 پکسلز پر مربع تصاویر ہوتی ہیں۔ یہ PNG آئیکنز کو 16, 32, 48, 180, 192 اور 512 پکسلز پر، ایک مینی فیسٹ اور انسٹالیشن کی ہدایات بھی بناتا ہے۔ نتیجہ ہر آئیکن کے لیے الگ ڈاؤن لوڈ بٹن کے بجائے ایک ZIP فائل ہے۔

اگر آپ کو صرف ایک کلاسک favicon.ico کی ضرورت ہے، تو اس کے بجائے Multi-size ICO منتخب کریں۔ یہ تب مفید ہوتا ہے جب ویب سائٹ پلیٹ فارم ICO اپ لوڈ قبول کرتا ہو اور اسے الگ پیکیج کی ضرورت نہ ہو۔

ڈاؤن لوڈ website-icons.zip کو محفوظ کرتا ہے۔ اصل کام کی مثال نو فائلوں پر مشتمل ہے اور یہ 304,351 بائٹس کی ہے۔ اوپر دیا گیا موازنہ برآمد شدہ ICO سے نکالے گئے حقیقی 256-پکسل فریم کے ساتھ 512-پکسل سورس کو دکھاتا ہے، نہ کہ براؤزر کے نقلی اسکرین شاٹ کو۔

ZIP کو ایکسٹریکٹ کریں، آئیکن فائلیں اپنی ویب سائٹ روٹ میں اپ لوڈ کریں اور INSTALL.txt پڑھیں۔ اس میں ICO, PNG آئیکن، ایپل ٹچ آئیکن اور ویب مینی فیسٹ کے لیے HTML لنک ٹیگز شامل ہیں۔ اگر آپ فائلیں ذیلی فولڈر میں رکھتے ہیں، تو HTML کے راستوں اور site.webmanifest کے اندر آئیکن کے راستوں دونوں کو اپ ڈیٹ کریں۔

اپنی سائٹ کو ایک نئے براؤزر ٹیب میں اور ان ڈیوائسز پر چیک کریں جن کی آپ کو پرواہ ہے۔ براؤزرز فیویکونز کو کیش کر سکتے ہیں، اس لیے پرانا آئیکن فوری طور پر یہ ثابت نہیں کرتا کہ انسٹالیشن ناکام ہو گئی ہے۔ ایڈیٹر کو ریفریش کرنے سے پہلے سورس امیج اور ڈاؤن لوڈ کردہ پیکیج کو محفوظ رکھیں، کیونکہ ریفریش کرنے سے آپ مین ٹول پیج پر واپس آ جائیں گے۔