# Favicon-design: små ikoner som ändå ser ut som du [Canonical HTML page](https://gradiently.design/sv/guide/favicon-design) Din favicon är den mest upprepade delen av ditt varumärke och den minsta. Den måste överleva i 16 pixlar, på ljusa och mörka flikar, bredvid femtio andra webbplatser. Så får du den att hålla. ## The short version - En favicon är den lilla ikonen som representerar en webbplats i webbläsarflikar, bokmärken, historik, startskärmar och sökresultat. - En modern minimal uppsättning är en favicon.ico på 32×32, en SVG-ikon, en Apple touch icon på 180×180 samt PNG-filer på 192×192 och 512×512 i ett webbappmanifest. - Google Sök visar en webbplatss favicon bredvid resultaten och ber om en kvadratisk ikon, helst större än 48×48 pixlar. - Favicons fungerar bäst som en kraftig form eller bokstav med stark kontrast, eftersom detaljer försvinner i 16 pixlar. - En SVG-favicon kan byta färger för mörkt läge med en mediefråga inne i filen. En **favicon** är den lilla kvadratiska ikonen som står för din webbplats i webbläsarflikar, bokmärken, historik, telefoners startskärmar och Google-resultat. Den visas ofta i bara 16 eller 32 pixlar, så bra favicon-design är skoningslös: en kraftig form eller bokstav, hög kontrast, inga fina detaljer. Tekniskt behöver du bara en handfull filer, en ICO på 32×32, en SVG, en Apple touch icon på 180×180 och två manifest-PNG:er, plus några rader HTML. ## Faviconstorlekar och filer du faktiskt behöver Gamla guider listar tjugo storlekar. Moderna webbläsare skalar bra, så en kort uppsättning täcker varje plats där en favicon visas. Det här följer det upplägg som [web.dev](https://web.dev/articles/add-manifest) rekommenderar för manifest och nuvarande webbläsarbeteende för resten. | Fil | Storlek | Används av | | --- | --- | --- | | `favicon.ico` | 32×32 | Äldre webbläsare, och allt som begär `/favicon.ico` direkt | | `icon.svg` | Skalbar | Nuvarande webbläsare som stöder SVG-favicons, kan anpassas till mörkt läge | | `apple-touch-icon.png` | 180×180 | Startskärmar på iPhone och iPad och bokmärken i Safari | | `icon-192.png` | 192×192 | Androids startskärm, via webbappmanifestet | | `icon-512.png` | 512×512 | Androids startbilder och appinstallationer, via manifestet | Fem filer. Lägg dem i roten av din webbplats, eller var som helst, så länge HTML:en pekar på dem. Google Sök visar också favicons bredvid resultat. Deras [riktlinjer för favicons](https://support.google.com/webmasters/answer/9290858) ber om en kvadratisk ikon, rekommenderar en större än 48×48 pixlar och säger att den ska representera ditt varumärke. PNG-filerna på 192 och 512 uppfyller båda kravet, men kontrollera den sidan före lansering, eftersom Google reviderar den. ## Så lägger du till en favicon på din webbplats ```html ``` Läggs i `head` på varje sida. Webbläsare som förstår SVG föredrar den, andra faller tillbaka på ICO. ```json { "name": "Studio Nine", "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" } ] } ``` Ett minimalt `manifest.webmanifest`. Den maskbara ikonen är valfri och låter Android beskära den till sina egna former. > **Maskbara ikoner behöver marginal** Android kan beskära en maskbar ikon till en cirkel, en squircle eller en rundad kvadrat. Håll det viktiga inom den centrala cirkeln, cirka 80 % av bredden, och fyll resten med bakgrundsfärg. ## Designa en favicon som syns i 16 pixlar I 16 pixlar har du 256 punkter. Ett helt ordmärke blir en grå fläck, tunna streck försvinner och två liknande färger flyter ihop. De favicons folk känner igen direkt är nästan alltid en av tre saker: en enda bokstav, en enkel symbol eller en solid form i en särskiljande färg. En kvadratisk appikon med en enda fet bokstav N på en gradientbakgrund En kraftig bokstav på en stark bakgrund. Den syns fortfarande när webbläsaren krymper den till 16 pixlar. En kvadratisk ikon med ett studionamn på tre ord, för detaljerad för att fungera som favicon Det fulla namnet ser bra ut i 512 pixlar och blir oläsbar textur i 16. Spara det till själva sidan. ### Undvik - Hela logotypen med ordmärket - Hårfina streck och små öppningar - Två närliggande färger som flyter ihop - Detaljer som går ända ut i kanterna - En transparent ikon som försvinner på mörka flikar ### Gör så här - En bokstav, ett monogram eller en symbol - Streck som är minst 2 pixlar tjocka i 32×32 - Stark kontrast mellan form och bakgrund - Fyll det mesta av kvadraten, med lite marginal - Testa i ljusa och mörka webbläsarteman ## Färg och gradienter i en liten ikon Färg gör mer jobb än form i den här storleken, eftersom det är den folk skannar efter längs en rad flikar. En igenkännbar varumärkesfärg slår en klurig symbol. Gradienter kan fungera om de är kraftiga och korta: två stopp med tydlig skillnad i ljushet läses som en belyst yta, medan en subtil blandning med flera stopp bara ser lerig ut i 16 pixlar. - Indigo till rosa: syns: `linear-gradient(135deg, #4338ca 0%, #db2777 100%)` - Blågrön till lime: syns: `linear-gradient(135deg, #0f766e 0%, #a3e635 100%)` - Bleka grå: försvinner: `linear-gradient(135deg, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)` Faviconbakgrunder behöver en tydlig ljushetsskillnad och en säker nyans. Den sista försvinner mot ett ljust flikfält. Om ditt varumärke redan har en signaturbakgrund kan ett utsnitt av den bli en särskiljande favicon-ruta. Gradiently Marks är användbara här: samma utseende som löper bakom dina inlägg kan ligga bakom en enda bokstav i 512×512, så att fliken och flödet känns som ett varumärke. Se till att bokstaven behåller stark kontrast mot rutan, som [logotyp på gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background) tar upp. ## Favicons för mörkt läge med SVG En svart ikon försvinner på ett mörkt flikfält, och en vit på ett ljust. Eftersom en SVG-favicon är ett litet dokument kan den bära sin egen mediefråga och byta färger med webbläsarens tema. ```html ``` Spara som `icon.svg`. En rundad ruta med bokstaven N som inverterar sina färger i mörkt läge. En solid ruta bakom symbolen är den enklaste försäkringen: den syns på vilken bakgrund som helst, ljus eller mörk, utan att förlita sig på mediefrågan. [SVG mot PNG](https://gradiently.design/sv/guide/svg-vs-png) förklarar varför vektorfilen är den att behålla. ## En snabb checklista för favicon 1. **Utgå från den enklaste delen av din logotyp** Ett monogram, första bokstaven eller bara symbolen. [Logotypvarianter](https://gradiently.design/sv/guide/logo-variations) går igenom hur du bygger en liten version med avsikt. 2. **Rita den i 32×32 först** Designa på det lilla rutnätet och skala upp, inte tvärtom. Tjocka streck, generösa mellanrum. 3. **Exportera de fem filerna** ICO i 32×32, SVG, Apple touch icon i 180×180, manifest-PNG:er i 192 och 512. 4. **Testa i riktiga flikar** Öppna din webbplats bredvid tio andra, i ljusa och mörka teman. Hittar du inte din flik på en sekund, förenkla. Faviconen sitter bredvid din [Open Graph-bild](https://gradiently.design/sv/guide/open-graph-image-size) och dina profilbilder i sociala medier som de små, konstanta signalerna för ett varumärke. Håll dem enhetliga, och se [logotypstorlekar](https://gradiently.design/sv/guide/logo-sizes) för hela paketet. ## FAQ ### Vilken storlek ska en favicon ha? Ha en favicon.ico på 32×32, en SVG, en Apple touch icon på 180×180 samt PNG-filer på 192×192 och 512×512 i ett manifest. Webbläsare väljer och skalar från dem. ### Hur lägger jag till en favicon på min webbplats? Ladda upp ikonfilerna och lägg till taggarna `link rel="icon"` och `link rel="apple-touch-icon"` i `head` på varje sida, plus en manifestlänk för Android. ### Varför visas inte min favicon i Google? Google behöver en kvadratisk favicon, helst större än 48×48 pixlar, länkad från din startsida och möjlig att genomsöka. Det kan ta en tid att uppdateras efter att du ändrat den. ### Kan en favicon vara en SVG? Ja, nuvarande webbläsare som stöder SVG-favicons använder den och den förblir skarp i alla storlekar. Behåll en favicon.ico som reserv. ### Ska min favicon vara hela min logotyp? Oftast inte. Använd en bokstav, ett monogram eller logotypens symbol, eftersom ett helt ordmärke är oläsligt i 16 pixlar.