רוב עצות favicon היא רשימה של תריסר גדלי PNG שהועתקו מגנרטור שנכתב בשנת 2014 רוב הגדלים האלה כבר לא עושים כלום מה אתר צריך היום הוא קצר: אחד favicon.ico עבור הדפדפנים והכלים שעדיין מחפשים אותו, סמל אחד ניתן להרחבה או ברזולוציה גבוהה לכל דבר מודרני, וסמל מגע אחד לטלפונים החלק שמכשיל אנשים הוא ה.ico עצמו, כי זה לא תמונה עם הרחבה מוזרה. זהו מיכל קטן המכיל מספר תמונות.
מדריך זה מכסה כיצד נבנה קובץ ICO, אילו גדלים שייכים בתוך favicon.ico ומדוע, אילו קבצי אייקונים אחרים אתר צריך לצדו, ואת הטעויות שגורמות לאייקון להיראות רך או בלתי קריא בכרטיסיית דפדפן. זה יושב מתחת ל רכזת כלי תמונה, וכל גודל שצוטט עבור ממיר Toolz מגיע מקוד המקור שלו.
TL;DR: קובץ ICO הוא מיכל: ספרייה קצרה ואחריה מספר תמונות מרובעות, אחת לכל גודל, מהן הדפדפן או מערכת ההפעלה בוחרים את ההתאמה הקרובה ביותר. For a favicon.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: כותרת, ספרייה המפרטת כל תמונה בפנים ונתוני התמונה עבור כל ערך. מיקרוסופט תיעדה את הפריסה בה אייקונים מאמר טכני, וזה היה הפורמט של תוכנית Windows, קיצור דרך וסמלי תיקיות מאז הגרסאות הראשונות של Windows. Browsers אימצו אותו עבור favicons בסוף 1990, וזו הסיבה הקובץ ברוב אתרי האינטרנט עדיין נקרא favicon.ico.
הספרייה היא מה שעושה אותה שונה מ-PNG או JPG. תוכנה שצריכה סמל ב-16 פיקסלים קוראת את הספרייה, מוצאת את הערך הקרוב ביותר ל-16 ומציירת את זה. כרטיסייה, רשימת סימניות, כפתור שורת משימות וקיצור דרך לשולחן העבודה יכולים כל אחד לצלם תמונה שונה מאותו קובץ. זה מאפשר למעצב לספק סימן פשוט לגדלים הזעירים וסימן מפורט לגדלים הגדולים, במקום לתת לתמונה בודדת להיות בקנה מידה בכל מקום.
הפורמט עובר בשני סוגי מדיה. רשימות IANA image/vnd.microsoft.icon, בעוד שרוב השרתים והדפדפנים משתמשים ב-older image/x-icon. שניהם עובדים עבור favicon.
כיצד בנוי קובץ 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 KB; אותה תמונה כמו PNG היא בדרך כלל חלק מזה.
ממיר Toolz כותב את הגרסה המודרנית בונה ICO שלה מגדיר סוג 1, ערך ספרייה אחד לכל גודל עם מישורים 1 ו 32 סיביות לפיקסל, כותב 256 כמו 0, ומאחסן כל ערך כמו PNG עם ערוץ אלפא שלה מבקש ממנו גודל מחוץ 1 עד 256 הוא סירב לפני כל דבר נכתב, כי הספרייה אין דרך להקליט את זה.
איזה גודל צריך להיות favicon?
Favicon.ico צריך להכיל 16 x 16, 32 x 32 ו 48 x 48 תמונות, ותמונה 256 x 256 אם אתה רוצה גם את הקובץ לעבוד כסמל Windows.מעבר ל.ico, דפדפנים מודרניים מעדיפים SVG או PNG גדול מוצהר עם תג קישור, וטלפונים משתמשים בסמל מגע נפרד.
טבלה זו ממפה כל גודל למקום שבו הוא משמש התנהגות מדויקת משתנה עם דפדפן, מערכת הפעלה ושינוי קנה מידה של תצוגה, אז התייחסו אליו כמקרה הנפוץ:
| גודל | איפה זה מופיע | דרושים בfavicon.ico? |
|---|---|---|
| 16 על 16 | כרטיסיות דפדפן, שורת כתובת, סימניות בתצוגות סטנדרטיות | כן |
| 32 על 32 | כרטיסיות על צגים בצפיפות גבוהה, שורת המשימות של Windows וקיצורי דרך | כן |
| 48 על 48 | קיצורי דרך לשולחן העבודה של Windows, תצוגות סמלים בינוניות; חיפוש Google ממליץ ללכת גדול מזה | כן |
| 256 x 256 | תצוגות סמלים גדולות וגדולות במיוחד של Windows | רק אם משתמשים בו כסמל של Windows |
| 180 על 180 | מסך הבית של אייפון ואייפד (apple-touch-icon) |
לא, PNG נפרד |
| 192 על 192 | מסך הבית אנדרואיד, מניפסט אפליקציית אינטרנט | לא, PNG נפרד |
| 512 x 512 | מסכי מניפסט, התקנה והתזה של אפליקציית אינטרנט | לא, לא יכול להתאים ב-ICO |
| כל (SVG) | דפדפנים מודרניים התומכים בסמלי SVG, כולל גרסאות מצב כהה | לא, SVG נפרד |
על תוצאות חיפוש, Google's favicon הנחיות בקש סמל מרובע והמליץ על אחד גדול מ-48 x 48 פיקסלים, וגוגל מביאה אותו מהסמל המוצהר בדף הבית שלך. .ico שמופיע ב-16 פיקסלים הוא סיבה נפוצה לכך שסמל site' נראה מטושטש לצד תוצאת החיפוש שלו.
אילו קבצי favicon אתר צריך?
אתר צריך שלושה קבצי אייקונים וערך מניפסט אחד כדי לכסות כל דפדפן ומכשיר מיינסטרים. יותר מזה הוא כמעט תמיד שאריות.
<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 favicons. זה משתנה לכל צפיפות ויכול לכלול אprefers-color-schemeשאילתת מדיה כך שהסמל יתאים לכרטיסיות כהות. לא כל דפדפן מכבד אותו, וזו הסיבה שה-.ico נשאר.apple-touch-icon.pngב 180 x 180 הוא מה iOS משתמש כאשר מישהו מוסיף את האתר שלך למסך הבית תן לו רקע אטום, מאז iOS לא לשמור על שקיפות על סמלי מסך הבית.- סמלי המניפסט ב-192 ו-512 הם מה שדפדפנים מבוססי אנדרואיד וכרום משתמשים כאשר אתר מותקן כאפליקציה, כמתואר ב- מניפסט יישום אינטרנט של W3C.
ה sizes תכונה בקישור.ico חשובה בדרך אחת. כאשר דפדפן רואה SVG ו-.ico בגודל, הוא יכול לדעת שה-SVG הוא הבחירה הניתנת להרחבה. הגדרות מסוימות משתמשות sizes="any" ב-.ico במקום זאת, וכמה גרסאות Chrome הגיבו בבחירת ה-.ico על פני ה-SVG. גודל מסוים נמנע מכך.
למה favicon שלי נראה מטושטש או לא נכון?
רוב בעיות favicon מגיעות מתמונת המקור, לא מהפורמט. ה-ICO מאחסן את כל מה שניתן בכל גודל, וקנה מידה יכול ללכת טוב רק בכיוון אחד.
| סימפטום | סיבה | לתקן |
|---|---|---|
| כניסה רכה וכתמתית של 256 פיקסלים | מקור קטן מ-256 פיקסלים, אז הוא נמתח למעלה | התחל מיצוא של 512 x 512 ומעלה |
| לוגו מעוך או מתוח | מקור לא מרובע נמתח לריבוע | חיתוך או רפידה לריבוע לפני ההמרה |
| סימן מילים בלתי קריא בכרטיסייה | טקסט שצויר ב-16 פיקסלים הוא בגובה שני פיקסלים | השתמש בסמל לבד עבור 16 ו-32 פיקסלים |
| מתאר דק נעלם | משיכות מתחת ל-1 px בגדלים קטנים | משיכות עבות בגרסה קטנה |
| קופסה לבנה סביב הסמל | למקור JPG אין שקיפות | השתמש ב-PNG עם ערוץ אלפא |
| סמל ישן ממשיך להופיע | דפדפנים מאחסנים favicons באגרסיביות | שנה את שם הקובץ או הוסף מחרוזת שאילתה ולאחר מכן רענון קשיח |
| אין אייקון בתוצאות של גוגל | סמל מתחת ל-48 פיקסלים, חסום על ידי robots.txt, או לא בדף הבית | הגישו אייקון גדול יותר מדף הבית ואפשרו סריקה |
השורה הראשונה שווה איות, כי זה תופס מעצבים מנוסים מדי. 64 px מקור המרה עם 256 ticked מייצר ערך 256 px כי הוא התמונה 64 px מוגדל ארבע פעמים זה בדיוק הערך צפיפות גבוהה Windows תצוגות וקיצורי דרך גדולים להראות הקטנת קנה מידה ממקור גדול הוא הכיוון שנראה טוב.
השורה השלישית היא עניין של חשבון לסמל בגודל 16 על 16 יש 256 פיקסלים בסך הכל סימן מילים בן חמש אותיות שנדחס לרוחב הזה מקבל כשלושה פיקסלים לאות, ואנטי-aliasing הופך אותם לכתמים אפורים כמעט כל אתר ידוע משתמש באות או סמל בודד עבור ה-favicon שלו מסיבה זו.
איך אני עושה favicon.ico מ PNG?
ייצא PNG מרובע של לפחות 512 x 512 פיקסלים עם רקע שקוף, המר אותו ל-ICO עם הגדלים שאתה צריך, ובדוק את הערך של 16 פיקסלים בגודל אמיתי לפני הפרסום.
באמצעות ה ממיר PNG ל-ICO על Toolz:
- זרוק את ה-PNG. כמה יכולים להיכנס בבת אחת; כל אחד הופך ל-ico משלו.
- בחר את גדלי הסמלים כל ארבע התיבות, 16, 32, 48 ו-256 פיקסלים, מסומנות כדי להתחיל. עבור favicon טהור, בטל את הסימון 256 כדי להפוך את הקובץ להרבה יותר קל, מכיוון שהערך 256 הוא רוב משקלו. אם אתה מבטל את הסימון של כל הארבעה, הממיר חוזר לכתוב את כל הארבעה במקום לייצר אייקון ריק.
- לחץ על המר ל-ICO. ריבוע 512 x 512
logo.pngחוזר כlogo.icoעם ההערה " מכיל 16, 32, 48, 256 px icons." - הורד את הקובץ, או קח אצווה בתור
converted-ico.zip.
הממיר מצייר את התמונה שלך על קנבס בכל גודל, מקודד כל ריבוע כ-PNG, ואורז אותם הכי קטנים תחילה לתוך .ico אחד, כולו בצד הלקוח, כך שהיצירה לעולם לא עוזבת את המכשיר. השקיפות נשמרת בכל גודל. מקור לא מרובע נמתח כדי למלא כל ריבוע ולא נחתך, והפתק אומר זאת: זרוק סימן מילים בגודל 1024 x 256 והוא מדווח שהתמונה הייתה 1024x256 ונמתחה לריבועים בגדלים שבחרת. הפתק הזה הוא הרמז שלך לחתוך או לרפד קודם.
לקבלת התוצאה הטובה ביותר בגדלים קטנים, צור שני PNGs: אחד מפורט עבור 48 ו 256 px וסמל מפושט עבור 16 ו 32 px. המר כל אחד רק עם הגדלים שלו מתויג הממיר כותב מקור אחד לכל קובץ, כך הגישה שתי תמונות נותן לך שני קבצי.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 px מצויר ב-512, כך שסמל SVG בגודל 24 x 24 עדיין נותן מקור נקי לערך 256. או שחרר את ה-SVG ישר לתוך הכללי ממיר תמונה, שמקבלת SVG, PNG, JPG ועוד תריסר פורמטים, ובוחרת ב-ICO כמטרה לעיבוד ולארוז אותו בשלב אחד.
| מקור | שקיפות ב-ICO | חדות ב-256 פיקסלים | שימוש הטוב ביותר |
|---|---|---|---|
| SVG | נשמר | חד, מעובד מוקטורים | לוגו שיש לך בצורה וקטורית |
| PNG 512 פיקסלים ומעלה | נשמר | שארפ | רוב המועדפים |
| PNG מתחת ל-256 פיקסלים | נשמר | רך בגיל 256 | Untick 256, או ייצוא מחדש גדול יותר |
| JPG | אין, ריבוע מלא | תלוי בגודל המקור | אייקונים מבוססי תמונה בלבד |
| ICO קיים | נשמר | נבנה מחדש מהערך שהדפדפן מפענח | שינוי אילו גדלים נושא קובץ |
ניתן להזין בחזרה גם .ico קיים. הממיר אף פעם לא מתייחס ל-ICO ל-ICO כאל שינוי שם; הוא תמיד בונה מחדש את הקובץ בגדלים שאתה מסמן. זו דרך מהירה להפשיט favicon נפוח עד 16, 32 ו-48, למרות שהוא נבנה מחדש מהערך האחד שהדפדפן מפענח, אז התחל מהיצירה המקורית אם יש לך אותה. SVG לעומת PNG מכסה מדוע כדאי לשמור את מאסטר הווקטור בדיוק עבור סוג זה של ייצוא חוזר.
האם favicon.ico עדיין משנה ב-2026?
כן, בתור fallback. דפדפנים נוכחיים משתמשים בסמלים SVG או PNG שאתה מצהיר, אבל השורש /favicon.ico הוא עדיין מה כמה דפדפנים, קוראי הזנה, כלי סימניות וסורקים להביא כאשר הם מוצאים שום הצהרה או לא תומכים בסוג מוצהר חסר אחד גם ממלא יומני שרת עם 404s, מאז בקשות אלה מגיעים בין אם הקובץ קיים או לא.
מה שכבר לא משנה הוא הזנב הארוך של גדלי מדור קודם. סמלים נפרדים של 57, 60, 72, 76, 114, 120, 144 ו-152 פיקסלים מגע מתוארכים לגרסאות iOS ישנות יותר ומכוסים בקובץ היחיד של 180 פיקסלים. תמונות אריחי Windows שהוכרזו דרך browserconfig.xml השתייך לאריחי מסך של Windows 8 ו-10 התחל. אין צורך באתר חדש.
הנה הסט המינימלי המעשי עם גדלי קבצים שניתן לצפות להם:
| קובץ | גודל פיקסל | משקל אופייני | נדרש? |
|---|---|---|---|
favicon.ico עם 16, 32, 48 |
16, 32, 48 | כמה KB | כן, כמו fallback |
icon.svg |
ניתן להרחבה | מתחת ל-2 KB עבור סימן פשוט | מוּמלָ |
apple-touch-icon.png |
180 על 180 | 5 עד 20 KB | כן, עבור iOS |
icon-192.png, icon-512.png |
192, 512 | 10 עד 60 KB | אם לאתר יש מניפסט |
האם המרת אייקונים בדפדפן היא פרטית?
כן. ב-Toolz, פענוח, שינוי גודל, קידוד PNG ואריזת ה-.ico מתרחשים כולם בצד הלקוח, בתוך לשונית הדפדפן, כך שלא מועלית תמונה, והדף ממשיך לעבוד במצב לא מקוון לאחר הטעינה. מטא נתונים ופרופילי צבע המצורפים למקור נשמטים על ידי שלב הקנבס, אשר עבור סמל אינו מזיק.
תמונות מעל 100 מגה פיקסל וקבצים ריקים מסורבים בהודעה, ומקורות SVG מעל 50 MB מסורבים הכלים הם בחינם, ללא הרשמה, עם הגבלה יומית על המרות.
