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-Einstellungen Favicon

Stealth-Einstellungen Favicon in Safari

Favicon in Opera

Favicon in Opera

Bis vor kurzem sollte diese Datei von der Form "favicon.ico"Um vom Webbrowser identifiziert zu werden. 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".

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 ×

Apfel 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 = "/ apfel-touch-icon.png" rel = "apple-touch-icon" /> <link href = "/ apfel-touch-icon-76x76.png" rel = "apfel-touch-icon" sizes = "76x76" <link href = "/ apfel-touch-icon-120x120.png" rel = "apfel-touch-icon" sizes = "120x120" <link href = "/ apfel-touch-icon-152x152.png" rel = "apfel-touch-icon" sizes = "152x152" <link href = "/ apfel-touch-icon-180x180.png" rel = "apfel-touch-icon" sizes = "180x180" <link href = "/ icon-hires.png" rel = "Symbol" size = "192x192" /> <link href = "/ symbol-normal.png" rel = "icon" sizes = "128x128" />

Für die Geräte von Apple und .png Bildname "rel =" muss das Präfix "Apfel-" enthalten. Für Android, wird 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

Leidenschaft für alles, was Gadget und IT gerne stealthsettings.com von 2006 schreiben und Ich mag neue Dinge zu entdecken, mit Ihnen über Computer und MacOS, Linux, Windows, iOS und Android.

Hinterlasse einen Kommentar

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.