Hur man skapar en favicon.

Öppna Favicon / ICO-generatorn och välj Bild. Ladda upp en PNG, JPG, JPEG, WebP eller GIF, eller välj Prova ett exempel. Det bearbetade exemplet använder favicon-orbit.png, ett 512 × 512 pixlar violett omloppsmärke med transparenta hörn. Indata är 202,491 byte.

För ett varumärke utan en färdig logotyp, välj Text på verktygssidan. Ange en eller två bokstäver och välj Fortsätt. Redigeraren erbjuder typsnitten Modern sans, Classic serif och Monospace, plus separata färger för text och bakgrund. Upp till tre tecken accepteras, men extra tecken kan bli svåra att känna igen i små storlekar.

Behåll originalkonstverket. Generatorn skapar nya ikonfiler och skriver inte över källan. GIF-indata blir en stillbildsikon snarare än en animerad favicon.

För ett monogram börjar teckensnittsmenyn med tre inkluderade stilar. Välj Använd systemteckensnitt på en stödd skrivbordswebbläsare och tillåt åtkomst för att lägga till teckensnitt som är installerade på din enhet. Använd föregående och nästa vinklar för att jämföra intilliggande teckensnitt, eller välj en familj och inspektera live-förhandsgranskningen, särskilt vid 16 pixlar. Teckensnitt stannar på din enhet; de inkluderade stilarna fungerar utan tillstånd.

Redigeraren visar ljusa och mörka webbläsarflikar samt förhandsgranskningar i vanliga ikonstorlekar. Kontrollera 16-pixel-exemplet först; det är det strängaste testet för om märket förblir igenkännbart. Apple Touch-förhandsgranskningen representerar en 180-pixel-export och visas mindre i arbetsytan.

På en telefon, öppna Inställningar. Lämna Skapa från inställt på Uppladdad bild och Bildanpassning inställt på Visa hela bilden. För detta exempel, ställ in Avstånd runt innehåll till 0 och aktivera Transparent bakgrund. Källan innehåller redan sin egen rundade violetta form och tydliga marginaler, så den behöver inte en extra färgad bakgrund.

Med en annan källa behåller Visa hela bilden sina kanter, medan Fyll ikonen kan beskära dem. Rundad kvadrat, Kvadrat och Cirkel definierar den yttre formen. Transparent bakgrund bevarar tydliga områden men kan inte ta bort en ogenomskinlig bakgrund som redan ritats in i ett foto. Granska den minsta förhandsgranskningen efter varje inramningsändring.

Under Download, välj Website icon package (ZIP) för detta exempel. Lämna Website name som My website för exemplet, eller ersätt det med det riktiga varumärkesnamnet för ditt eget projekt. Detta namn används i site.webmanifest; det läggs inte till som text över bilden.

Välj Start. Webbläsaren genererar ett favicon.ico med sju bildrutor med kvadratiska bilder på 16, 24, 32, 48, 64, 128 och 256 pixlar. Den skapar även PNG-ikoner på 16, 32, 48, 180, 192 och 512 pixlar, ett manifest och installationsinstruktioner. Resultatet är en ZIP-fil istället för en separat nedladdningsknapp för varje ikon.

Om du bara behöver en klassisk favicon.ico, välj Multi-size ICO istället. Detta är användbart när en webbplatsplattform accepterar en ICO-uppladdning och inte behöver ett separat paket.

Download sparar website-icons.zip. Det faktiska arbetsexemplet innehåller nio filer och är 304,351 byte. Jämförelsen ovan visar källan på 512 pixlar bredvid den äkta 256-pixelramen som extraherats från den exporterade ICO, snarare än en simulerad webbläsarskärmdump.

Extrahera ZIP-filen, ladda upp ikonfilerna till din webbplatsrot och läs INSTALL.txt. Den innehåller HTML länktaggar för ICO, PNG-ikonen, Apple Touch-ikonen och webbmanifestet. Om du placerar filerna i en undermapp, uppdatera både HTML-sökvägarna och ikonsökvägarna inuti site.webmanifest.

Kontrollera din webbplats i en ny webbläsarflik och på de enheter du bryr dig om. Webbläsare kan cachelagra favikoner, så en gammal ikon bevisar inte omedelbart att installationen misslyckades. Behåll källbilden och det nedladdade paketet innan du uppdaterar redigeraren, eftersom en uppdatering återgår till huvudverktygssidan.