בעיצוב אתרים, כפי שאתה בוודאי יודע, כל פרט חשוב. אדם שעבר למשאב שלך לא רואה כל אחד מהאלמנטים בנפרד, אלא תופס את התמונה כולה כחבילה המורכבת מפרטים קטנים אחרים. לכן, אם אתה מתגעגע למשהו בתהליך פיתוח המשאב שלך, פרט זה יכול מאוחר יותר לקלקל את כל המתחם, את כל ההרכב.
זוט כזה יכול להיות, למשל, רקע של כפתור, גופן שנבחר בצורה שגויה של אלמנט קטן כלשהו, ואפילו Favicon. ואכן, תראו בעצמכם - לאתרים גדולים ומוכרים יש אייקון בודד המציין זאת בסעיף "סימניות" בדפדפן המשתמש. בלעדיו, מפתחי המשאב לא היו יכולים ליצור את ההרכב שאליו הם חתרו במקור.
לכן, בעת יצירת עיצוב לאתר שלך, עליך לדאוג לפרט כזה כמו ה-favicon. במאמר זה, נדבר על איך להתאים אותו לסגנון הכללי של המשאב, כמו גם אילו גדלים צריכים להיות לתמונה זו.
סמל האתר
ראשית, בואו נגדיר מהו האלמנט הזה. עכשיו, תסתכל על הכותרת של לשונית הדפדפן שלך. כפי שאתה יכול לראות, יש תמונה קטנה משמאל לה, המציינת גרסה פשוטה של הלוגו של המשאב. אותה תמונה נמצאת גם ליד שם האתר המוצג בתוצאות החיפוש. זה מה שהמשתמש מונחה כשהוא רואה את הכותרת.
מנהלי אתרים רבים מבינים שצריך תמונה כזו - אבל מעטים האנשים שיודעים מה גודל ה-favicon לאתר הכי מתאים. לכן, במאמר זה לא רק נספק מידע על איך ליצור אייקון כזה וכיצד אתה יכול להתקין אותו על המשאב שלך, אלא גם נדבר על גדלי תמונות.
מטרת הפביקון
אז, התמונה ליד כותרת האתר משמשת לזיהוי. זוהי מטרתו המקורית: לבטא את האתר שאת שמו אנו רואים, ולבלוט אותו בעיני השאר. זה נעשה בצורה פשוטה ככל האפשר באמצעות שימוש בגרפיקה: אנו קולטים אינטואיטיבית מידע בתמונות הרבה יותר מהר וקל מאשר בפורמט טקסט. סמלי מועדפים עוזרים לנו לעשות בדיוק את זה. אבל אל תשכח שגודל ה-favicon הוא מינימלי בעיני המשתמש. אין מדובר בלוגו ב"כותרת" של האתר, אשר עשוי להכיל מידע נוסף בצורת כתובות, כמה הבהרות או פרטי התקשרות. כל מה שניתן להציג באייקון ליד השם צריך להתאים ככל האפשר לגודל ה-favicon. והוא, כפי שכבר צוין, פשוט מיניאטורי (רק 16 על 16 פיקסלים).
איך לבחורfavicon?
אז איך מנהל אתרים יכול לעצב אייקון לאתר שלו? יש לציין שפשוט דחיסת לוגו האתר, לרוב, לא תעבוד. על הסמלים המוצבים בצורה של לוגו של משאב מסוים, לעתים קרובות נראים אלמנטים שונים, אשר לא תמיד יוצגו כראוי בצורה מיניאטורית. עדיף לנטוש מיד התחייבות כזו.
כמובן, גודל ה-favicon לא מאפשר לדבר על פשוט הכנסת כתובת לשם. כל טקסט פשוט יהיה בלתי נראה ברזולוציה הזו. אנחנו צריכים לפתח אייקון חדש שיעביר את הסגנון של האתר. כדי למצוא פתרונות, שוב, בואו נפנה לאתרים הגדולים ביותר.
אנשים רבים משתמשים באות הראשונה המסוגננת של שם השירות כסמל. זו הדרך, למשל, בינג, יאהו, יאנדקס, ויקיפדיה, גוגל. ישנה גישה נוספת - אם יש לך שם אתר קצר, אתה יכול להגדיר אותו כרקע של הסמל שלך. כדי שגודל ה-favicon (בפיקסלים הוא מגיע, אני חוזר, 16 על 16 פיקסלים) יציג בצורה נכונה את הכיתוב הזה, הוא לא צריך להיות יותר מ-3 אותיות. זה מה, למשל, שירות Aol עושה.
איך ליצור סמל אהוב?
ישנן מספר דרכים ליצור אייקון עבור שם האתר. כמובן שהכי קל זה לעבוד עם פתרונות מוכנים שונים. אנחנו יכולים לדבר על כמה שירותים או תוכניות המאפשרים לך ליצור אייקון מתמונה מלאה על ידי הקטנתו. עם זאת, הייתי ממליץ לפתח לוגו כזה בעצמך. זה ייתן קודם כלההזדמנות ללמוד משהו; ושנית, זה יספק יותר כלים. כל מה שצריך לדעת בשביל זה הוא מה לצייר, וגם לדעת מה הגודל של ה-favicon בגרסה הסופית. על גודל הסמל של האתר נדבר מעט מאוחר יותר, אך לעת עתה נציין כמה דקויות של עבודה עם תמונות כאלה. בפרט, מבלי להזכיר את גודל ה-favicon לאתר, יש להבהיר את הפורמט של תמונה כזו. כפי שמציינים מעצבים מנוסים, יש לשמור את התמונה כקובץ-p.webp
ניתן לשמור את התמונה, למשל, באמצעות פוטושופ, שם יצויר הסמל.
מימדים של Favicon
אז, עכשיו בואו נדבר על גודל התמונה שאנו רואים ליד שם האתר בתוצאות החיפוש. כברירת מחדל, כפי שכבר ציינו, הגודל שלו הוא רק 16 פיקסלים (בכל צד). עם זאת, אם תנסו לערוך את התמונה הזו בפוטושופ, תראו בעצמכם עד כמה היא לא נוחה. לכן, אנו ממליצים לעבוד עם תמונה מוגדלת, שבעתיד ניתן פשוט לדחוס אותה לאורך הקצוות ולשמור אותה בפורמט הנדרש.
Multiplatform
עם זאת, אם כבר מדברים על גודל ה-favicon באתר שלך, יש לזכור דבר נוסף. לא כל הפלטפורמות מציגות תמונת משאב באותו אופן. לדוגמה, מכשירים עם צג Retina "רואים" את ה-favicon שלך ב-32 על 32 פיקסלים. ובספארי ובפלטפורמת Windows החדשה, ובכלל, הסמלים האלה מגיעים לגודל של 64פיקסלים.
לכן, אנו ממליצים לשמור גרסאות שונות של הסמל ופשוט לספק את השינוי שלו בהתאם לפלטפורמת המשתמש בעתיד. עוד נקודה מעניינת - אתה יכול לנסות לטעון את האייקון בפורמט הגדול ביותר, בסמוך על העובדה שהוא "יתכווץ" בהתאם לדפדפן.
עורכים חיצוניים
כמובן שזה טוב אם אתה טוב עם פוטושופ ויודעים מה הגודל של ה-favicon ואיך להשיג אותו תוך שמירת התמונה שלך. עם זאת, ישנם הרבה מתחילים שפשוט לא נתקלו בעורכים גרפיים כל כך מקרוב בעבר, כך שהם לא יכולים לצייר את התמונה הרצויה כל כך בקלות. כדי לעזור למנהלי אתרים כאלה, ישנם שירותים שונים המאפשרים לך ליצור באופן אוטומטי את האייקון שבו אתה מעוניין. רבים מהם אפילו חינמיים, מה שלא דורש שום השקעה מהמשתמש.
לפעמים צריך רק להירשם לעבודה, אבל, כפי שהבנתם, זה נעשה פעם אחת - אחרי הכל, חברות לא מחליפות את ה-favicon שלהן כל כך הרבה פעמים. תסתכל על גוגל, שמשנה את הלוגו כל יום, אבל לא נוגעת בסמל.
איך להתקין Favicon?
באופן כללי, הגדרת האתר שלך באופן שיציג בצורה נכונה את התמונה שאתה צריך היא פשוטה מאוד. מספיק לבצע סדרה של שלבים פשוטים שיאפשרו למנועי החיפוש, כמו גם לדפדפנים פשוטים, לקרוא את המידע.
כדי לעשות זאת, יש לשמור את התמונה המתקבלת עםבשם favicon.ico וממוקם בשורש המשאב שלך. זהו, כעת התמונה שלך תזוהה אוטומטית, ולאחר זמן מה היא תקושר לאתר שלך.
בנוסף לכריכה זו, אתה יכול להוסיף עוד שורה אחת ש"תציע" היכן הסמל שלך ממוקם. זה נראה כך:
התקן את הקוד בכותרת של האתר.
מסקנות
אז, אחרי שקראת את המאמר שלנו, הבנת איזה גודל צריך להיות סמל סמל עבור אתר ומהו. כמו כן, אני חושב שהבנתם שמציאת האייקון המתאים למשאב שלכם היא הכרח, כי זה משחק לידיים שלכם הן מבחינת הגברת ההכרה והן מבחינת הבולטות הנוספות בקרב המתחרים שלכם. לפחות האתרים הגדולים עושים את אותו הדבר, שניתן לקחת כדוגמה מצוינת. וחוץ מזה, זה לא עושה הרבה מאמץ - לאחר שהכנת פעם אחת favicon והתקנת אותו נכון באתר שלך, אתה יכול לשכוח מזה לחודשים הקרובים.
לכן, אתם מוזמנים להתנסות, להמציא משהו חדש, לנסות - והכל יסתדר!
