Temafärg och appikoner

Manifestets theme_color anger färgen när appen körs som en installerad PWA (titelfältet i det fristående fönstret). Matcha den mot meta-elementet för theme-color på sidan för konsekvensens skull – den visuella identiteten förblir densamma oavsett om appen körs i webbläsaren eller är installerad.

<link rel="icon" href="/favicon.ico"> är den klassiska ikonen för webbläsarfliken. Trots namnet föredrar moderna webbläsare PNG eller SVG framför ICO. Ange en PNG-bild på 32x32 via <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> för skarpare återgivning.

Moderna webbläsare stöder SVG-favicons: <link rel="icon" type="image/svg+xml" href="/icon.svg">. De är skarpa i alla storlekar och har mycket liten filstorlek. Använd SVG för vektorlogotyper och komplettera med en PNG-reservlösning för webbläsare som inte stöder SVG-favicons.

På iOS används apple-touch-icon på hemskärmen: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Ange en PNG-bild på 180x180. iOS läser inte ikonerna i webbmanifestet vid installation på hemskärmen; länken till apple-touch-icon krävs.

Vid installation på Android hämtas ikonerna från manifestets icons-array. Inkludera PNG-bilder på 192x192 (hemskärmen) och 512x512 (startskärmen och applådan). Lägg till en kopia med syftet "maskable" så att Android kan beskära ikonen efter formen på hemskärmsikonen (cirkel, squircle eller kvadrat).

Maskable-ikoner bör ha sitt viktigaste innehåll inom en säker zon som täcker de centrala 80 procenten – de yttre 20 procenten kan beskäras beroende på enhetens maskform. Använd verktyg som maskable.app för att förhandsgranska ikonen med olika maskformer under designarbetet.

För fästa paneler i Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> och <meta name="msapplication-TileColor" content="#1f2937">. Detta har lägre prioritet än stöd för andra plattformar i dag, men uppskattas fortfarande av Windows-användare som fäster webbplatser.

Äldre IE/Edge: <meta name="msapplication-config" content="/browserconfig.xml"> hänvisar till en XML-fil med panelikoner i flera storlekar. Detta är i stort sett irrelevant i dag; nya webbplatser kan utelämna browserconfig.xml utan konsekvenser.

För en fäst flik i Safari på macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. SVG-filen bör innehålla en ikon i en enda färg, eftersom färgen åsidosätts av attributet color. Funktionen används endast för fästa flikar i Safari på macOS.

Använd realfavicongenerator.net för att skapa alla ikonvarianter från en enda källfil. Testa på en fysisk iOS-enhet (lägg till på hemskärmen) och Android (installera appen från webbläsarens meny) för att kontrollera att ikonerna beskärs korrekt och inte blir pixliga.

theme-color (med varianter för mediefrågor) färgar adressfältet, medan manifestets theme_color färgar titelfältet i den installerade appen. Ikoner omfattar favicons (SVG + PNG), apple-touch-icon (iOS, 180x180), manifestikoner (Android, 192 + 512 + maskable), Safaris mask-icon (SVG i en enda färg) och msapplication-TileImage (fästa Windows-paneler). Använd realfavicongenerator.net för att skapa alla varianter från en enda källfil.