كيفية إضافة favicon في HTML

ثلاثة وسوم تُغطّي 99% من الحالات. وسمان إضافيان يمنحانك إعدادًا بمستوى PWA كامل.

3 دقيقة قراءة

الوسم الأساسي

<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 يحتوي إدخالات PNG بمقاسي 192×192 و512×512، ثم اربط <link rel="manifest" href="/site.webmanifest">.

جرب الأدوات

متابعة القراءة

استكشف FetchFavicon

الفئات

المحوّلات

الأدوات

الأدلة

الدروس