الأدوات › التصميم

استوديو 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">

كيف يعمل

  1. يُرسم شعارك على canvas بكل المقاسات، مع مناطق آمنة للأيقونات القابلة للقص والمتكيفة.
  2. يحتوي favicon.ico على صور PNG بمقاسات 16 و32 و48 px، تقرؤها كل المتصفحات الحالية.

أسئلة

ما أفضل صورة مصدر؟

ملف SVG، أو PNG مربع بمقاس 512×512 على الأقل مع مساحة فارغة حول الشعار.