الأدوات › التصميم
استوديو favicon وأيقونات التطبيقات
حوّل شعارًا واحدًا إلى favicon.ico وapple-touch-icon وأيقونات Android المتكيفة والقابلة للقص ومجموعة AppIcon لنظام iOS وsite.webmanifest.
ما الذي يحتويه
favicon.ico (16 و32 و48)، وأيقونات مفضلة بصيغة PNG، وapple-touch-icon، وأيقونات Android Chrome والأيقونات القابلة للقص، وsite.webmanifest، ومجموعة AppIcon لنظام iOS في Xcode، وأيقونات mipmap لنظام Android مع أيقونة متكيفة، وهذا المقتطف من HTML:
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#F39A3D">
كيف يعمل
- يُرسم شعارك على canvas بكل المقاسات، مع مناطق آمنة للأيقونات القابلة للقص والمتكيفة.
- يحتوي favicon.ico على صور PNG بمقاسات 16 و32 و48 px، تقرؤها كل المتصفحات الحالية.
أسئلة
ما أفضل صورة مصدر؟
ملف SVG، أو PNG مربع بمقاس 512×512 على الأقل مع مساحة فارغة حول الشعار.