Favicon (.ico) לעומת PNG

פורמט ה-.ico נוצר במיוחד כדי להחזיק מספר גדלי אייקונים במיכל בינארי אחד. favicon.ico בנוי היטב מכיל פריימים ב-16×16, 32×32, 48×48 ו-64×64 פיקסלים. כאשר דפדפן זקוק ל-favicon עבור כרטיסייה, הוא פותח את קובץ ה-.ico, קורא את ספריית ICO ובוחר את המסגרת המתאימה ביותר לגודל התצוגה הנדרש. יכולת ריבוי גדלים זו היא היתרון המובהק של .ico על פני PNG.

PNG הוא פורמט של תמונה אחת. קובץ PNG מכיל תמונה אחת בדיוק ברזולוציה אחת. כדי לכסות גדלים מרובים עם PNG בלבד, אתה צריך מספר קבצים ותגי `<link>` מרובים עם תכונות `sizes=` מפורשות. זה יותר מילולי אבל מאפשר שליטה מדויקת על איזו תמונה תוגש בכל רזולוציה. PNG תומך גם בדחיסה נטולת אובדן טובה יותר מאשר במסגרות ICO מקודדות BMP בכל רזולוציה נתונה.

תאימות דפדפן היא המקום שבו .ico מנצח באופן מכריע. כל דפדפן - כולל IE מדור קודם, Edge ישנות, גרסאות Safari עתיקות ודפדפני נישה לא ברורים - שואב את /favicon.ico משורש הדומיין ללא צורך בתג `<link>`. גם אם תשמיט לחלוטין את תג הקישור, הדפדפנים ינסו את GET /favicon.ico כמוסכמה. PNG דורש תגי '<link rel='icon' type='image/png'>' מפורשים עם סוגי MIME נכונים או שמתעלמים ממנו.

תמיכת השקיפות שווה בין ‎.ico ל-PNG. שני הפורמטים תומכים בערוץ אלפא של 8 סיביות (שקיפות מלאה לכל פיקסל). עם זאת, .ico שומר על שקיפות רק כאשר המסגרות הפנימיות שלו משתמשות בדחיסת PNG, לא ב-BMP. מקודד ICO ישנים לפעמים כברירת מחדל ל-BMP, שיש לו שקיפות מוגבלת (1-bit). השתמש תמיד בגנרטור מודרני המייצר מסגרות .ico דחוסות של PNG.

השוואת גודל הקובץ תלויה בהקשר. קובץ יחיד בגודל 32×32 PNG קטן יותר מקובץ .ico בגדלים רבים שמאגד פריימים של 16, 32, 48 ו-64 פיקסלים. עם זאת, ה-.ico מחליף ארבעה קבצי PNG נפרדים בתוספת ארבע תגי קישור. עבור המטען הכולל, .ico דחוס היטב בגדלים רבים הוא כמעט תמיד קטן יותר מהקבוצה המקבילה של PNG בודדים ביחד.

PNG מנצח על יעילות דחיסה בכל גודל בודד. אלגוריתם הדחיסה PNG (DEFLATE/zlib) יעיל במיוחד עבור לוגואים בצבע שטוח ויצירות אמנות בסגנון אייקון עם קצוות חדים ופלטות צבעים מוגבלות. לוגו 32×32 PNG בדחיסה אופטימלית יכול להיות מתחת ל-200 בתים. מסגרת ה-BMP המקבילה בתוך ‎.ico היא תמיד 4 KB ללא קשר לתוכן התמונה.

עבור כשירות לסמלים של חיפוש Google, הן ‎.ico והן PNG נתמכות. הסורק של Google מביא תחילה את ה-favicon המקושר ב-HTML שלך, או נופל בחזרה ל-/favicon.ico. הדרישה המינימלית היא 48×48 פיקסלים וכתובת אתר נגישה לציבור. PNG בגודל מתאים המקושר עם `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` מספק את זה בדיוק כמו חבילת .ico באותו גודל.

התנהגות מצב כהה שונה בין הפורמטים. קבצי PNG אינם יכולים להסתגל לערכת הצבעים של המשתמש - תזדקק ל-JavaScript כדי להחליף את תג הקישור href באופן דינמי, שהוא שביר. לפורמט .ico אין יכולת של מצב כהה בכלל. עבור התאמת favicon במצב כהה, רק SVG תומך בו באופן מקורי דרך בלוק משובץ בסגנון `@media (prefers-color-scheme: dark)`. יש להתאים את PNG ו-.ico עם שכבת-על SVG.

ההגדרה המודרנית האופטימלית משלבת את שני הפורמטים. השתמש ב-<link rel='icon' href='/favicon.ico'>` בתור החזרה האוניברסלית, ב-`<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` לבהירות הרשתית, וב-<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` לתמיכה במצב כהה שניתן להרחבה. דפדפנים שמבינים SVG favicons בוחרים את SVG; אחרים נופלים עד PNG; דפדפנים עתיקים מקבלים את ה-.ico.

שילוב מערכת ההפעלה Windows הוא דומיין .ico בלבד. קיצורי דרך בשולחן העבודה, סמלי סייר הקבצים וסיכות שורת המשימות Windows קוראים כולם את פורמט ico. אם מישהו מהמשתמשים שלך מצמיד את האתר שלך לשורת המשימות Windows או יוצר קיצור דרך בשולחן העבודה לכתובת האתר שלך, רק /favicon.ico משמש כסמל קיצור הדרך. בהקשר זה מתעלמים לחלוטין מקבצי PNG.

עבור 180×180 apple-touch-icon, PNG הוא הפורמט התקף היחיד. iOS אינו קורא את ‎.ico עבור סמלי מסך הבית - הוא מצריך ספציפית PNG מקושר באמצעות `<link rel='apple-touch-icon'>`. זהו מקרה אחד שבו PNG לא רק מועדף אלא נדרש.

אין להתעלם מתצורת השרת. שרתי אינטרנט רבים משרתים ‎.ico עם סוג תוכן שגוי (`text/plain` במקום `image/x-icon`) אם לא מוגדר במפורש. לקבצי PNG יש תמיכה רחבה יותר מסוג MIME בין פלטפורמות אירוח. אם אתה רואה את ה-favicon.ico שלך לא נטען, בדוק שהשרת שלך מחזיר `Content-Type: image/x-icon` או `image/vnd.microsoft.icon` עבור בקשות ICO.

ה-favicon generator מוציא את שני הפורמטים בו זמנית. אתה לא צריך לבחור - חבילת ההורדה כוללת favicon.ico, קבצי PNG עצמאיים ב-32×32 ו-180×180, ו-SVG עבור הערימה המודרנית המלאה. השימוש בחבילה זו פירושו שהשאלה ICO לעומת PNG נענית אוטומטית: השתמש בשניהם, כל אחד בהקשר שבו הוא מצטיין.

להשוואת פורמטים מלאה המכסה גם את SVG, ראה best favicon format guide. המדריך הזה מסביר איזה פורמט לתעדף עבור כל מקרה שימוש - אתר רגיל, PWA, חנות מסחר אלקטרוני וכלי מפתחים - ומספק מטריצת החלטות לבחירת ערימת ה-favicon שלך.