Hur man lägger till en webbplats ikoner för iPhone, iPad och iPod Touch

Favicon.ico - webbplats ikon i webbläsaren

Innan det lanserat en webbplats och lägga till en bildfil, favikon, som visas i webbläsaren i adressfältet. I de flesta situationer är favicon en miniatyrbild av den grafiska logotypen eller webbplatsens initialer. Detta favicon läggs till för att hjälpa användare att identifiera en webbadress i bokmärken snabbare.

Stealth Settings Favicon

Stealth Settings Favicon i Safari

Favicon i Opera

Favicon i Opera

Tills nyligen, bör den här filen vara av formen "favicon.ico", Identifieras av webbläsaren. Chrome, Internet Explorer, Opera, Safari, Firefox, etc.
Under flera år, med stigande nya webb språk HTML5 si CSS3, Favicons kan vara en .png fil eller . Jpg. Villkoret är att huvudet på plats, innan </ head>, Var den här raden:

<Link rel = "genväg" href = "/ images / favicon.ico" type = "image / x-icon" />

Webbsida Ikon för iOS - iPhone, iPad och iPod Touch

In iOS Vi kan lägga till Webbsida genvägar pe StartskärmCPC iPhone, iPad si iPod Touch.

Hur man lägger till en webbplats genväg på iPhone, iPad och iPod startskärmen

Vi gör detta genom att öppna en webbplats på din iPhone (Safari, Chrome, webbläsare etc.), klicka på torget med pilen (tecknet för "dela" i iOS), då alternativet "Lägg till på hemskärmen".

Om webbplatsen har satt favicon för din webbläsare, men inte satt iOS enhetsspecifik ikon webbplatser, Skärmen visas en ikon som består av en image preview webbsida.

Hur man lägger till webb ikoner för iPhone, iPad och Android.

Det första steget är att skapa en bild ikonSom visas på StartskärmCPC iDevice gemenskap. För webb ikon är kompatibel på alla enheter och att se klart, vi måste skapa bilden för alla iPhone och iPad resolutioner.

Upplösningar och standardikonstorlekar för iPhone, iPad, iPod och Android

  • Klassiska modeller av iPhone / iPod = 57 57 ×
  • iPad = 76 76 ×
  • iPhone / iPod Retina x = 120 120
  • iPad Retina × = 152 152
  • iPhone 6 / 6S Plus = 180 180 ×

Apple uppdateras regelbundet Rekommenderad ikonstorlekURL: er tillämpningar si Webbsidor pe denna sida.

För enheter Android, ikoner är två dimensioner:

  • Klassisk Android = 128 × 128
  • Android högupplösning (hi-res) = 192 × 192

ikoner

Efter att vi gjort bilderna, klättra upp på webbservern, HTML-källan på webbplatsen före sluttaggen </ head>, lägg till följande rader:

<link href="/apple-touch-icon.png" rel="apple-touch-icon" /> <link href="/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="/icon-hires.png" rel="icon" sizes="192x192" /> <link href="/icon-normal.png" rel="icon" sizes="128x128" />

För enheter Apple, måste namnet på .PNG-bilden och "rel =" innehålla prefixet "apple-". För Android kommer filnamnet att vara "icon hires.png"Och"icon normal.png"Med rel =" ikon ".

Det är inte absolut nödvändigt att skapa bilder för varje upplösning individuellt. Du kan skapa en bild för den högsta upplösningen, och enheter med lägre upplösning identifierar den och anger den som en ikon.

iPhone Ikon Webbplatsen

Webbplatsens genväg ser liknande den för någon applikationer för iOS.

Hur man lägger till en webbplats ikoner för iPhone, iPad och iPod Touch

Om författaren

Stealth

Passionerad om allt som betyder gadget och IT, jag är glad att skriva på stealthsettings.com från 2006 och jag älskar att upptäcka nya saker om datorer och macOS, Linux-operativsystem, Windows, iOS och Android.

Lämna en kommentar