Narzędzia › Projektowanie
Studio favicon i ikon aplikacji
Zamień jedno logo w favicon.ico, apple-touch-icon, adaptacyjne i maskowalne (maskable) ikony Androida, zestaw AppIcon dla iOS i site.webmanifest.
Co jest w środku
favicon.ico (16, 32, 48), favikony PNG, apple-touch-icon, ikony Android Chrome i maskable, site.webmanifest, zestaw AppIcon dla iOS do Xcode, mipmapy Androida z ikoną adaptacyjną oraz ten fragment 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">
Jak to działa
- Logo jest rysowane na canvasie w każdym rozmiarze, z bezpiecznymi strefami dla ikon maskowalnych i adaptacyjnych.
- favicon.ico zawiera pliki PNG 16, 32 i 48 px, które odczytuje każda współczesna przeglądarka.
Pytania
Jaki plik źródłowy sprawdza się najlepiej?
SVG albo kwadratowy PNG o wymiarach co najmniej 512×512 z odrobiną wolnego miejsca wokół znaku.