[Anleitung] Erstellen Sie ein Favicon und Apple Symbol für Ihre Website

Apple iPhone / iPad

Favicons, die stark an Bedeutung verloren haben, sind seit einigen Jahren wiederauferstanden, da sie von immer mehr Browsern unterstützt und zu einem sehr visuellen Teil der Benutzererfahrung gemacht werden. Auch Tablets und Smartphone-Browser verwenden diese Symbole. Dies hat dazu geführt, dass ein gutes Favicon immer wichtiger wird. Die Darstellung dieser Symbole variiert jedoch je nach Kunde, der die Website durchsucht. Desktops erfordern ein bestimmtes Symbol, Apple Geräte erfordern etwas anderes, auch unterschiedliche Größen erschweren die Sache. 

 

Eine einfache Lösung - Kostenloser Online-Icon-Generator für Apple und Favicon-Symbole

 Iconifier.net ist eine einfache Lösung, bei der bei einem quadratischen JPG, GIF oder PNG ein Symbolsatz in verschiedenen Größen generiert wird, sodass Sie diejenigen verwenden und auswählen können, die Sie auf Ihrer Website unterstützen möchten. Sie müssen nur dann die generierten Symbole herunterladen und in den Code Ihrer Website einbetten. Sie können diese Schritte in Ihren Webdesignprozess integrieren.

Betten Sie die Favoriten-Symbole in Ihre Website ein

Nachdem Sie das Symbol favicon.ico mit Iconifier.net oben erstellt und im Stammverzeichnis Ihrer Website platziert haben, fügen Sie den folgenden Code zwischen den Symbolen ein und Ihrer Website

Auch der Apple Icons

Nachdem Sie die verschiedenen Symbole mit der oben genannten Website erstellt haben, müssen Sie auch einen etwas anderen Code für Apple iPhone/iPad (und möglicherweise Android) Geräte. Laden Sie die generierten Symboldateien erneut in das Stammverzeichnis Ihrer Website hoch und platzieren Sie den folgenden Code zwischen den HEAD-Tags.

<link rel=”apple-touch-icon“ size=“114×114″ href=“/touch-icon-114×114.png“ />

<link rel=”apple-touch-icon“ size=“72×72″ href=“/touch-icon-72×72.png“ />

<link rel=”apple-touch-icon“ href=“/touch-icon-iphone.png“ />

iOS-Geräte verarbeiten dies automatisch in ihrem Browser und ändern die Größe und fügen einige entsprechende Effekte hinzu, damit sie dem Stil des Geräts entsprechen, auf dem sie angezeigt werden.

Übrigens sind großartige iOS- und Android-Entwickler nicht einfach einzustellen - wenn Sie einen guten App-Entwickler einstellen möchten und wissen, wie Sie einen guten Kandidaten finden wir haben dich abgedeckt CollectiveRay. - Wir zeigen Ihnen alle großartigen Orte, um gute Kandidaten zu finden.

Rot Mehr: Zurücksetzen Apple ID und Passwort, falls Sie es vergessen haben

Symbole für Android-Geräte

Android hat darauf aufgebaut Apple Berühren Sie die Symbole, erwarten Sie jedoch, dass die Symbole bereits in ihrer endgültigen Version vorliegen. Diese endgültige Version ist "PRECOMPOSED", und Android-Geräte erwarten, dass dieses Tag vorhanden ist. Laden Sie also neue Versionen mit leicht unterschiedlichen Namen hoch (z. B. das Hinzufügen von vorgefertigten Namen im Namen) und fügen Sie dann das folgende Markup hinzu. Der wichtigste Teil ist das rel=apple-Touch-Icon-vorkomponiert. Legen Sie die Dateien im Stammverzeichnis Ihrer Website ab und fügen Sie diesen Code zwischen den und Tags Ihres HTML-Codes

<link rel=”apple-touch-icon-precomposed“ Größen=“114×114″ href=“/apple-touch-icon-114×114-precomposed.png”>

<link rel=”apple-touch-icon-precomposed“ Größen=“72×72″ href=“/apple-touch-icon-72×72-precomposed.png”>

<link rel=”apple-touch-icon-precomposed“ href=“/touch-icon-iphone-precomposed.png“>

Weitere Details zu Favicons finden Sie auf Wikepedia: https://en.wikipedia.org/wiki/Favicon

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn Sie Probleme im Zusammenhang mit dieser Website haben oder lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

 

Wer sind wir?

CollectiveRay wird von David Attard geleitet - arbeitet seit mehr als 12 Jahren in und um die Webdesign-Nische und bietet umsetzbare Tipps für Leute, die mit und an Websites arbeiten. Wir betreiben auch DronesBuy.net - eine Website für Drohnen-Hobbyisten.

David Attard

 

 

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...