How do I add an iPhone app icon to my Web App?

Tilføj Dit Webapp-Ikon til iPhone Hjemmeskærmen

13/11/2022

★★★★★Rating: 4.91 (1734 votes)

I en verden, hvor mobiltelefonen er vores primære adgangspunkt til internettet, er det blevet afgørende for webapplikationer at levere en lige så gnidningsfri og integreret oplevelse som native apps. En af de mest effektive måder at opnå dette på er ved at give brugere mulighed for at tilføje din webapp til deres iPhone eller iPad hjemmeskærm med et skræddersyet ikon. Dette forbedrer ikke kun din applikations æstetik, men også dens brugervenlighed og din brandgenkendelse. Forestil dig, at din webapp vises side om side med populære native apps – et skridt der øjeblikkeligt løfter din applikations status i brugerens øjne. Denne guide vil dykke ned i, hvordan du implementerer denne funktion ved hjælp af det specielle apple-touch-icon HTML-tag.

How do I specify a website icon?
To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png To specify an icon for a single webpage or replace the website icon with a webpage-specific icon, add a link element to the webpage, as in:

Når en bruger vælger at 'Tilføj til hjemmeskærm' fra Safari på deres iOS-enhed, vil operativsystemet automatisk søge efter et ikon, der kan repræsentere din webapp. Uden et specifikt ikon vil iOS typisk oprette et skærmbillede af den aktuelle side, hvilket sjældent giver et attraktivt eller genkendeligt resultat. Ved at levere et veldesignet ikon sikrer du, at din webapp fremstår professionel og indbydende, hvilket opfordrer til gentagen brug. Det er en lille ændring, der har stor betydning for den samlede brugeroplevelse.

Indholdsfortegnelse

Hvad er et Web Clip-ikon, og hvorfor er det Vigtigt?

Et Web Clip-ikon, ofte blot kaldet et hjemmeskærmsikon, er det billede, der vises på en iOS-enheds hjemmeskærm, når en bruger har gemt en genvej til din webapp eller webside. Det fungerer på mange måder som et almindeligt app-ikon for en installeret applikation, hvilket giver øjeblikkelig visuel identifikation. For webudviklere er dette en unik mulighed for at integrere deres webbaserede tjenester dybere ind i iOS-økosystemet.

Vigtigheden af et Web Clip-ikon kan ikke undervurderes. For det første bidrager det massivt til din webapps brandidentitet. Et velkendt og konsistent ikon styrker din tilstedeværelse og gør din app let at finde blandt de mange andre ikoner på en brugers enhed. For det andet forbedrer det adgangen. I stedet for at skulle åbne Safari, indtaste en URL eller søge efter en bogmærket side, kan brugere blot trykke på ikonet direkte fra deres hjemmeskærm. Dette reducerer friktionen og øger sandsynligheden for, at din app bliver brugt regelmæssigt. Endelig giver det din webapp et mere 'native' udseende og følelse, hvilket kan være afgørende for at overbevise brugere om dens pålidelighed og professionalisme.

Den Grundlæggende Implementering: `apple-touch-icon` Tagget

At tilføje et brugerdefineret ikon til din webapp er overraskende ligetil, takket være en specifik HTML-tag, som iPhone Mobile Safari-webbrowseren genkender. Denne tag placeres i <head>-sektionen af din HTML-kode og fortæller browseren, hvilket billede der skal bruges som ikon, når webappen gemmes på hjemmeskærmen.

Den mest grundlæggende syntaks er som følger:

<link rel="apple-touch-icon" href="/sti/til/dit-ikon.png" />

Her er 'href' attributten afgørende, da den peger på stien til din ikonfil. Det er vigtigt at bemærke, at ikonet skal være i PNG-format. PNG er et ideelt format til ikoner, da det understøtter gennemsigtighed, hvilket kan være vigtigt for designfleksibiliteten, selvom nyere iOS-versioner typisk ignorerer glanseffekter og yderligere behandlinger af ikonet.

Ved at inkludere dette simple link-element i <head> af dit HTML-dokument, giver du iOS-enheder besked om, at der er et dedikeret ikon tilgængeligt for din webapp. Når en bruger derefter vælger 'Tilføj til hjemmeskærm', vil dette ikon blive brugt i stedet for et standard skærmbillede. Dette er fundamentet for at skabe en poleret og brugervenlig oplevelse for dine brugere.

Optimal Ikongstørrelse for Forskellige Enheder

For at sikre, at dit ikon ser skarpt ud på tværs af alle iOS-enheder – fra ældre iPhones til de nyeste iPads med Retina-skærme – er det essentielt at levere ikoner i forskellige opløsninger. iOS er intelligent nok til at vælge den mest passende størrelse, men du skal give den mulighederne.

Historisk set har Apple anbefalet forskellige størrelser. Oprindeligt var 57x57 pixels standard for ældre iPhones. Med introduktionen af Retina-skærme på iPhone 4 sprang behovet til 114x114 pixels for at opretholde skarpheden. iPad, med sin større skærm, krævede 72x72 pixels. Men i takt med at Apple har introduceret nye enheder og Retina-skærme med endnu højere pixeltæthed, er de anbefalede størrelser også vokset.

For at understøtte flere opløsninger og give dig mere kontrol over, hvilket ikon der vises på hvilken enhed, kan du bruge sizes-attributten i dit <link>-element. Dette giver dig mulighed for at specificere flere ikonstørrelser for forskellige enhedstypers skærmopløsninger. iOS vælger automatisk det mest passende ikon baseret på enhedens skærm.

<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" /> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-new.png" />

Bemærk: Den sidste størrelse, 180x180 pixels, er tilføjet her som et eksempel på nyere iPhone-modeller, da Apple ofte opdaterer deres retningslinjer. Det er altid en god idé at tjekke den seneste Apple-dokumentation for de mest opdaterede anbefalinger.

Oversigt over Anbefalede Ikonstørrelser

Enhed/SkærmAnbefalet Størrelse (pixels)Noter
Ældre iPhone (ikke-Retina)57x57Standard uden 'sizes' (ældre iOS)
iPhone 4/Retina (ældre)114x114Dobbelt opløsning
iPad (første gen.)72x72
iPhone (nyere Retina, f.eks. iPhone 6/7/8)120x120Fra iOS 7+
iPad (nyere Retina, f.eks. iPad Air/Mini)76x76Fra iOS 7+
iPad (nyere Retina, f.eks. iPad Pro)152x152Fra iOS 7+
iPhone (nyeste Retina, f.eks. iPhone 6 Plus/X/XS/XR/11/12/13/14/15)180x180Moderne iPhones

Hvis du ikke angiver en sizes-attribut, vil elementets standardstørrelse for webklip i nyere iOS-versioner typisk være 60x60 pixels. Hvis der ikke er et ikon, der matcher den anbefalede størrelse for enheden, vil systemet bruge det mindste ikon, der er større end den anbefalede størrelse. Hvis der ikke er nogen ikoner, der er større end den anbefalede størrelse, vil det største tilgængelige ikon blive brugt. Denne logik sikrer, at der altid vises et ikon, selvom det ikke er den perfekte størrelse, og iOS vil skalere det efter behov.

Strategier for Placering af Ikonfiler

Udover at specificere ikoner via <link>-tags, har du også mulighed for at placere ikoner direkte i din websites rodmappe. Dette er en bekvem metode, hvis du ønsker et standardikon for hele dit website uden at skulle tilføje et link-element til hver eneste side.

Website-Dækkende Ikon

Den nemmeste måde at specificere et ikon for hele dit website (dvs. hver side på websitet) er ved at placere en ikonfil i PNG-format direkte i din websites rodmappe. Filnavnet skal være apple-touch-icon.png. Hvis dette ikon er til stede, vil iOS automatisk finde og bruge det, selv hvis der ikke er et <link>-tag i HTML-koden.

How to add a website icon to iPhone home screen?
From the Share Sheet menu tap on Add to Home Screen option. After editing the name of the website tap on the Add button to add its icon to the home screen. That’s it, this is how you can easily add an icon for your favorite website on iPhone’s home screen and make it super easy to open it without open Safari browser first.

Eksempel på filplacering:

  • dinwebsite.com/apple-touch-icon.png

Dette er en god standardpraksis, da det sikrer, at selv sider, hvor du måske har glemt at inkludere <link>-tagget, stadig vil have et passende ikon.

Side-Specifikke Ikoner

Hvis du ønsker at specificere et ikon for en enkelt webside eller erstatte websitets standardikon med et side-specifikt ikon, bruger du <link>-elementet i HTML-koden for den pågældende side. Dette giver dig den højeste grad af kontrol og fleksibilitet.

<link rel="apple-touch-icon" href="/billeder/mit_unikke_ikon.png">

I eksemplet ovenfor vil /billeder/mit_unikke_ikon.png blive brugt som ikon for den specifikke side, hvor dette tag er indsat. Du kan kombinere dette med sizes-attributten for at tilbyde side-specifikke ikoner i forskellige opløsninger.

Automatisk Søgerækkefølge

Hvis der ikke er specificeret nogen ikoner ved hjælp af et <link>-element på den aktuelle side, vil iOS søge i websitets rodmappe efter ikoner med apple-touch-icon...-præfikset. Systemet søger efter filnavne i en bestemt rækkefølge, der er optimeret til at finde det bedst matchende ikon. For eksempel, hvis den passende ikonstørrelse for enheden er 60x60 pixels, kan systemet søge efter filnavne i følgende rækkefølge:

  • apple-touch-icon-76x76.png
  • apple-touch-icon.png
  • (Og potentielt andre størrelser, afhængigt af iOS-version og enhedens specifikke behov)

Denne fallback-mekanisme er yderst nyttig, da den sikrer, at din webapp sandsynligvis vil have et ikon, selv hvis du ikke har defineret alle tænkelige størrelser med <link>-tags. Det understreger dog vigtigheden af at have en velstruktureret ikon-strategi for at sikre den bedst mulige visuelle præsentation.

Designovervejelser og Bedste Praksis

Udover de tekniske specifikationer er der nogle designmæssige overvejelser, der kan hjælpe dig med at skabe et optimalt ikon til din webapp.

  • Format: Som nævnt skal ikonet være i PNG-format. Dette er standarden og understøtter gennemsigtighed, hvilket giver dig fleksibilitet i designet.
  • Gennemsigtighed og Effekter: Ældre versioner af Safari på iOS tilføjede automatisk en glanseffekt og afrundede hjørner til apple-touch-icon. Hvis du ikke ønskede denne effekt, kunne du tilføje -precomposed.png til filnavnet (f.eks. apple-touch-icon-precomposed.png) eller bruge rel="apple-touch-icon-precomposed". Dog tilføjer Safari på iOS 7 og nyere versioner ikke længere effekter til ikoner. Det betyder, at dit ikon vil blive vist præcis, som du designer det, uden glans, skygger eller afrundede hjørner fra iOS' side. Du skal derfor selv inkludere disse i dit design, hvis du ønsker dem. Dette giver dig fuld kontrol over det endelige udseende, men kræver også, at du designer ikonet, som det skal se ud på hjemmeskærmen.
  • Enkelthed og Genkendelighed: Dit ikon skal være simpelt, klart og øjeblikkeligt genkendeligt. Det er et lille lærred, så undgå for mange detaljer. Fokuser på dit brands logo eller et symbol, der repræsenterer din apps kernefunktion.
  • Kant-til-kant Design: Da iOS ikke længere tilføjer afrundede hjørner, skal du designe dit ikon helt ud til kanterne af den specificerede pixelstørrelse. iOS vil selv foretage den nødvendige maskering og afrunding, hvis det er relevant for enhedens visning.
  • Ingen gennemsigtighed i hjørnerne: Selvom PNG understøtter gennemsigtighed, bør du undgå at have gennemsigtige områder i hjørnerne af dit ikon. iOS vil fylde disse områder med sort, hvilket kan se uattraktivt ud. Design ikonet med en solid baggrund, der strækker sig til kanterne.

Ofte Stillede Spørgsmål (FAQ)

Hvad er forskellen på et almindeligt favicon og et `apple-touch-icon`?

Et almindeligt favicon (<link rel="icon" href="favicon.ico">) er et lille ikon, der vises i browserens faneblad, bogmærkelinjen eller i browserens adresselinje. Et apple-touch-icon er derimod specifikt designet til at blive vist på iOS-enheders hjemmeskærm, når en webapp eller webside er tilføjet som en genvej. Det er typisk meget større og mere detaljeret end et favicon for at sikre skarphed på Retina-skærme.

Skal jeg oprette et ikon for hver enkelt størrelse?

Det anbefales stærkt at oprette ikoner for de vigtigste størrelser (som angivet i tabellen ovenfor) og bruge sizes-attributten til at linke til dem. Dette sikrer den bedste visuelle kvalitet på tværs af forskellige enheder og skærmopløsninger. Hvis du kun angiver ét ikon, vil iOS skalere det, men det kan resultere i et mindre skarpt billede, især på Retina-skærme.

Hvad sker der, hvis jeg ikke angiver et `apple-touch-icon`?

Hvis du ikke angiver et apple-touch-icon via et <link>-tag eller ved at placere apple-touch-icon.png i rodmappen, vil iOS som standard tage et skærmbillede af den aktuelle webside, når brugeren forsøger at tilføje den til hjemmeskærmen. Dette skærmbillede vil blive brugt som ikon. Resultatet er sjældent optimalt og giver ikke din app et professionelt udseende eller en stærk brandidentitet.

Hvilket filformat skal ikonet have?

Ikonet skal være i PNG-format. Dette er det eneste understøttede format for apple-touch-icon.

Fjerner iOS automatisk effekter som glans fra mit ikon?

Ja, siden iOS 7 tilføjer Safari på iOS ikke længere glanseffekter eller afrundede hjørner til apple-touch-icon. Dit ikon vil blive vist præcis, som det er designet, inklusive eventuelle glans- eller skyggeeffekter, du selv har indbygget i billedet. Hvis du ønsker en bestemt visuel effekt, skal du designe den direkte ind i din PNG-fil.

Hvordan tester jeg mit `apple-touch-icon`?

For at teste dit ikon skal du uploade dine HTML-filer og ikonfiler til din webserver. Åbn derefter din webapp i Safari på en iPhone eller iPad. Tryk på 'Del'-ikonet (kassen med en opadgående pil) og vælg derefter 'Tilføj til hjemmeskærm'. Dit ikon skal nu vises i forhåndsvisningen. Hvis du tidligere har gemt siden, skal du muligvis rydde Safaris cache eller fjerne den eksisterende genvej fra hjemmeskærmen og prøve igen, da iOS cacher disse ikoner.

Konklusion

At tilføje et brugerdefineret ikon til din webapp er en lille, men utroligt effektfuld detalje, der kan forbedre din applikations fremtoning og brugervenlighed markant. Ved at udnytte <link rel="apple-touch-icon">-tagget og levere ikoner i de korrekte størrelser sikrer du, at din webapp fremstår lige så poleret og integreret som en traditionel native app på en iOS-enhed. Dette styrker ikke kun din brandidentitet, men også chancerne for, at brugere regelmæssigt interagerer med din applikation fra deres hjemmeskærm. Det er en simpel, men afgørende optimering for enhver, der ønsker at skabe en førsteklasses mobil weboplevelse.

Hvis du vil læse andre artikler, der ligner Tilføj Dit Webapp-Ikon til iPhone Hjemmeskærmen, kan du besøge kategorien Mobil.

Go up