לפני שמורידים, כדאי להסתכל בתצוגה המקדימה: היא מראה את האייקון בגודל האמיתי, 16 ו־32 פיקסלים, על לשונית בהירה ועל לשונית כהה. שם לוגואים נכשלים. קווים דקים נעלמים ב־16 פיקסלים, ולוגו כהה על רקע שקוף נבלע בדפדפן במצב כהה. אם זה מה שקורה ללוגו שלכם, כדאי לפשט אותו או לתת לו רקע מלא לפני שממשיכים.
מהלוגו שלנו בפורמט SVG יצא ה־ZIP הזה, שהכפתור “הורדת ה־ZIP” שומר בבת אחת:
| קובץ | פיקסלים | נפח |
|---|---|---|
| favicon.ico | 16, 32 ו־48 בקובץ אחד | 2.7KB |
| favicon-32x32.png | 32 × 32 | 840 בייט |
| apple-touch-icon.png | 180 × 180, על לבן | 5.2KB |
| icon-192.png | 192 × 192 | 6.5KB |
| icon-512.png | 512 × 512 | 10.1KB |
| site.webmanifest | טקסט | 312 בייט |
| favicon-html.txt | טקסט | 233 בייט |
הקוד להדבקה
ארבע השורות האלה נכנסות בתוך ה־<head>. בדף הן מופיעות עם כפתור “העתקה”, ואותו טקסט נמצא גם ב־favicon-html.txt:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">אם באתר כבר יש תגיות favicon, מחליפים אותן ולא מוסיפים סט שני.
SVG או PNG?
SVG, אם יש לכם. הדפדפן מצייר אותו מחדש ב־512 פיקסלים וכל הגדלים נעשים מזה, כך שגם האייקון של 512 חד. גם PNG עובד, אבל הגודל חשוב: מלוגו של 256 פיקסלים, הכלי מזהיר שהאייקונים הגדולים מוגדלים ועלולים לצאת מטושטשים. מ־512 פיקסלים ומעלה זה לא קורה.
קובץ ה־ICO שומר את שלושת הגדלים כנתוני PNG, שכל דפדפן עדכני קורא, וגם Windows מאז Vista.