Favicon-generator för webbplatser
Alla ikoner som din webbplats behöver, skapade från din logotyp och redo att ladda upp.
Skapa en komplett favicon för din webbplats från din logotyp: ikonen i webbläsarens flik, ikonerna för hemskärmen på iPhone och Android, manifestet och HTML-koden som länkar dem. Ladda upp en PNG-, JPG-, WebP- eller SVG-bild och ladda ned en ZIP-fil med allt, utan konto och utan vattenstämpel.
Så skapar du en favicon
- Välj din logotyp eller ikon i PNG, JPG, WebP eller SVG; helst kvadratisk och minst 512 pixlar.
- Välj om bilden ska visas hel eller fylla ut kvadraten, och bakgrundsfärgen för Apple-ikonen.
- Klicka på ”Skapa favicon” och ladda ned ZIP-filen.
- Ladda upp filerna till webbplatsens rotkatalog och klistra in koden från head.html i head-taggen på dina sidor.
Det här ingår i paketet
| Fil | Vad den är till för |
|---|---|
favicon.ico |
Den klassiska flikikonen, med storlekarna 16, 32 och 48 pixlar i en enda fil. Webbläsarna letar efter den även om du inte länkar den. |
favicon-16x16.png och favicon-32x32.png |
Ikonerna för flikar och bokmärken i moderna webbläsare. |
apple-touch-icon.png |
Ikonen på 180 pixlar som iPhone och iPad använder när din webbplats läggs till på hemskärmen. |
android-chrome-192x192.png och android-chrome-512x512.png |
Ikonerna för Android och installerbara webbappar. |
site.webmanifest |
Manifestet som anger Android-ikonerna och din webbplats färg. |
head.html |
Taggarna som länkar ikonerna från dina sidor. |
Så installerar du den på din webbplats
- Packa upp filen och ladda upp alla filer, utom
head.html, till webbplatsens rotkatalog (där startsidan ligger). - Kopiera de här taggarna, som också finns i
head.html, tillhead-taggen på dina sidor:
<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">
- Om du vill skriver du in webbplatsens namn i
nameochshort_nameisite.webmanifest.
Webbläsarna cachar favicon: ser du inte den nya direkt laddar du om sidan helt eller väntar en stund.
Anpassa eller fyll ut
Alla ikoner är kvadratiska. Är din bild inte det kan du anpassa den, så att den visas hel med genomskinliga marginaler, eller låta den fylla ut kvadraten, så att det som blir över på sidorna beskärs. För en liggande logotyp med text fungerar det oftast bättre att bara använda logotypens symbol, beskuren till en kvadrat.
Apple-ikonen kan inte vara genomskinlig: iOS skulle fylla bakgrunden med svart. Därför skapar vi den med den bakgrundsfärg du väljer, som också används som din webbplats färg på Android. De andra ikonerna behåller sin genomskinlighet.
Tips för ett bra resultat
- Utgå från en stor bild, minst 512 × 512 pixlar, eller ännu hellre en SVG: de små ikonerna räknas ut från den.
- Håll det enkelt: vid 16 pixlar går det inte att läsa text eller se fina detaljer. En symbol eller en initial i kontrasterande färger fungerar mycket bättre.
Behöver du bara .ico-filen kan du konvertera din PNG till ICO.
Begränsningar
- En bild i taget, upp till 20 MB och 100 megapixlar.
- Vi ändrar inte din webbplats: du måste själv ladda upp filerna och lägga till taggarna, eller be den som sköter den om det.
Vanliga frågor
Hur stor ska bilden vara för att skapa en favicon?
Ju större, desto bättre: minst 512 × 512 pixlar, eller en SVG. Alla ikoner, från 512 ned till 16 pixlar, räknas ut från den.
Var laddar jag upp favicon-filerna?
Till webbplatsens rotkatalog, samma mapp som startsidan. Klistra sedan in taggarna från head.html i head-taggen på dina sidor.
Varför ser jag inte den nya favicon i min webbläsare?
Eftersom webbläsarna cachar favicon. Ladda om sidan helt, öppna den i ett privat fönster eller vänta en stund på att den uppdateras.
Varför har Apple-ikonen en färgad bakgrund?
Eftersom iOS inte stöder genomskinlighet i ikoner på hemskärmen och skulle fylla bakgrunden med svart. Vi skapar den med den bakgrundsfärg du väljer så att den ser bra ut.
Kan jag skapa min webbplats favicon i WordPress?
WordPress har ett eget alternativ, ”Webbplatsikon” (under Utseende › Anpassa › Webbplatsidentitet eller, beroende på version och tema, i de allmänna inställningarna): du laddar upp en kvadratisk bild och storlekarna skapas automatiskt. Paketet från det här verktyget är för webbplatser där du kan ladda upp filer och redigera koden.