כיצד להוסיף Favicon ב-HTML

שלוש תגים מכסים 99% מהמקרים. שניים נוספים נותנים לך הגדרה מלאה בדרגה PWA.

3 דקות קריאה

Check favicons on any website

Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.

Install Chrome Extension

תג המינימום

<link rel="icon" href="/favicon.ico"> - זהו. כל דפדפן יביא אותו.

הסט המודרני המומלץ

הוסף SVG ו-apple-touch-icon לעיבוד חד בכל פלטפורמה:

<link rel="icon" href="/favicon.ico">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

PWA הנחיות התקנה

הוסף manifest.json עם ערכים של 192×192 ו-512×512 PNG, ולאחר מכן קישור <link rel="manifest" href="/site.webmanifest">.

שאלות נפוצות

What is the minimum HTML tag for a favicon?

Add <link rel="icon" href="/favicon.ico"> inside <head>. Place favicon.ico at your site root and every browser will find it.

Do I need separate tags for PNG and SVG favicons?

Yes for a modern setup. Link favicon.ico as the fallback, then add <link rel="icon" type="image/png"> and optionally type="image/svg+xml" for sharper rendering.

Where should favicon <link> tags go in HTML?

Inside the <head> element, before </head>. Order among icon links does not matter.

Do I need a web manifest for favicons?

Not for basic tabs, but add <link rel="manifest"> plus 192×192 and 512×512 PNG icons if you want PWA install prompts.

מדריכים קשורים

נסה את הכלים

המשך לקרוא