معظم النصائح المفضلة هي قائمة تضم عشرات أحجام PNG المنسوخة من مولد تمت كتابته في عام 2014. معظم هذه الأحجام لم تعد تفعل أي شيء. ما يحتاجه الموقع اليوم قصير: واحد favicon.ico بالنسبة للمتصفحات والأدوات التي لا تزال تبحث عنها، رمز واحد قابل للتطوير أو عالي الدقة لكل شيء حديث، وأيقونة لمس واحدة للهواتف. الجزء الذي يعرقل الأشخاص هو .ico نفسه، لأنه ليس صورة ذات امتداد غريب. إنها حاوية صغيرة تحتوي على عدة صور.
يغطي هذا الدليل كيفية إنشاء ملف ICO، والأحجام التي تنتمي إلى الأيقونة المفضلة.ico ولماذا، وملفات الأيقونات الأخرى التي يحتاجها الموقع بجانبه، والأخطاء التي تجعل الأيقونة تبدو ناعمة أو غير قابلة للقراءة في علامة تبويب المتصفح. يقع تحت محور أدوات الصورة، وكل حجم مقتبس لمحول Toolz يأتي من كود المصدر الخاص به.
ليرة تركية؛DR: ملف ICO عبارة عن حاوية: دليل قصير متبوعًا بعدة صور مربعة، واحدة لكل حجم، يختار المتصفح أو نظام التشغيل منها أقرب تطابق. للحصول على أيقونة مفضلة.ico، قم بتضمين 16 و32 و48 بكسل، وأضف 256 بكسل إذا كان نفس الملف يتضاعف كرمز Windows. يمكن أن يحتوي كل إدخال على 256 x 256 بكسل على الأكثر. إلى جانبه، أعلن عن رمز SVG أو PNG كبير و180 x 180
apple-touch-icon. ال محول PNG إلى ICO يكتب إدخالات 16 و32 و48 و256 بكسل كـ PNG بشفافية، من جانب العميل، لم يتم تحميل أي شيء، مجانًا، بدون تسجيل.
ما هو ملف ICO؟
ملف ICO هو تنسيق رمز Windows: رأس ودليل يسرد كل صورة بداخله وبيانات الصورة لكل إدخال. قامت Microsoft بتوثيق التخطيط في مكانها المادة الفنية للأيقونات، وقد كان تنسيق برنامج Windows وأيقونات الاختصار والمجلدات منذ الإصدارات الأولى من Windows. اعتمدته المتصفحات للأيقونات المفضلة في أواخر التسعينيات، ولهذا السبب لا يزال الملف الموجود على معظم مواقع الويب يسمى favicon.ico.
الدليل هو ما يجعله مختلفًا عن PNG أو JPG. البرنامج الذي يحتاج إلى رمز بدقة 16 بكسل يقرأ الدليل، ويجد الإدخال الأقرب إلى 16، ويرسم ذلك. يمكن لكل علامة تبويب وقائمة إشارات مرجعية وزر شريط المهام واختصار سطح المكتب التقاط صورة مختلفة من نفس الملف. يتيح ذلك للمصمم توفير علامة مبسطة للأحجام الصغيرة وعلامة مفصلة للأحجام الكبيرة، بدلاً من السماح بقياس صورة واحدة في كل مكان.
يمر التنسيق بنوعين من الوسائط. قوائم IANA image/vnd.microsoft.icon، بينما تستخدم معظم الخوادم والمتصفحات الأقدم image/x-icon. كلاهما يعمل لصالح أيقونة مفضلة.
كيف يتم تنظيم ملف ICO؟
يبدأ ملف ICO برأس 6 بايت، متبوعًا بإدخال دليل واحد 16 بايت لكل صورة، متبوعًا ببيانات الصورة. جميع الأرقام ذات نهاية صغيرة.
ICONDIR (6 bytes)
reserved 2 bytes always 0
type 2 bytes 1 = icon (2 = cursor)
count 2 bytes number of images
ICONDIRENTRY (16 bytes, repeated count times)
width 1 byte pixels; 0 means 256
height 1 byte pixels; 0 means 256
colorCount 1 byte palette size; 0 when there is no palette
reserved 1 byte 0
planes 2 bytes 1
bitCount 2 bytes bits per pixel, e.g. 32
bytesInRes 4 bytes size of this image's data
imageOffset 4 bytes where this image's data starts in the file
Image data (one block per entry)
either a BMP-style DIB (without the file header)
or a complete PNG file
هناك تفصيلان في هذا التخطيط يشرحان معظم الأشياء المربكة حول الرموز.
السقف 256 بكسل يأتي من بايت واحد. يتم تخزين كل من العرض والارتفاع في بايت واحد، والذي يمكن أن يحمل من 0 إلى 255. يعيد التنسيق استخدام 0 ليعني 256، ولا توجد طريقة للتعبير عن أي شيء أكبر. لا يمكن أن يوجد إدخال 512 x 512 في ICO صالح، مهما ادعى المولد.
يمكن أن تكون الإدخالات PNG. قامت الرموز المبكرة بتخزين كل صورة كصورة نقطية غير مضغوطة باستخدام قناع شفافية منفصل 1 بت. منذ نظام التشغيل Windows Vista، يمكن للإدخال بدلاً من ذلك أن يحتوي على ملف PNG كامل، وهو أصغر بكثير بأحجام كبيرة ويحمل قناة ألفا مناسبة. يبلغ حجم الرمز 256 x 256 المخزن كصورة نقطية غير مضغوطة بحجم 32 بت حوالي 256 كيلو بايت؛ عادةً ما تكون نفس الصورة مثل PNG جزءًا صغيرًا من ذلك.
يقوم محول Toolz بكتابة المتغير الحديث. يقوم منشئ ICO الخاص به بتعيين النوع 1، وإدخال دليل واحد لكل حجم مع المستويين 1 و32 بت لكل بكسل، ويكتب 256 كـ 0، ويخزن كل إدخال كـ PNG بقناة ألفا الخاصة به. يتم رفض طلب الحجم الخارجي من 1 إلى 256 قبل كتابة أي شيء، لأن الدليل ليس لديه طريقة لتسجيله.
ما هو الحجم الذي يجب أن يكون عليه الأيقونة المفضلة؟
يجب أن يحتوي الرمز المفضل.ico على 16 x 16 و32 x 32 و48 x 48 صورة وصورة 256 x 256 إذا كنت تريد أيضًا أن يعمل الملف كرمز Windows. خارج نطاق ico، تفضل المتصفحات الحديثة SVG أو PNG كبير معلن بعلامة ارتباط، وتستخدم الهواتف رمز لمس منفصل.
يقوم هذا الجدول بتعيين كل حجم إلى مكان استخدامه. يختلف السلوك الدقيق باختلاف المتصفح ونظام التشغيل وقياس العرض، لذا تعامل معه كحالة شائعة
| مقاس | حيث يظهر | مطلوب في favicon.ico؟ |
|---|---|---|
| 16 x 16 | علامات تبويب المتصفح وشريط العناوين والإشارات المرجعية على شاشات العرض القياسية | نعم |
| 32 x 32 | علامات التبويب على شاشات العرض عالية الكثافة وشريط مهام Windows والاختصارات | نعم |
| 48 x 48 | اختصارات سطح مكتب Windows، وعروض الأيقونات المتوسطة؛ يوصي بحث Google بالذهاب إلى أكبر من هذا | نعم |
| 256 x 256 | Windows طرق عرض أيقونات كبيرة وكبيرة جدًا | فقط إذا تم استخدامه كرمز Windows |
| 180 x 180 | شاشة ايفون و ايباد الرئيسية (apple-touch-icon) |
لا، بابوا غينيا الجديدة منفصلة |
| 192 x 192 | الشاشة الرئيسية لنظام Android، بيان تطبيق الويب | لا، بابوا غينيا الجديدة منفصلة |
| 512 س 512 | شاشات بيان تطبيق الويب وتثبيته ورشه | لا، لا يمكن أن تتناسب مع ICO |
| أي (SVG) | المتصفحات الحديثة التي تدعم أيقونات SVG، بما في ذلك متغيرات الوضع المظلم | لا، SVG منفصلة |
على نتائج البحث، إرشادات Google'؛s المفضلة اطلب رمزًا مربعًا وأوصي برمز أكبر من 48 x 48 بكسل، وسيجلبه Google من الرمز المعلن في صفحتك الرئيسية. يعد .ico الذي يصل إلى 16 بكسل سببًا شائعًا لأن أيقونة الموقع '؛ تبدو ضبابية بجوار نتيجة البحث الخاصة بها.
ما هي ملفات الأيقونة المفضلة التي يحتاجها الموقع؟
يحتاج الموقع إلى ثلاثة ملفات أيقونات وإدخال بيان واحد لتغطية كل متصفح وجهاز رئيسي. أكثر من ذلك هو دائمًا بقايا الطعام.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
كل سطر له وظيفة:
favicon.icoهو الاحتياطي. ال معيار WHATWG HTML يتيح للمتصفحات الطلب/favicon.icoمن جذر الموقع عندما تعلن الصفحة عدم وجود رمز على الإطلاق، ولا تزال برامج قراءة RSS وبرامج الزحف والأدوات القديمة تفعل ذلك. احتفظ بالملف في الجذر حتى لو قمت بالإعلان عن أيقونات أخرى.icon.svgهو الرمز الحاد للمتصفحات التي تدعم أيقونات SVG المفضلة. يتم قياسه إلى أي كثافة ويمكن أن يتضمن أprefers-color-schemeاستعلام الوسائط حتى يتكيف الرمز مع علامات التبويب المظلمة. لا يكرمه كل متصفح، ولهذا السبب يبقى .ico.apple-touch-icon.png180 x 180 هو ما يستخدمه iOS عندما يضيف شخص ما موقعك إلى الشاشة الرئيسية. امنحه خلفية غير شفافة، نظرًا لأن iOS لا يحتفظ بالشفافية على أيقونات الشاشة الرئيسية.- أيقونات البيان في 192 و512 هي ما تستخدمه المتصفحات المستندة إلى Android وChromium عند تثبيت موقع كتطبيق، كما هو موضح في بيان تطبيق الويب W3C.
ال sizes السمة الموجودة على رابط .ico مهمة بطريقة واحدة. عندما يرى المتصفح SVG وحجم .ico، يمكنه معرفة أن SVG هو الاختيار القابل للتطوير. تستخدم بعض الإعدادات sizes="any" بدلاً من ذلك، استجابت بعض إصدارات Chrome باختيار .ico فوق SVG. حجم معين يتجنب ذلك.
لماذا يبدو الرمز المفضل الخاص بي ضبابيًا أو خاطئًا؟
معظم مشاكل الأيقونة المفضلة تأتي من الصورة المصدر، وليس من التنسيق. يقوم ICO بتخزين كل ما يتم تقديمه في كل حجم، ويمكن أن يسير القياس بشكل جيد في اتجاه واحد فقط.
| أعراض | سبب | يثبت |
|---|---|---|
| دخول ناعم ومبقع 256 بكسل | المصدر أصغر من 256 بكسل، لذلك تم تمديده | ابدأ من تصدير 512 x 512 أو أكبر |
| الشعار مهروس أو ممتد | مصدر غير مربع ممتد إلى مربع | قم بالقص أو الوسادة إلى المربع قبل التحويل |
| العلامة النصية غير قابلة للقراءة في علامة التبويب | النص المرسوم بـ 16 بكسل يبلغ طوله بكسلين | استخدم الرمز وحده لـ 16 و32 بكسل |
| يختفي المخطط الرفيع | ضربات أقل من 1 بيكسل بأحجام صغيرة | ضربات سميكة في البديل صغير الحجم |
| صندوق أبيض حول الأيقونة | مصدر JPG ليس لديه شفافية | استخدم PNG مع قناة ألفا |
| الأيقونة القديمة تستمر في الظهور | تقوم المتصفحات بتخزين الرموز المفضلة بقوة | أعد تسمية الملف أو أضف سلسلة استعلام، ثم قم بالتحديث الثابت |
| لا يوجد رمز في نتائج جوجل | أيقونة أقل من 48 بكسل، محظورة بواسطة robots.txt، أو غير موجودة على الصفحة الرئيسية | قم بتقديم رمز أكبر من الصفحة الرئيسية واسمح بالزحف |
الصف الأول يستحق التوضيح، لأنه يجذب المصممين ذوي الخبرة أيضًا. ينتج مصدر 64 بكسل تم تحويله باستخدام علامة 256 إدخال 256 بكسل وهو صورة 64 بكسل مكبرة أربع مرات. إنه بالضبط الإدخال الذي تظهره طرق عرض Windows عالية الكثافة والاختصارات الكبيرة. إن تقليص الحجم من مصدر كبير هو الاتجاه الذي يبدو جيدًا.
الصف الثالث مسألة حسابية. أيقونة 16 x 16 تحتوي على 256 بكسل في المجموع. العلامة النصية المكونة من خمسة أحرف المضغوطة بهذا العرض تحصل على حوالي ثلاثة بكسلات لكل حرف، والتحويل المضاد يحولها إلى لطخات رمادية. يستخدم كل موقع معروف تقريبًا حرفًا أو رمزًا واحدًا للأيقونة المفضلة الخاصة به لهذا السبب.
كيف يمكنني صنع أيقونة مفضلة.ico من بابوا غينيا الجديدة؟
قم بتصدير PNG مربع لا يقل عن 512 x 512 بكسل بخلفية شفافة، وقم بتحويله إلى ICO بالأحجام التي تحتاجها، وتحقق من إدخال 16 بكسل بالحجم الحقيقي قبل النشر.
باستخدام محول PNG إلى ICO على تولز:
- إسقاط بابوا غينيا الجديدة. يمكن للعديد منهم الدخول مرة واحدة؛ يصبح كل منها .ico خاصًا به.
- اختر أحجام الأيقونات. تم وضع علامة على جميع المربعات الأربعة، 16 و32 و48 و256 بكسل، للبدء. للحصول على أيقونة مفضلة خالصة، قم بفك 256 لجعل الملف أخف بكثير، نظرًا لأن الإدخال 256 هو معظم وزنه. إذا قمت بفك جميع العناصر الأربعة، فسيعود المحول إلى كتابة الأربعة بدلاً من إنتاج رمز فارغ.
- اضغط على تحويل إلى ICO. مربع 512 x 512
logo.pngيعود كماlogo.icoمع الملاحظة والاقتباس؛ يحتوي على 16، 32، 48، 256 أيقونة px."؛ - قم بتنزيل الملف، أو خذ دفعة كـ
converted-ico.zip.
يقوم المحول برسم صورتك على لوحة قماشية بكل حجم، ويقوم بتشفير كل مربع على شكل PNG، ويجمعها الأصغر أولاً في .ico واحد، كل جانب العميل، لذلك لا يغادر العمل الفني الجهاز أبدًا. يتم الاحتفاظ بالشفافية في كل حجم. يتم تمديد مصدر غير مربع لملء كل مربع بدلاً من اقتصاصه، وتقول الملاحظة ذلك: قم بإسقاط علامة نصية مقاس 1024 x 256 وذكرت أن الصورة كانت مقاس 1024x256 وتم تمديدها إلى مربعات بالأحجام التي اخترتها. هذه الملاحظة هي إشارة لك للقص أو الوسادة أولاً.
للحصول على أفضل نتيجة بأحجام صغيرة، قم بإنشاء اثنين من PNGs: رمز مفصل لـ 48 و256 بكسل ورمز مبسط لـ 16 و32 بكسل. قم بتحويل كل منها مع تحديد أحجامها فقط. يكتب المحول مصدرًا واحدًا لكل ملف، وبالتالي فإن أسلوب الصورتين يمنحك ملفين .ico؛ استخدم المبسط كـ favicon.ico، نظرًا لأن المتصفحات تختار في الغالب الإدخالات الصغيرة والإدخالات التفصيلية لتطبيق Windows أو أيقونات الاختصار.
هل يمكنني إجراء ICO من JPG أو SVG؟
نعم لكليهما، مع تحذير لكل منهما.
يعمل JPG، ولكن كل إدخال رمز يخرج كمربع مملوء بدون شفافية، لأن JPEG لا يحتوي على قناة ألفا ولا يمكن لأي محول استردادها. ال محول JPG إلى ICO يعيد تشكيل الصورة إلى نفس المربعات 16 و32 و48 و256 بكسل. تفقد الصور أيضًا كل التفاصيل تقريبًا عند 16 بكسل، لذا قم بالقص بإحكام حول موضوع واحد عالي التباين واجعل مربع الاقتصاص قبل التحويل. يتم ضغط صورة الهاتف 4032 x 3024 المحولة كما هي أفقيًا، وتخبرك الملاحظة بذلك.
يعد SVG أفضل مصدر ممكن، نظرًا لأنه لا يحتوي على دقة ثابتة ويجعله حادًا عند كل حجم إدخال. يعتمد المسار على مقدار التحكم الذي تريده. ال محول SVG إلى PNG يعرض SVG إلى PNG يمكنك فحصه وتحريره أولاً؛ يتم رسم أي SVG يكون جانبه الأطول أقل من 512 بكسل عند 512، لذا فإن أيقونة 24 x 24 SVG لا تزال توفر مصدرًا نظيفًا للإدخال 256. أو قم بإسقاط SVG مباشرة إلى الجنرال محول الصور، الذي يقبل SVG وPNG وJPG وعشرات التنسيقات الأخرى، ويختار ICO كهدف لعرضه وتعبئته في خطوة واحدة.
| مصدر | الشفافية في الطرح الأولي للعملة | الحدة عند 256 بكسل | أفضل استخدام |
|---|---|---|---|
| SVG | أبقى | حاد، مصنوع من المتجهات | الشعارات لديك في شكل متجه |
| PNG 512 بكسل أو أكبر | أبقى | حاد | معظم المفضلة |
| بابوا غينيا الجديدة تحت 256 بكسل | أبقى | لينة عند 256 | Untick 256، أو إعادة التصدير بشكل أكبر |
| JPG | لا شيء، مربع مملوء | يعتمد على حجم المصدر | الرموز المستندة إلى الصور فقط |
| Ico الموجود | أبقى | أعيد بناؤها من الإدخال الذي يقوم المتصفح بفك تشفيره | تغيير الأحجام التي يحملها الملف |
يمكن تغذية .ico الموجود مرة أخرى أيضًا. لا يتعامل المحول أبدًا مع ICO إلى ICO كإعادة تسمية؛ فهو يعيد دائمًا بناء الملف بالأحجام التي تحددها. هذه طريقة سريعة لتجريد الرمز المفضل المتضخم إلى 16 و32 و48، على الرغم من أنه يتم إعادة بنائه من الإدخال الوحيد الذي يفك تشفيره المتصفح، لذا ابدأ من العمل الفني الأصلي إذا كان لديك. SVG مقابل PNG يغطي سبب استحقاق المتجه الرئيسي للاحتفاظ بهذا النوع من إعادة التصدير بالضبط.
هل لا يزال favicon.ico مهمًا في عام 2026؟
نعم، كبديل. تستخدم المتصفحات الحالية أيقونات SVG أو PNG التي تعلن عنها، ولكن الجذر /favicon.ico لا يزال هذا هو ما تجلبه بعض المتصفحات وقارئات الخلاصات وأدوات الإشارات المرجعية وبرامج الزحف عندما لا تجد أي إعلان أو لا تدعم النوع المعلن. يقوم أحد العناصر المفقودة أيضًا بملء سجلات الخادم بـ 404 ثانية، نظرًا لأن هذه الطلبات تصل سواء كان الملف موجودًا أم لا.
ما لم يعد مهمًا هو الذيل الطويل للأحجام القديمة. تعود أيقونات اللمس المنفصلة 57 و60 و72 و76 و114 و120 و144 و152 بكسل إلى إصدارات iOS الأقدم ويتم تغطيتها بملف 180 بكسل واحد. تم الإعلان عن صور بلاط Windows من خلال browserconfig.xml ينتمي إلى مربعات شاشة Windows 8 و10 Start. ولا حاجة لأي منهما لموقع جديد.
فيما يلي الحد الأدنى العملي المحدد بأحجام الملفات المتوقعة:
| ملف | حجم البكسل | الوزن النموذجي | مطلوب؟ |
|---|---|---|---|
favicon.ico مع 16، 32، 48 |
16، 32، 48 | بضعة كيلو بايت | نعم، كبديل |
icon.svg |
قابلة للتطوير | أقل من 2 كيلو بايت لعلامة بسيطة | موصى به |
apple-touch-icon.png |
180 x 180 | من 5 إلى 20 كيلو بايت | نعم لنظام iOS |
icon-192.png، icon-512.png |
192، 512 | من 10 إلى 60 كيلو بايت | إذا كان الموقع لديه بيان |
هل تحويل الرموز في المتصفح خاص؟
نعم. في Toolz، يحدث فك التشفير وتغيير الحجم وترميز PNG وتعبئة .ico من جانب العميل، داخل علامة تبويب المتصفح، لذلك لا يتم تحميل أي صورة، وتستمر الصفحة في العمل دون اتصال بالإنترنت بمجرد تحميلها. يتم إسقاط البيانات التعريفية وملفات تعريف الألوان المرفقة بالمصدر بواسطة خطوة اللوحة القماشية، والتي تعتبر غير ضارة بالنسبة للرمز.
يتم رفض الصور التي تزيد عن 100 ميجابكسل والملفات الفارغة مع رسالة، ويتم رفض مصادر SVG التي تزيد سعتها عن 50 ميجابايت. الأدوات مجانية، بدون تسجيل، مع حد يومي للتحويلات.
