Hoppa till huvudinnehåll

Vilka filer behöver du i ett Favicon-paket?

Av Converty Team

Lär dig vilka filer som hör till ett praktiskt faviconpaket, inklusive favicon.ico, PNG-ikoner, Apple touch-ikoner, Android-ikoner och en startikon site.webmanifest.

Vilka filer behöver du i ett Favicon-paket?

Ett faviconpaket är lätt att underskatta. Många människor tänker på det som en liten bild på en webbläsarflik, men en modern webbplats behöver vanligtvis en liten uppsättning relaterade tillgångar. Webbläsarflikikonen är bara en yta. Mobilgenvägar, Android-ikoner, Apple-pekikoner och manifestreferenser kan alla behöva sina egna filer.

Det praktiska målet är inte att samla alla möjliga ikonvarianter. Målet är att leverera ett fokuserat paket som täcker vanliga webbläsare och appliknande ytor utan att förvandla lanseringsförberedelser till manuellt exportarbete. Favicon / App Icon Generator i Converty är uppbyggd kring det jobbet: börja från en kvadratisk bild och ladda ner ett paket med de vanliga filerna tillsammans.

Kärnfilen är fortfarande favicon.ico

favicon.ico är fortfarande den mest kända favicon-filen. Det är tillgången som folk förväntar sig att se förknippad med webbläsarflikar, bokmärken och äldre faviconkonventioner.

Även när en webbplats även innehåller PNG-ikoner och ett webbmanifest är favicon.ico fortfarande användbart eftersom det täcker en traditionell väg som många webbläsare och verktyg förstår. För en enkel webbplats är det ofta den första filen någon kontrollerar när flikikonen inte ser rätt ut.

PNG-ikoner täcker moderna ytor

Moderna ikonpaket inkluderar vanligtvis PNG-filer i flera storlekar. Olika webbläsare, genvägar och visningssammanhang kan ha olika dimensioner. Export av endast en storlek kan lämna webbläsaren eller enheten att skala bilden, vilket kan få små ikoner att se mjuka eller trånga ut.

Det är därför källkonstverk är viktigt. En fyrkantig, enkel, läsbar bild ger bättre resultat över hela förpackningen än en detaljerad grafik som pressats in i flera storlekar. Converty kan inte förvandla en komplex logotyp till ett perfekt litet märke, men det kan ta bort det upprepade exportarbetet när du väl har en lämplig källa.

Apple touch-ikoner och Android-ikoner tjänar olika ytor

Apple touch-ikoner används för Apple-enheters genvägsytor. Android-klara ikoner stöder relaterade installations- och genvägsanvändningsfall på Android-orienterade ytor.

Dessa filer är lätta att glömma eftersom de inte alltid är synliga under en vanlig webbläsarkontroll. Webbplatsen kan se bra ut på en flik samtidigt som den saknar tillgångar som är viktiga efter att någon har sparat den på enhetens startskärm. Ett komplett paket gör det mindre troligt.

Om du bestämmer dig för om en Apple-pekikon är skild från en favicon, läs Apple Touch Icon vs Favicon: What Should a Modern Site Include?.

Manifestet binder samman appliknande ytor

En start site.webmanifest ger en webbapp eller webbplats en plats att beskriva ikoner och relaterad visningsmetadata. Det är inte en ersättning för själva ikonfilerna. Den pekar på dem så att kompatibla ytor kan förstå vilka tillgångar som finns tillgängliga.

Det är därför Converty inkluderar ett startmanifest i paketet. Den genererade filen ger dig en praktisk utgångspunkt, men du måste fortfarande placera tillgångarna i ditt projekt och referera till dem från din webbplatsinställning.

En praktisk checklista för faviconpaket

Ett fokuserat favicon-paket bör vanligtvis innehålla:

  • favicon.ico
  • Flera PNG-ikonstorlekar
  • Apple touch-ikonutgång
  • Android-klar ikonutgång
  • en förrätt site.webmanifest

Detta räcker för många små sajter, SaaS-lanseringar, marknadsföringssidor och dokumentationsprojekt. Mer specialiserade inställningar kan behöva extra plattformsspecifika tillgångar, men det gemensamma paketet får rutinarbetet ur vägen.

Öppna Favicon / App Icon Generator när du har en kvadratisk källbild och behöver de vanliga favicon-paketfilerna samlade i en export. För det bredare arbetsflödet, läs Hur man genererar ett komplett faviconpaket från en bild.

Du kanske också gillar