Gratis · Ingen registrering · Körs i webbläsaren

Favicon-generator

Lägg in din logotyp så ger favicon-generatorn dig en komplett uppsättning faviconfiler, från ikonen på 16 pixlar i webbläsarfliken till appikonen på 512 pixlar, plus HTML-koden att klistra in. Allt sker i webbläsaren, så din bild laddas aldrig upp.

Släpp din logotyp här

PNG, JPG, WebP eller SVG. Kvadratisk fungerar bäst, 512 px eller större.

Skapas i webbläsaren. Din bild laddas aldrig upp.

Prova en av våra

Vad en favicon är och var den syns

En favicon är den lilla kvadratiska ikonen som representerar din webbplats. Namnet kommer från engelskans ”favorite icon”, favoritikon. Den första webbläsaren som visade en favicon placerade den bredvid bokmärkena, som där hette Favoriter.

Du ser den i webbläsarflikar, bredvid sidans titel, 16 pixlar bred eller 32 på en skarpare skärm. Den markerar också din webbplats bland bokmärken och i historiken. När någon sparar din webbplats på mobilens hemskärm blir den en appikon. Och Google visar den bredvid webbplatsens namn i sökresultaten.

Överallt har den samma uppgift: att kännas igen direkt bland andra ikoner.

Varför en favicon blir flera filer

De här platserna tillkom vid olika tidpunkter, och var och en vill ha sin egen fil. Favicon-generatorn här ovanför skapar dem alla från en enda bild.

Webbläsarflikar, bokmärken och historik använder favicon.ico, en enda fil med versioner på 16, 32 och 48 pixlar. Det är det äldsta formatet: när en sida inte anger någon ikon letar webbläsare fortfarande efter favicon.ico i webbplatsens rotmapp.

Utgår du från en SVG får du också favicon.svg, som används i stället av webbläsare som kan rita SVG-ikoner. Den består av former i stället för pixlar och är därför skarp på alla skärmar.

iPhone och iPad använder apple-touch-icon.png, 180 × 180 pixlar, när någon lägger till din webbplats på hemskärmen. En iPhone fyller genomskinliga ytor med svart, så den här ikonen får alltid en heltäckande bakgrund: din färg, eller vit om du valde genomskinlig.

Android-mobiler, och webbplatser som installeras som appar från webbläsaren, använder icon-192.png och icon-512.png. De hittar dem via site.webmanifest, en liten textfil som talar om för webbläsaren vad webbplatsen heter, om du skrev in ett namn i verktyget, och var de större ikonerna finns.

De lösa PNG-filerna på 16 till 48 pixlar är reserver för tjänster som vill ha en PNG. För sökresultaten läser Google ikonlänkarna i startsidans HTML.

Så lägger du in faviconfilerna på din webbplats

Om du eller din utvecklare redigerar webbplatsens filer tar det två steg.

Packa först upp nedladdningen och lägg filerna i webbplatsens rotmapp, den översta mappen där startsidan ligger. Kontrollera genom att lägga till /favicon.ico efter webbplatsens adress: då ska ikonen visas.

Klistra sedan in HTML-raderna från README-filen (verktyget visar dem också) i sidornas head-sektion, delen högst upp i HTML-koden där sidans titel finns. Det finns en rad var för ICO-filen, Apple touch-ikonen och manifestet, plus en för SVG-filen om du har en.

Oftast använder alla sidor samma sidmall, så du behöver bara klistra in raderna en gång. Ta först bort eventuella äldre ikonrader, annars kan webbläsarna fortsätta att välja den gamla ikonen.

Med en webbplatsbyggare kan du hoppa över båda stegen: ladda upp icon-512.png under inställningen för webbplatsikon, så lägger byggaren till HTML-koden åt dig.

Så får du en logotyp att fungera på 16 pixlar

Vid 16 × 16 pixlar består hela ikonen av 256 små färgrutor. De flesta logotyper är inte ritade för det.

Börja med symbolen, inte namnet: klämmer du in ett namn på åtta bokstäver på 16 pixlar får varje bokstav två pixlar i bredd. Ingen symbol? Använd första bokstaven, stor och fet. Kraftiga bokstäver klarar sig också mycket längre än tunna när de krymps.

Ta sedan bort detaljer. Mycket tunna linjer och små mellanrum flyter ihop med omgivningen, och en slogan blir en fläck.

Det som räknas är ljust mot mörkt, inte själva färgerna. Flikar är ljusa eller mörka beroende på tema, och en marinblå ikon försvinner i ett mörkt flikfält. Är din logotyp mörk, ge den en ljus bakgrund i verktyget, eller tvärtom.

Marginalen, utrymmet mellan logotypen och kvadratens kant, är en avvägning. Är den för stor krymper logotypen i fliken. Är den för liten klipper en iPhone av logotypens hörn, eftersom den rundar av ikonerna på hemskärmen.

Titta till sist på förhandsvisningarna i ljus och mörk flik här ovanför i verklig storlek, utan att zooma in. Vill du gå längre kan du kontrollera din logotyp gratis: verktyget krymper den till 32 pixlar och mäter hur mycket av detaljerna som finns kvar.

När du ska rita om symbolen i stället för att krympa den

Ibland går det inte att rädda. I en detaljrik illustration eller en 3D-stil som bygger på skuggor är detaljerna själva designen, och på 16 pixlar är de borta. Verktyget kan ändra storlek på din logotyp, men det kan inte rita om den.

Det gör den inte till en dålig logotyp, bara till en som är gjord för större ytor. Rita i stället en egen liten version: en förenklad symbol eller din initial i varumärkets typsnitt. Behåll färgerna och något av formen, så kopplar folk ihop dem. Vi väljer en tydlig initial framför en suddig miniatyr varje gång.

Behöver du en ny symbol? Vår AI-logotypgenerator formger en utifrån ditt varumärkesnamn, och en kort beskrivning om du vill. Logotyper från våra logotypmallar har symbolen som separat fil när de har en, och varje logotyp du köper hos oss innehåller sina faviconfiler.

FAQ

Frågor om favicons

Den är gratis, utan registrering och utan vattenstämpel. Och din bild stannar hos dig. Verktyget körs helt i webbläsaren: det skapar alla storlekar och zip-filen direkt på din enhet, och bilden skickas aldrig till våra servrar. Därför går det bra att använda det på en logotyp som du inte har visat för någon än.

Kvadratisk och minst 512 pixlar på varje sida. Den största ikonen i uppsättningen är 512 pixlar, så en mindre PNG, JPG eller WebP måste förstoras för att fylla den, och de stora ikonerna blir oskarpa. Verktyget säger till när det händer. En SVG har ingen sådan gräns: den består av former, inte pixlar, och är därför skarp i alla storlekar. En bred logotyp fyller bara en tunn remsa av en kvadrat, så utgå från din symbol eller initial.

Du vill ha alla, eftersom olika webbläsare och mobiler ber om olika filer, och HTML-koden från verktyget talar om för var och en vilken fil den ska använda. ICO-filen förstår alla webbläsare. PNG-filerna är till för mobiler och installerade appar, med reserver i de små storlekarna. SVG-filen, som du får när du utgår från en SVG, är skarp på alla skärmar i webbläsare som stöder den.

Troligen visar webbläsaren en sparad kopia. Webbläsare håller kvar favicons mycket längre än resten av en sida, så den gamla ikonen kan ligga kvar efter att de nya filerna har publicerats. Prova en hård omladdning, som laddar om sidan utan dess sparade filer: Ctrl+Shift+R i Windows, Cmd+Shift+R på en Mac (Option+Cmd+R i Safari). Hjälper inte det kan du öppna webbplatsens adress med /favicon.ico på slutet och ladda om den, eller titta i ett privat fönster. Andras webbläsare hänger med efter hand.

I byggarens inställningar snarare än i en mapp. De flesta webbplatsbyggare och e-handelsplattformar har en inställning för webbplatsikon eller favicon där du laddar upp en kvadratisk PNG. Välj icon-512.png, den största filen i zip-filen, så har byggaren gott om pixlar att arbeta med när den skapar mindre storlekar. Frågar inställningen efter en viss storlek använder du filen som passar. Byggaren lägger till HTML-koden åt dig, så du kan hoppa över README-filen.

Google hämtar en ny favicon nästa gång dess sökrobot, programmet som läser webbsidor åt Google, besöker din startsida. Det finns inget fast schema för det. Google vill ha en kvadratisk bild och ikonlänken i startsidans HTML, så kontrollera att båda finns på plats. Sedan är det upp till Google vad som visas och när, så ge det tid.