Tools › Design
Favicon- und App-Icon-Studio
Machen Sie aus einem Logo favicon.ico, apple-touch-icon, adaptive und Maskable-Icons für Android, ein iOS-AppIcon-Set und site.webmanifest.
Was ist enthalten
favicon.ico (16, 32, 48), PNG-Favicons, apple-touch-icon, Android-Chrome- und Maskable-Icons, site.webmanifest, ein iOS-AppIcon-Set für Xcode, Android-Mipmaps mit adaptivem Icon und dieses HTML-Snippet:
<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">
So funktioniert es
- Ihr Logo wird in jeder Größe auf ein Canvas gezeichnet, mit Sicherheitszonen für Maskable- und adaptive Icons.
- favicon.ico enthält PNGs mit 16, 32 und 48 px, die jeder aktuelle Browser liest.
Fragen
Welche Vorlage eignet sich am besten?
Ein SVG oder ein quadratisches PNG mit mindestens 512×512 und etwas Freiraum um das Logo.