כל הכלים / אתרים ושיווק / יצירת Favicon

יצירת Favicon

מעלים לוגו או כותבים אות או אמוג׳י, בוחרים צבעים וצורה, ומקבלים את כל קובצי האייקון לאתר: ICO, PNG, manifest וקוד HTML מוכן.

מה יהיה באייקון?
1 עד 3 תווים נראים הכי טוב. גם עברית עובדת.
רקע
צורה
קוד HTML להדבקה ב-head
האתר שלי
16
32
180 (אפל)

בקובץ: favicon.ico (16, 32, 48), קובצי PNG בגדלים 16, 32, 180, 192 ו-512, קובץ site.webmanifest וקוד HTML מוכן.

באייפון האייקון מקבל רקע מלא (לבן אם בחרתם שקוף), כי iOS מציג שקיפות כשחור.

הכול נוצר בדפדפן. התמונה לא עולה לשום שרת.

שאלות

זה האייקון הקטן של האתר: בלשונית הדפדפן, בסימניות, בהיסטוריה וליד האתר בתוצאות החיפוש של גוגל. כשמוסיפים את האתר למסך הבית בטלפון, מוצגת הגרסה הגדולה (180 באייפון, 192 ו-512 באנדרואיד).

פורסים את ה-ZIP לתיקייה הראשית של האתר ומדביקים את קוד ה-HTML בתוך ה-head. בוורדפרס מספיק להעלות את קובץ ה-PNG בגודל 512 כסמל האתר (Site Icon), ובאלמנטור דרך הגדרות האתר > זהות האתר.

תמונה ריבועית בגודל 512 פיקסלים ומעלה, עדיף PNG שקוף או SVG. לוגו עם טקסט קטן לא ייקרא ב-16 פיקסלים, ולכן עדיף להשתמש בסמל בלבד או באות אחת.

iOS מציג שקיפות באייקון מסך הבית כשחור, ולכן קובץ apple-touch-icon מקבל את צבע הרקע (או לבן) ומעט שוליים. את הפינות האייפון מעגל בעצמו.

דפדפנים שומרים favicon במטמון זמן רב. בודקים בחלון גלישה בסתר, או מוסיפים בקוד ה-HTML את הסיומת ?v=2 לכתובת הקובץ. בגוגל העדכון יכול לקחת כמה שבועות.