Hogyan adjunk egy weboldal ikonok iPhone, iPad és iPod Touch

Favicon.ico - Weboldal ikon a böngészőben

Mielőtt elindított egy honlapot, és adjunk hozzá egy grafikus file, favicon, hogy megjelenjen a böngészőben, a címsorban. A legtöbb helyzetben a favicon a grafikus embléma vagy az adott weboldal kezdőbetűinek miniatűrje. Ez a kedvenc ikon hozzáadásra kerül, hogy a felhasználók gyorsan azonosítsanak egy webcímet a könyvjelzőkben.

Lopakodás Settings Favicon

Lopakodás Settings Favicon Safariban

Favicon Opera

Favicon Opera

A közelmúltig ennek a fájlnak formának kellett lennie. "favicon.ico", A webböngésző azonosítja. Chrome, Internet Explorer, Opera, Safari, Firefox stb.
Több éve, előrehaladtával új webes nyelvek, HTML5 si CSS3, Favicons lehet egy .png vagy . Jpg. A feltétel az, hogy a fejléc az oldalon, előttLégy ezt a sort:

Webhelyikon iOS rendszerhez - iPhone, iPad és iPod Touch

In iOS hozzátehetjük Weblap hivatkozások pe Home ScreenCPC iPhone, iPad si iPod Touch.

Hogyan adjunk egy weboldal parancsikont iPhone, iPad és iPod Home Screen

Ezt úgy tesszük meg, hogy megnyitunk egy weblapot az iPhone-on (Safari, Chrome, stb. Internet böngésző), rákattintunk a nyíllal ellátott négyzetre (az iOS-n a "share" jelre), majd a lehetőségreAdd to Home Screen".

Ha a webhely állított favicon a böngésző, de nincs beállítva iOS eszköz speciális ikon oldalak, A képernyőn megjelenik egy ikon, amely egy előnézeti kép weboldalt.

Hogyan adjunk webes ikonok az iPhone, iPad és Android.

Az első lépés az, hogy teremt egy kép ikonJelennek meg Home ScreenCPC iDevice közösség. Web ikon kompatibilis az összes eszközt és tisztán látni, akkor létre kell hozni kép minden iPhone és iPad állásfoglalások.

Normál ikonfelbontás és -méretek iPhone, iPad, iPod és Android készülékekhez

  • Klasszikus iPhone / iPod modellek = 57 × 57
  • iPad = 76 × 76
  • iPhone / iPod Retina = 120 × 120
  • iPad Retina = 152 × 152
  • iPhone 6 / 6S Plus = 180 × 180

Apple rendszeresen frissített Ajánlott ikon méretOldalak alkalmazások si Web oldalak pe ezen az oldalon.

Az Android készülékek, ikonok két dimenzió:

  • Android klasszikus = 128 × 128
  • Android nagy felbontású (nagy felbontású) = 192 × 192

ikonok

Miután elkészítettük a képeket, bezárás előtt feltölti azokat a webszerverre és a weboldal HTML forrásába , a következő sorokkal egészül ki:

<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" />

Eszközökhöz Apple, .PNG képnév és a "rel =" tartalmaznia kell az előtagot "apple- ". Android esetén a fájlnevek a következők lesznek:ikon hires.png"És"ikon normal.png”Rel =” ikonnal ”.

Nem feltétlenül szükséges képeket készíteni minden felbontáshoz. Készíthet képet a legnagyobb felbontással, és az alacsonyabb felbontású eszközök azonosítják és ikonként állítják be.

iPhone ikon honlap

A webhely parancsikonja hasonlítani fog bármelyikhez alkalmazások iOS.

Hogyan adjunk egy weboldal ikonok iPhone, iPad és iPod Touch

A szerzőről

Lopakodás

Szenvedélyesen minden eszközzel és informatikával kapcsolatban örömmel írok a lopakodásrólsettings.com 2006 óta, és szeretnék új dolgokat felfedezni veletek a számítógépekkel és az operációs rendszerekkel kapcsolatban a macOS, a Linux, Windows, iOS és Android.

Írj hozzászólást