Wie man eine Website-Icons für iPhone, iPad und iPod Touch hinzufügen

Favicon.ico - Website-Symbol in Browser

Bevor es eine Website ins Leben gerufen und eine Grafikdatei hinzufügen, Favicon, die im Browser in der Adressleiste angezeigt wird. In den meisten Situationen ist das Favicon eine Miniaturansicht des Grafiklogos oder der Initialen der Website. Dieses Favicon wurde hinzugefügt, um Benutzern zu helfen, eine Webadresse in Lesezeichen schneller zu identifizieren.

Stealth Settings Favicon

Stealth Settings Favicon in Safari

Favicon in Opera

Favicon in Opera

Bis vor kurzem sollte diese Datei von der Form "favicon.ico", Vom Webbrowser zu identifizieren. Chrome, Internet Explorer, Opera, Safari, Firefox usw.
Seit mehreren Jahren mit neuen Web-Sprachen voran, HTML5 si CSS3Favicons kann, sei ein .png-Datei oder . Jpg. Die Bedingung ist, dass der Header des Aufstellungsortes, vor </ head>Seien Sie in dieser Zeile:

<Link rel = "Verknüpfungssymbol" href = "/ images / favicon.ico" type = "image / x-icon" />

Website-Symbol für iOS - iPhone, iPad und iPod Touch

In iOS Wir können hinzufügen Webseite Verknüpfungen pe Home ScreenCPC iPhone, iPad si iPod touch.

Wie man eine Website Verknüpfung auf iPhone, iPad und iPod Home-Bildschirm hinzufügen

Wir tun dies, indem Sie eine Website auf Ihrem iPhone (Safari, Chrome, Internet-Browser etc.) zu öffnen, klicken Sie auf dem Platz mit dem Pfeil (das Zeichen für „share“ in iOS), dann der Option "Zum Home-Bildschirm" sehen.

Wenn die Website ist für Ihren Browser so einstellen Favicon, aber nicht gesetzt iOS-Gerät spezifische Symbol WebsitesAuf dem Bildschirm erscheint, erscheint ein Symbol, bestehend aus einem Bildvorschau Web-Seite.

Wie Web-Icons für iPhone, iPad und Android hinzuzufügen.

Der erste Schritt ist, zu ein Bild Symbol erstellenDas erscheint auf Home ScreenCPC idevice Gemeinschaft. Für Web-Symbol ist kompatibel zu allen Geräten und zu deutlich sehen, müssen wir Bild erstellen für alle iPhone und iPad Auflösungen.

Auflösungen und Standardsymbolgrößen für iPhone, iPad, iPod und Android

  • Klassische Modelle von iPhone / iPod = 57 57 ×
  • iPad = 76 76 ×
  • iPhone / iPod-Retina × = 120 120
  • iPad Retina × = 152 152
  • iPhone 6 / 6S Plus-= 180 180 ×

Apple regelmäßig aktualisiert Empfohlene SymbolgrößeSeiten Anwendungen si Web-Seiten pe diese Seite.

Für die Geräte mit Android, Symbole sind zwei Dimensionen:

  • Klassisches Android = 128 × 128
  • Hohe Auflösung von Android (hochauflösend) = 192 × 192

Symbole

Nachdem wir die Bilder gemacht, auf dem Webserver klettern, fügen Sie den HTML-Quellcode der Website vor dem schließenden </ head>, die folgenden Zeilen:

<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 Geräte Apple, der Name des .PNG-Bildes und "rel =" müssen das Präfix "apple-" enthalten. Für Android lautet der Dateiname "Symbol hires.png"Und"Symbol normal.png"Mit rel =" Symbol ".

Es ist nicht unbedingt erforderlich, Bilder für jede Auflösung einzeln zu erstellen. Sie können ein Bild mit der höchsten Auflösung erstellen, und Geräte mit niedrigerer Auflösung werden es identifizieren und als Symbol festlegen.

iPhone Icon Webseite

Das Verknüpfungssymbol für die Website sieht ähnlich aus Anwendungen für iOS.

Wie man eine Website-Icons für iPhone, iPad und iPod Touch hinzufügen

Über den Autor

Stealth

Mit Leidenschaft für alles, was Gadget und IT bedeutet, schreibe ich gerne auf stealthsettings.com von 2006 und entdecke gerne mit Ihnen Neues über Computer und MacOS, Linux-Betriebssysteme, Windows, iOS und Android.

Hinterlasse einen Kommentar