Spring til hovedindhold

Apple Touch Icon vs Favicon: Hvad skal et moderne websted indeholde?

Af Converty Team

Sammenlign Apple touch-ikoner og -faviconer, forstå, hvorfor moderne websteder ofte har brug for begge dele, og lær, hvordan du pakker dem fra ét kildebillede.

Apple Touch Icon vs Favicon: Hvad skal et moderne websted indeholde?

Et Apple touch-ikon og et favicon er relaterede, men de er ikke den samme fil, der tjener det samme formål. Et favicon er normalt forbundet med browserfaner, bogmærker og velkendte browser-chrome. Et Apple touch-ikon er beregnet til Apple-enhedsgenvejsoverflader, hvor webstedet kan se mere ud som et app-ikon.

Forvirringen er forståelig, fordi begge filer starter fra det samme mærke i mange projekter. Kildeillustrationen kan være ét firkantet billede, men pakken skal tjene forskellige overflader. Derfor bør en moderne favicon-arbejdsgang ikke stoppe ved en enkelt favicon.ico-fil.

Hvad et favicon gør

Et favicon er den lille visuelle markør, som brugere ser i browserfaner, bogmærker, historik og relaterede browsergrænseflader. Det hjælper brugere med at genkende webstedet hurtigt, når flere faner er åbne.

Den klassiske fil er favicon.ico, selvom mange moderne opsætninger også inkluderer PNG-ikonfiler. Til rutinemæssige webstedslanceringer er det stadig praktisk at beholde favicon.ico i pakken, fordi det dækker velkendte forventninger og kompatibilitetsstier.

Hvad et Apple touch-ikon gør

Et Apple-berøringsikon bruges, når et websted er gemt på Apple-enhedsoverflader, såsom genveje på startskærmen. Det er ikke bare en lille fanemarkør. Det skal fungere som et ikon i en mere app-agtig sammenhæng.

Det ændrer designtrykket. Et browserfaneikon kan være ekstremt lille. Et berøringsikon kan se større ud, men det skal også føles rent, centreret og genkendeligt som et selvstændigt mærke. Det samme kildebillede kan fungere for begge, hvis det er enkelt og firkantet, men outputtet skal stadig pakkes korrekt.

Hvorfor moderne websteder ofte har brug for begge dele

Hvis dit websted kun har et favicon, kan browseroplevelsen på computeren se fin ud, mens mobilgenvejsflader føles ufuldstændige eller inkonsekvente. Hvis din pakke kun fokuserer på berøringsikoner, kan du stadig gå glip af den traditionelle browserfanesti.

For en SaaS-lancering, dokumentationsside, produktmikrosite eller lille webapp er det praktiske svar normalt begge dele. Du vil have en pakke, der dækker browserfaner og app-lignende genveje uden at bede nogen om manuelt at eksportere hver ikonvariant.

Det er her Favicon / App Icon Generator passer. Den genererer favicon.ico, PNG-ikoner, Apple-berøringsikoner, Android-klare ikoner og en starter site.webmanifest fra ét firkantet kildebillede.

Kildeillustrationen er den delte begrænsning

Den største kvalitetsfaktor er kildebilledet. Det samme mærke skal overleve flere overflader og størrelser. Detaljerede illustrationer, lille tekst og kant-til-kant-illustrationer fungerer normalt dårligt. En simpel form med nok polstring er mere tilbøjelig til at forblive genkendelig.

Converty inkluderer en cirkulær mulighed for browser- og Android-output, mens Apple touch-ikoner forbliver firkantede. Det betyder noget, når dit varemærke fungerer bedre inde i en cirkulær ramme, men du stadig ønsker, at Apple-overflader beholder deres forventede firkantede behandling.

Den praktiske beslutning

Brug et favicon, når du har brug for browsergenkendelse. Brug et Apple-berøringsikon, når du bekymrer dig om Apple-genvejsoverflader. Brug en komplet pakke, når du ønsker, at siden skal føles færdig på tværs af begge.

For en dybere fil-tjekliste, læs Hvilke filer har du brug for i en favicon-pakke?. Når du er klar til at eksportere aktiverne, skal du åbne Favicon / App Icon Generator, uploade et firkantet kildebillede, gennemgå pakken og downloade ZIP.

Du kan måske også lide