המרת PNG ל-ICO עבור פאביקון חד
פאביקון הוא התמונה הזעירה שנותנת לאתר את החתימה החזותית שלו. אתם רואים אותו בלשונית הדפדפן ליד כותרת העמוד, ברשימת הסימניות שלכם, בתפריט הנפתח של שורת הכתובות של היסטוריית הגלישה שלכם, ולפעמים לצד תוצאות חיפוש. הוא קטן, אבל הוא עושה הרבה עבודה: פאביקון מזוהה עוזר למשתמשים למצוא את הלשונית שלכם בין תריסר אחרות ומאותת שאתר גמור ומטופל. הפורמט הקלאסי עבור האייקון הקטן הזה הוא ICO, והדרך הקלה ביותר ליצור אחד היא להתחיל מ-PNG ריבועי נקי ולהמיר אותו.
הכלי הזה לוקח תמונת PNG והופך אותה לפאביקון ICO ממש בתוך הדפדפן שלכם. ההמרה מתבצעת באופן מקומי באמצעות המכשיר שלכם, כך שהתמונה שבחרתם לעולם לא מועלית לשרת. זה חשוב כשהאייקון שלכם הוא לוגו או נכס מותג שאתם מעדיפים לא למסור לצד שלישי. כשהקובץ מוכן, אתם פשוט מורידים אותו.
מהו פורמט ICO ולמה הוא מחזיק כמה גדלים
ICO הוא פורמט מיכל אייקונים שמקורו ב-Microsoft Windows, שבו הוא שומר את האייקונים המשמשים עבור תוכניות, קיצורי דרך ותיקיות. התכונה המגדירה שלו, והסיבה שהוא הפך לתקן עבור פביקוני אינטרנט, היא שקובץ ICO בודד יכול להכיל את אותה תמונה במספר רזולוציות בו-זמנית. במקום מפת ביטים קבועה אחת, הקובץ אורז סט קטן של תמונות ריבועיות ונותן לדפדפן או למערכת ההפעלה לבחור איזה גודל מתאים למקום שבו הוא צריך לצייר את האייקון.
זה שימושי באמת. לשונית דפדפן צריכה אייקון זעיר, סרגל סימניות עשוי להשתמש באחד קצת יותר גדול, וקיצור דרך מוצמד בשולחן העבודה יכול לבקש משהו גדול עוד יותר. עם ICO רב-גדלים, כל הקשר תופס את הגרסה המתאימה לו, כך שהאייקון שלכם נשאר חד במקום להיות מוגדל ממפת ביטים קטנה אחת והופך למטושטש. ICO גם שומר על שקיפות, מה שמשמר את הפינות של לוגו עגול או לא-סדיר נקיות מול כל צבע לשונית.
גדלי פאביקון מומלצים
עבור פאביקון של אתר, שלושת הגדלים ששווה לכלול הם 16x16, 32x32 ו-48x48 פיקסלים. הגרסה של 16 פיקסלים היא זו שרוב הדפדפנים מציגים בלשונית ובשורת הכתובות. הגרסה של 32 פיקסלים משמשת בתצוגות ברזולוציה גבוהה יותר ובחלק מתצוגות הסימניות וההיסטוריה, כך שהיא שומרת על חדות במסכים מודרניים. הגרסה של 48 פיקסלים מכסה הקשרים גדולים יותר כמו קיצורי דרך של אתרים ב-Windows. מכיוון שכולם חיים בתוך קובץ ICO אחד, אתם משגרים נכס יחיד ונותנים לכל משטח לבחור את מה שהוא צריך.
התחילו מ-PNG ריבועי כך ששום דבר לא נמתח. אם תמונת המקור שלכם מלבנית או גדולה מדי, חתכו או שנו את הגודל שלה לריבוע נקי קודם עם שנאי הגודל שלנו לתמונות, ואז הריצו את ההמרה. עיצוב פשוט וניגודי נקרא הרבה יותר טוב ב-16 פיקסלים מאשר איור מפורט, אז העדיפו צורות נועזות על פני טקסט עדין.
איך להוסיף את הפאביקון לאתר שלכם
ברגע שיש לכם את קובץ ה-ICO שלכם, העלו אותו לאתר שלכם, באופן מסורתי לשורש האתר בתור favicon.ico. הרבה דפדפנים ימצאו אותו שם אוטומטית, אבל שיטת העבודה הטובה ביותר היא להצהיר עליו במפורש בראש ה-HTML שלכם כדי שלא יהיו ניחושים. הוסיפו תג קישור כזה:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
הציבו את השורה הזאת בתוך אזור ה-<head> של העמודים שלכם. התכונה rel="icon" אומרת לדפדפן שהמשאב הזה הוא אייקון העמוד, וה-href מצביע לאן שאחסנתם את הקובץ. אם אתם משתמשים בנתיב יחסי לשורש כמו זה שלמעלה, אותה הצהרה עובדת בכל עמודי האתר שלכם. אחרי הפריסה, ייתכן שתצטרכו לרענן בכוח או לנקות את המטמון לפני שהאייקון החדש יופיע, כי דפדפנים נאחזים בפביקונים בעקשנות.
המרה פרטית בדפדפן שלכם
הכל קורה במכשיר שלכם. ה-PNG שבחרתם נקרא, מפוענח ומקודד מחדש כ-ICO באופן מקומי, ושום דבר לא עוזב את המחשב שלכם במהלך התהליך. אין חשבון, אין תור ואין אחסון בצד השרת, מה שהופך את זה לנוח גם עבור לוגואים שטרם שוחררו או עבודת לקוח תחת הסכם. לעוד דרכים להכין ולסדר גרפיקה, עיינו במלוא מגוון כלי התמונות שלנו.
שאלות נפוצות
האם התמונה שלי מועלית לאיזשהו מקום?
לא. ה-PNG מומר ל-ICO כולו בדפדפן שלכם, במכשיר שלכם. שום דבר לא נשלח לשרת ושום דבר לא נשמר, כך שהתמונה שלכם נשארת פרטית.
אילו גדלים צריך הפאביקון שלי לכלול?
הגדלים השימושיים ביותר הם 16x16, 32x32 ו-48x48 פיקסלים. התמונה של 16 פיקסלים מוצגת בלשוניות דפדפן, בעוד הגדולות יותר שומרות על חדות האייקון בתצוגות ברזולוציה גבוהה ובקיצורי דרך בשולחן העבודה.
למה להשתמש ב-ICO במקום פשוט ב-PNG?
ICO הוא הפורמט הוותיק של הפאביקון והוא יכול לאחסן כמה גדלים בתוך קובץ אחד. דפדפנים ומערכת ההפעלה בוחרים את הרזולוציה שמתאימה לכל הקשר, כך שהאייקון נשאר חד במקום להיות מוגדל ממפת ביטים אחת.
האם ה-ICO שומר את השקיפות מה-PNG שלי?
כן. פורמט ICO תומך בשקיפות, כך שהאזורים השקופים בתמונת ה-PNG שלכם נשמרים והאייקון מתמזג נקי עם כל צבע לשונית או רקע.
איך אני מוסיף את הפאביקון לאתר שלי?
העלו את קובץ ה-ICO לאתר שלכם, בדרך כלל בתור favicon.ico בשורש, והוסיפו תג קישור בראש ה-HTML שלכם כמו link rel icon type image x-icon href סלאש favicon.ico. אחר כך נקו את המטמון של הדפדפן שלכם כדי לראות אותו.
תמונת המקור שלי לא ריבועית. מה עלי לעשות?
חתכו או שנו את הגודל שלה לריבוע קודם כדי שהיא לא תימתח. תוכלו להשתמש בשנאי הגודל שלנו לתמונות כדי ליצור ריבוע נקי, ואז להמיר אותו ל-ICO עבור הפאביקון הטוב ביותר.