Apple টাচ আইকন গাইড

apple-touch-icon হল আপনার favicon.ico থেকে সম্পূর্ণ আলাদা সম্পদ। ব্রাউজার ট্যাবগুলি favicon.ico (বা আপনার লিঙ্ক করা PNG/SVG) ব্যবহার করে। iOS হোম-স্ক্রীন ইনস্টল apple-touch-icon ব্যবহার করে। একটি apple-touch-icon ছাড়া, Safari আপনার পৃষ্ঠার ভিউপোর্টের একটি কম-রেজোলিউশনের স্ক্রিনশট নেয় এবং সেটিকে হোম-স্ক্রীন আইকন হিসাবে ব্যবহার করে — একটি ঝাপসা, ব্র্যান্ড-মুক্ত ফলাফল যা নেটিভ অ্যাপের পাশে অপ্রফেশনাল দেখায়।

Apple 2007 সালে iOS 1.1.3-এ apple-touch-icon চালু করেছিল এবং তারপর থেকে আইফোন এবং আইপ্যাড স্ক্রীনের ঘনত্ব বৃদ্ধি পাওয়ায় সমর্থিত আকারগুলি বিবর্তিত হয়েছে। একটি একক সমস্ত-ডিভাইস ফাইলের জন্য বর্তমান সুপারিশ হল 180×180 পিক্সেল। এই আকারটি iPhone 6 Plus, iPhone X এবং পরবর্তী সমস্ত iPhone মডেলগুলিতে 60pt @3x ঘনত্বে প্রদর্শিত হয়। পুরানো মডেলগুলি (iPhone SE 1st gen, pre-Plus iPhones) 2x এ 120×120 ব্যবহার করে — iOS স্বয়ংক্রিয়ভাবে 180×180 ফাইলকে ফিট করার জন্য ডাউনস্কেল করে।

আইপ্যাড কভারেজের জন্য, Apple আইপ্যাড প্রো (3x) এর জন্য 167×167 এবং স্ট্যান্ডার্ড আইপ্যাডগুলির জন্য 152×152 সুপারিশ করে। অনুশীলনে, apple-touch-icon হিসাবে পরিবেশিত একটি একক 180×180 ফাইল এই সমস্ত ক্ষেত্রে গ্রহণযোগ্যভাবে কভার করে কারণ iOS উচ্চ-মানের বাইলিনিয়ার ফিল্টারিংয়ের সাথে ডাউনস্কেল করে। যদি iPad Pro-এ পিক্সেল-নিখুঁত তীক্ষ্ণতা অগ্রাধিকার হয়, তাহলে একটি অতিরিক্ত `<link rel='apple-touch-icon' sizes='167x167' href='/apple-touch-icon-167x167.png'>` ট্যাগ যোগ করুন।

apple-touch-icon-এর জন্য PNG ফর্ম্যাট বাধ্যতামূলক৷ iOS হোম-স্ক্রীন আইকনের জন্য .ico, JPEG, SVG, এবং GIF উপেক্ষা করে। সর্বদা একটি PNG-32 (আলফা চ্যানেল সহ) বা PNG-24 (স্বচ্ছতা ছাড়াই, যদি আপনার আইকনের একটি শক্ত পটভূমি থাকে) রপ্তানি করুন। স্বচ্ছতা সমর্থিত এবং সুপারিশ করা হয় — একটি স্বচ্ছ-ব্যাকগ্রাউন্ড আইকন iOS কে তার স্ট্যান্ডার্ড গোলাকার-কোণা এবং চকচকে প্রভাবগুলি পুরানো iOS সংস্করণগুলিতে প্রয়োগ করতে দেয়।

apple-touch-icon এর জন্য নিরাপদ মার্জিন গুরুত্বপূর্ণ। যদিও iOS আর পুরানো গ্লস ওভারলে প্রয়োগ করে না (iOS 7 এ সরানো হয়েছে), এটি আইকনটিকে একটি বৃত্তাকার আয়তক্ষেত্র আকারে ক্লিপ করে। আপনার মূল লোগোটি প্রায় 10% দ্বারা চারদিকে রাখুন যাতে গোলাকার কোণগুলি দ্বারা গুরুত্বপূর্ণ কিছুই ক্লিপ না হয়। একটি 180×180 ক্যানভাসের মধ্যে নিরাপদ এলাকাটি মোটামুটি 162×162 পিক্সেল।

আপনার ডোমেনের মূলে apple-touch-icon ফাইলটি স্থাপন করা গুরুত্বপূর্ণ৷ যদিও আপনি লিংক ট্যাগ href এর মাধ্যমে যেকোনো URL ব্যবহার করতে পারেন, iOS Safari এর কিছু সংস্করণ এবং কিছু Apple ক্রলার (স্পটলাইট সার্চ ইঞ্জিন ইন্টিগ্রেশনের জন্য) XXPH5X লিঙ্কটি না পড়ে সরাসরি রুট থেকে /apple-touch-icon.png বা /apple-touch-icon-precomposed.png আনার চেষ্টা করবে৷ ফাইলটিকে মূলে স্থাপন করা সর্বোত্তম সামঞ্জস্য প্রদান করে।

ট্যাগের `precomposed` ভেরিয়েন্ট — `<link rel='apple-touch-icon-precomposed'>` — পুরানো iOS সংস্করণগুলিকে আপনার আইকনে কোনও অতিরিক্ত ভিজ্যুয়াল এফেক্ট (গ্লস, গোলাকার কোণ, ড্রপ শ্যাডো) প্রয়োগ না করতে বলে৷ Apple iOS 7-এ এই প্রভাবগুলি সরিয়ে দিয়েছে, তাই 2026 সালে `apple-touch-icon` এবং `apple-touch-icon-প্রি-কম্পোজড` এর মধ্যে পার্থক্য আধুনিক iOS-এর জন্য অপ্রাসঙ্গিক। প্লেইন `apple-touch-icon` রিল মান ব্যবহার করুন।

একাধিক আকারের ঘোষণা একাধিক লিঙ্ক ট্যাগ ব্যবহার করে সমর্থিত। সমস্ত Apple ডিভাইস জুড়ে সর্বাধিক নির্ভুলতার জন্য, আপনি ঘোষণা করতে পারেন: `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon-180x180.png'>` iPhone 6 Plus এবং পরবর্তীতে, `<link rel='apple-touch-icon's'16's=16's=16 href='/apple-touch-icon-167x167.png'>` iPad Pro এর জন্য, এবং `<link rel='apple-touch-icon' sizes='152x152' href='/apple-touch-icon-152x152.png'>` পুরানো iPadগুলির জন্য৷ iOS সবচেয়ে কাছের ম্যাচ বেছে নেয়।

Apple ওয়াচ ওয়াচ অ্যাপ আইকনগুলির জন্য apple-touch-icon ব্যবহার করে না — যেগুলি নেটিভ অ্যাপ বান্ডেল থেকে আসে৷ যাইহোক, যদি কোন ব্যবহারকারী Apple ওয়াচ ব্রাউজার থেকে আপনার ওয়েবসাইটে নেভিগেট করে, Safari ওয়াচ বুকমার্ক তালিকায় apple-touch-icon প্রদর্শন করে। একই 180×180 PNG এখানে কোনো পরিবর্তন ছাড়াই কাজ করে।

Mac-এ macOS Safari ওয়েব অ্যাপ হিসেবে ডকে কোনও ওয়েবসাইট যোগ করার সময় apple-touch-icon ব্যবহার করে (macOS Sonoma এবং পরে Safari থেকে ওয়েব অ্যাপ হিসেবে ওয়েবসাইটগুলিকে পিন করার অনুমতি দেয়)। apple-touch-icon ডক আইকন হিসাবে ব্যবহৃত হয়। এটি apple-touch-icon কে শুধু মোবাইলের জন্য নয়, আধুনিক macOS-এ Mac ব্যবহারকারীদের জন্যও গুরুত্বপূর্ণ করে তোলে।

apple-touch-icon আপডেট করার সময়, iOS ব্যবহারকারীর ডিভাইসে পুরানো আইকনটি ক্যাশে করে এবং ব্যবহারকারী হোম-স্ক্রীন আইকনটি সরিয়ে পুনরায় যোগ না করলে বা Safari-এর ক্যাশে সাফ না করলে আপডেটের জন্য চেক করে না। এই ক্যাশে কোন সার্ভার-সাইড নিয়ন্ত্রণ নেই — এটি একটি ক্লায়েন্ট-সাইড iOS আচরণ। স্টেকহোল্ডারদের সাথে এটি যোগাযোগ করা একটি রিব্র্যান্ড কত দ্রুত বিদ্যমান হোম-স্ক্রীনে সংরক্ষণ করে তার জন্য প্রত্যাশা সেট করতে সহায়তা করে।

আপনার apple-touch-icon সঠিকভাবে পরীক্ষা করার জন্য একটি শারীরিক iOS ডিভাইস বা Xcode iOS সিমুলেটর প্রয়োজন৷ ডিভাইসে, Safari খুলুন, আপনার সাইটে নেভিগেট করুন, শেয়ার বোতামে আলতো চাপুন এবং 'হোম স্ক্রিনে যোগ করুন' নির্বাচন করুন৷ ডায়ালগের পূর্বরূপ আপনার apple-touch-icon দেখাতে হবে৷ যদি এটি পরিবর্তে একটি স্ক্রিনশট দেখায়, হয় ফাইলটি তার ঘোষিত URL এ অ্যাক্সেসযোগ্য নয় বা আপনার HTML থেকে লিঙ্ক ট্যাগটি অনুপস্থিত৷

favicon generator স্ট্যান্ডার্ড ফেভিকন প্যাকেজের অংশ হিসাবে 180×180 apple-touch-icon.png আউটপুট করে। তৈরি করার পরে, ফাইলটিকে আপনার সাইটের রুটে রাখুন এবং আপনার HTML `<head>`-এ লিঙ্ক ট্যাগ যোগ করুন। apple-touch-icon-এর পাশাপাশি সমস্ত আইকন আকারের সম্পূর্ণ গাইডের জন্য, favicon sizes explained রেফারেন্স দেখুন।