Favicon.ico – Website-Symbol im Browser

Bevor eine Website gestartet wird, wird eine Grafikdatei hinzugefügt. Favicon, das im Browser in der Adressleiste angezeigt wird. In den meisten Situationen ist das Favicon eine Miniaturansicht des grafischen Logos oder der Initialen der jeweiligen Website. Dieses Favicon wurde hinzugefügt, damit Benutzer eine Webadresse in Lesezeichen schneller identifizieren können.

Bis vor Kurzem musste diese Datei das Format Formular haben “favicon.ico“, um vom Webbrowser identifiziert zu werden. Chrome, Internet Explorer, Opera, Safari, Firefox usw.
Seit mehreren Jahren, mit der Weiterentwicklung neuer Websprachen, Html9 Und CSS3, Favicon kann auch eines sein fisier .png oder .jpg. Voraussetzung ist, dass im Website-Header vor </Kopf>, die Zeile sollte vorhanden sein:

<Link rel=”Verknüpfungssymbol” href=”/images/favicon.ico” Typ=”Bild/X-Symbol” />

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

In iOS wir können hinzufügen Verknüpfungen zu Webseiten pe Startbildschirm-uliPhone, iPad Und iPod Touch.

So fügen Sie eine Website-Verknüpfung auf dem iPhone-, iPad- und iPod-Startbildschirm hinzu

Wir tun dies, indem wir eine Webseite auf dem iPhone (Safari, Chrome usw. Internetbrowser) öffnen und auf das Quadrat mit dem Pfeil (das Zeichen für) drücken “Aktie” in iOS), dann die Option “Zum Startbildschirm hinzufügen“.

Wenn auf der Website ein Favicon für den Browser festgelegt ist, dieses jedoch nicht festgelegt ist das spezifische Symbol für iOS-Geräte, erscheint ein Symbol bestehend aus einem auf dem Bildschirm Vorschau vorstellen der Webseite.

So fügen Sie Websymbole für iPhone, iPad und Android hinzu.

Der erste Schritt besteht darinWir erstellen ein Bild für das Symbol, das am angezeigt wird Startbildschirmdie Idee. Damit das Web-Symbol auf allen Geräten kompatibel und deutlich sichtbar ist, müssen wir das Bild erstellen für alle iPhone- und iPad-Auflösungen.

Die Standardauflösungen und -größen von Symbolen für iPhone, iPad, iPod und Android

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

Apfel regelmäßig aktualisieren Empfohlene SymbolgrößenURLs Anwendungen Und Webseiten pe diese Seite.

Bei Android-Geräten haben die Symbole zwei Größen:

• Klassisches Android = 128×128
• Android mit hoher Auflösung (hi-res) = 192×192

Nachdem wir die Bilder erstellt haben, werden sie vor dem Schließen auf den Webserver und in die HTML-Quelle der Website hochgeladen </Kopf>werden folgende Zeilen hinzugefügt:

<Link href=”/apple-touch-icon.png” rel=”Apple-Touch-Symbol” /> <Link href=”/apple-touch-icon-76×76.png” rel=”Apple-Touch-Symbol” Größen=”76×76″ /> <Link href=”/apple-touch-icon-120×120.png” rel=”Apple-Touch-Symbol” Größen=”120×120″ /> <Link href=”/apple-touch-icon-152×152.png” rel=”Apple-Touch-Symbol” Größen=”152×152″ /> <Link href=”/apple-touch-icon-180×180.png” rel=”Apple-Touch-Symbol” Größen=”180×180″ /> <Link href=”/icon-hires.png” rel=”Symbol” Größen=”192×192″ /> <Link href=”/icon-normal.png” rel=”Symbol” Größen=”128×128″ />

Bei Apple-Geräten lautet der Bildname .PNG und “rel=” muss das Präfix enthalten “Apfel-“. Für Android lauten die Dateinamen “icon-hires.png” Und “icon-normal.png” mit rel=”Symbol”.

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

Das Symbol der Verknüpfung zur Website ähnelt dem aller anderen Anwendungen für iOS.