In diesem Artikel besprechen wir die Vorteile der Verwendung eines Favicons auf einer WordPress Webseite. Dann erkl\u00e4ren wir dir, wie du ein Favicon erstellen kannst und f\u00fchren dich durch drei einfache M\u00f6glichkeiten, es zu deiner Webseite hinzuzuf\u00fcgen.<\/p>\n
Zum Schluss werden wir \u00fcber ein paar WordPress Favicon-Tipps und Best Practices reden. Lasst uns anfangen!<\/p>\n
Die Vorteile der Verwendung eines WordPress-Favicons<\/h2>\n
Wenn du jemals zu viele Tabs auf einmal ge\u00f6ffnet hattest (schuldig!), kannst du wahrscheinlich den Nutzen eines Favicons sch\u00e4tzen. Ein Favicon macht es den Benutzern leicht, deine Webseite schnell zu identifizieren, wenn sie mehrere Tabs in ihrem Browser ge\u00f6ffnet haben:<\/p>\n Abh\u00e4ngig von der Anzahl der ge\u00f6ffneten Tabs ist der Titel deiner Webseite nicht immer sichtbar. Daher kann das Hinzuf\u00fcgen eines Favicons helfen, das UX f\u00fcr deine Besucher zu verbessern<\/a>.<\/p>\n Die Verwendung eines WordPress-Favicons kann nicht nur den Wiedererkennungswert der Marke erh\u00f6hen, sondern auch die Professionalit\u00e4t und Glaubw\u00fcrdigkeit deiner Webseite steigern. Dies wiederum kann dazu beitragen, das Vertrauen der Kunden zu st\u00e4rken.<\/p>\n Au\u00dferdem wird dein Favicon als Symbol angezeigt, wenn jemand deine Webseite auf dem Startbildschirm seines mobilen Ger\u00e4ts speichert. Die Verwendung deines Markenlogos oder \u00e4hnlicher Bilder kann dazu beitragen, deine Webseite leichter wiederzuerkennen und insgesamt eine einheitliche \u00c4sthetik zu schaffen.<\/p>\n\n Wenn du bereits ein Favicon hast, das du verwenden kannst (die meisten Unternehmen verwenden ihr Logo oder eine Variante davon), kannst du gerne zum n\u00e4chsten Abschnitt springen. Ansonsten sehen wir uns an, wie du dein Favicon-Bild erstellen kannst.<\/p>\n In der Vergangenheit musstest du eine bestimmte ICO-Datei f\u00fcr dein Favicon verwenden. Heutzutage unterst\u00fctzen jedoch alle modernen Browser die Verwendung von ICO-, PNG- und GIF-Dateien f\u00fcr dein Favicon. JPEG wird ebenfalls weitgehend unterst\u00fctzt (lies: JPG vs. JPEG<\/a>), aber nicht in allen Versionen des Internet Explorers, was es weniger ideal f\u00fcr die Verwendung von Favicons macht.<\/p>\n Wenn du dich mit Photoshop auskennst, kannst du es benutzen, um manuell ein Favicon zu erstellen. Oft ist es jedoch einfacher, ein einfaches Cloud-Tool zu benutzen, um ein Favicon-Set aus einem bestehenden Bild zu erstellen.<\/p>\n RealFaviconGenerator<\/a> (die Cloud-basierte Version des Plugins, die wir sp\u00e4ter besprechen werden) ist eine gro\u00dfartige Option, weil:<\/p>\n Andere n\u00fctzliche Favicon-Generatoren sind:<\/p>\n Um den RealFaviconGenerator zu benutzen, beginne mit dem Hochladen des Bildes, das du benutzen m\u00f6chtest, indem du auf „W\u00e4hle dein Favicon-Bild<\/strong>“ klickst:<\/p>\n Auf dem n\u00e4chsten Bildschirm kannst du spezifische Details zu deinem Favicon-Set konfigurieren (falls gew\u00fcnscht). Wenn du fertig bist, scrolle nach unten und klicke auf „Favicons und HTML-Code generieren<\/strong>„:<\/p>\n Klicke auf der n\u00e4chsten Seite auf Favicon-Paket<\/strong>, um deine Favicon-Bilder herunterzuladen:<\/p>\n Lass diese Seite unbedingt offen, wenn du vorhast, das Favicon manuell zu deiner Webseite hinzuzuf\u00fcgen.<\/p>\n Es gibt ein paar Design- und Formatierungstipps, die es wert sind, erw\u00e4hnt und \u00fcberpr\u00fcft zu werden, bevor du dein Favicon erstellst. Am wichtigsten ist, dass die empfohlene Gr\u00f6\u00dfe f\u00fcr Favicons 512\u00d7512 Pixel betr\u00e4gt.<\/p>\n Dein WordPress-Favicon wird zwar ein perfektes Quadrat sein, du kannst aber auch ein rechteckiges Bild verwenden und es entweder vor oder nach dem Hochladen in WordPress<\/a> zuschneiden. WordPress kommt mit einer eingebauten Zuschneidefunktion<\/a> f\u00fcr Webseiten-Icons, wenn du sie \u00fcber den Customizer (durch den wir dich in K\u00fcrze f\u00fchren werden) hinzuf\u00fcgst.<\/p>\n Au\u00dferdem ist es wichtig zu beachten, dass dein Favicon als ein 16\u00d716 px Quadrat angezeigt wird. Deshalb solltest du ein Bild ausw\u00e4hlen, das gut aussieht, wenn es auf diese Ma\u00dfe verkleinert wurde. Obwohl es in dieser Gr\u00f6\u00dfe angezeigt wird, sollte es immer noch eine H\u00f6he und Breite von mindestens 512 px haben.<\/p>\n Schlie\u00dflich ist es eine kluge Idee, einige der Google-Richtlinien<\/a> f\u00fcr die Erstellung und Verwendung von Favicons durchzusehen. Dies wird dazu beitragen, dass dein Icon in Suchmaschinen<\/a> und Browser-Tabs optimal angezeigt wird.<\/p>\n Sobald du dein Favicon hast, kannst du es zu deiner WordPress Webseite hinzuf\u00fcgen. Lass uns einen Blick auf drei Methoden werfen, mit denen du das tun kannst.<\/p>\n Seit WordPress 4.3 verf\u00fcgen alle WordPress Webseiten \u00fcber eine Website Icon Funktion, die es einfach macht, ein Bild hochzuladen und zuzuschneiden, um es als Favicon zu verwenden. F\u00fcr die meisten Benutzer ist dies die einfachste und schnellste Methode, um ein Favicon zu WordPress hinzuzuf\u00fcgen.<\/p>\n Alles, was du brauchst, ist ein Bild, das mindestens 512\u00d7512 Pixel gro\u00df ist. WordPress \u00fcbernimmt den Rest des Prozesses. Um anzufangen, gehe zu Appearance \u2192 Anpassen in deinem WordPress-Dashboard:<\/p>\n Navigiere von dort zur Registerkarte Identit\u00e4t der Webseite<\/strong>:<\/p>\n Als N\u00e4chstes schaue unten nach dem Abschnitt \u00fcber das Symbol der Webseite<\/strong> und klicke auf die Schaltfl\u00e4che Symbol der Webseite<\/strong> ausw\u00e4hlen:<\/p>\n Das normale WordPress Media Library<\/a> Interface wird sich \u00f6ffnen. Du kannst entweder ein bestehendes Bild in deiner Mediathek ausw\u00e4hlen oder ein neues Bild hochladen. Wenn du RealFaviconGenerator benutzt hast, um dein Favicon zu erstellen, stelle sicher, dass das Paket, das du heruntergeladen hast, entpackt ist.<\/p>\n Wenn du ein Bild hast, das dir gef\u00e4llt, klicke es an und w\u00e4hle Ausw\u00e4hlen<\/strong> in der unteren rechten Ecke:<\/p>\n Wenn dein Bild nicht bereits ein perfektes Quadrat ist (z.B. 512\u00d7512 px), gibt dir WordPress die M\u00f6glichkeit, es auf dem n\u00e4chsten Bildschirm zuzuschneiden.<\/p>\n Benutze die Box, um den Teil des Bildes zu markieren, den du f\u00fcr dein Icon verwenden m\u00f6chtest. Auf der rechten Seite des Fensters siehst du eine Vorschau, wie dein zugeschnittenes Bild aussehen wird.<\/p>\n Wenn du mit dem Aussehen zufrieden bist, klicke auf Bild beschneiden<\/strong>, um deine Wahl abzuschlie\u00dfen:<\/p>\n Das ist es! Alles was du tun musst, ist Speichern & Ver\u00f6ffentlichen<\/strong> ausw\u00e4hlen, um dein Favicon live zu schalten. Wenn du dein Favicon in Zukunft \u00e4ndern m\u00f6chtest, kannst du zu diesem Interface zur\u00fcckkehren.<\/p>\n Wenn du eine Plugin-L\u00f6sung der nativen WordPress Webseite bevorzugst, kannst du ein popul\u00e4res kostenloses Plugin namens Favicon by RealFaviconGenerator<\/a> (das Cloud-basierte Tool, das wir vorhin besprochen haben) verwenden.<\/p>\n Dieses Plugin ist genauso einfach zu benutzen wie der native WordPress Customizer. Es bietet jedoch zus\u00e4tzliche Kompatibilit\u00e4tsoptionen f\u00fcr verschiedene Ger\u00e4te und App-Icons. Um es zu benutzen, installiere und aktiviere das kostenlose Plugin<\/a> \u00fcber dein WordPress Dashboard<\/a>:<\/p>\n Sobald du das Plugin aktiviert hast, gehe zu Appearance \u2192 Favicon<\/strong>, um dein Favicon-Set zu erstellen. Alles was du tun musst, ist ein Bild auszuw\u00e4hlen oder hochzuladen, das mindestens 70\u00d770 px (idealerweise 260\u00d7260 px) gro\u00df ist:<\/p>\n Nachdem du dein Bild ausgew\u00e4hlt hast, klicke auf Favicon generieren<\/strong>. Wenn du diesen Button ausw\u00e4hlst, bringt dich das Plugin au\u00dferhalb deiner WordPress Webseite auf die RealFaviconGenerator Webseite.<\/p>\n Scrolle unten auf der Webseite nach unten und w\u00e4hle „Generate your Favicons and HTML code<\/strong>“ (siehe voriger Abschnitt). W\u00e4hrend das Tool funktioniert, schickt dich der RealFavicon Generator zur\u00fcck zu deinem WordPress-Dashboard:<\/p>\n Danach ist dein Favicon eingerichtet und einsatzbereit. Du kannst dir im Interface des Plugins eine Vorschau ansehen, wie es auf verschiedenen Ger\u00e4ten aussehen wird.<\/p>\n Wenn du es vorziehst, Dinge manuell zu erledigen, ist es m\u00f6glich, ein Favicon zu deiner WordPress Webseite via File Transfer Protocol (FTP) oder File Manager hinzuzuf\u00fcgen, wenn dein Host cPanel benutzt.<\/p>\n Wenn du diese Methode verwendest, musst du auch dein eigenes Favicon-Bild erstellen. Das kannst du tun, indem du den Schritten folgst, die wir weiter oben in diesem Beitrag beschrieben haben.<\/p>\n F\u00fcr diese Demonstration werden wir das Paket verwenden, das wir erstellt und von RealFaviconGenerator heruntergeladen haben. Die Anweisungen gelten auch, wenn du ein anderes Tool zum Erstellen deines Favicons benutzt hast.<\/p>\n Um ein WordPress-Favicon manuell zu deiner Webseite hinzuzuf\u00fcgen, musst du Folgendes tun:<\/p>\n Die Dateien sollten sich im selben Ordner wie deine wp-admin und wp-content Ordner befinden. Als n\u00e4chstes nimmst du den Code RealFaviconGenerator, den du zuvor erhalten hast, und entweder<\/p>\n Die Verwendung des Plugins Kopf- und Fu\u00dfzeilen einf\u00fcgen ist optimal, da es daf\u00fcr sorgt, dass du dein Favicon nicht verlierst, wenn du sp\u00e4ter das WordPress Theme wechselst.<\/p>\n Um dies zu tun, installiere und aktiviere das Plugin Kopf- und Fu\u00dfzeilen einf\u00fcgen. Gehe dann zu Einstellungen \u2192 Kopf- und Fu\u00dfzeilen<\/strong> einf\u00fcgen und f\u00fcge deinen Code in die Sektion Scripts in Header<\/strong> ein:<\/p>\n Stelle sicher, dass du deine \u00c4nderungen speicherst. Dann bist du fertig!<\/p>\n Wenn du m\u00f6chtest, dass jede Webseite in deinem Multisite-Netzwerk<\/a> ein einzigartiges Favicon hat, ist der einfachste Weg, dies zu erreichen, ein Favicon-Plugin wie das oben genannte zu verwenden. Es ist zwar m\u00f6glich, die Dateien deines Themes so zu bearbeiten, dass f\u00fcr jede Webseite des Netzwerks ein eigenes Favicon erstellt werden kann, aber der Prozess ist wesentlich komplizierter als bei einem Plugin.<\/p>\n Du k\u00f6nntest auch ein Content Delivery Network (CDN)<\/a> verwenden, um deine Favicon-Bilder bereitzustellen. Die drei Methoden, die wir in diesem Beitrag besprochen haben, speichern alle deine Favicon-Bilder auf deinem Server. Du kannst deine Webseite jedoch noch weiter optimieren, indem du ein CDN verwendest, um diese Bilder auszuliefern.<\/p>\n Wenn du Cloudflare<\/a> oder einen Service wie KeyCDN<\/a> installierst, werden die Browser der Besucher dein Favicon von deinem CDN laden, anstatt vom Server deiner Webseite. Wenn du ein Plugin wie CDN Enabler<\/a> verwendest, sollte es automatisch deine WordPress Favicon-URL neu schreiben, damit es mit den oben genannten Methoden funktioniert.<\/p>\n\n Ein WordPress Favicon kann helfen, deine Markenbekanntheit zu steigern und das UX f\u00fcr die Besucher deiner Webseite zu verbessern. Gl\u00fccklicherweise hast du mehrere Optionen zur Auswahl, die das Hinzuf\u00fcgen eines Favicons einfach machen.<\/p>\n Die drei Hauptmethoden, die du benutzen kannst, um ein WordPress Favicon zu deiner Webseite hinzuzuf\u00fcgen, sind:<\/p>\n Favicons sind am bekanntesten als die kleinen Symbole, die neben den Namen von Webseiten in den Browser-Tabs angezeigt werden. Aber w\u00e4hrend sie dort ihren Ursprung haben, …<\/p>\n","protected":false},"author":103,"featured_media":35436,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[208,132],"topic":[999,1010],"class_list":["post-35421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-wordpresshilfe","tag-wptips","topic-wordpress-entwicklung","topic-wordpress-tipps"],"yoast_head":"\n![\"Das](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/kinsta-favicon-chrome-browser.png\")
<\/a>Wie man ein WordPress Favicon erstellt<\/h2>\n
\n
\n
![\"Ein](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/favicon-quellbild-realfavicongenerator-hochladen.jpg\")
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/favicon-generator-1.jpg\")
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/bildschirm-herunterladen-favicon-pakets.jpg\")
Tipps zum Erstellen eines WordPress-Favicons<\/h3>\n
Wie du ein WordPress Favicon zu deiner Webseite hinzuf\u00fcgst (3 einfache Optionen)<\/h2>\n
1. Den WordPress Customizer benutzen, um dein Favicon hochzuladen<\/h3>\n
![\"Das](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/erscheinungsbild-menu-wordpress.jpg\")
![\"Die](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/option-webseite-identitat-wordpress-customizer.jpg\")
![\"Die](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/schaltflache-webseite-auswahlen-wordpress-customizer.jpg\")
![\"W\u00e4hle](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/wahle-favicon-bild-wordpress.jpg\")
![\"Beschneiden](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/beschneiden-favicon-bild-wordpress.png\")
2. Installiere ein Plugin um dein WordPress Favicon hinzuzuf\u00fcgen<\/h3>\n
![\"Das](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/favicon-by-realfavicongenerator-wordpress-plugin.jpg\")
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/bildschirm-hinzufugen-favicons-wordpress-plugin.jpg\")
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/bildschirm-vorschau-wordpress-favicon-erscheinen-wird.png\")
3. Manuelles Hinzuf\u00fcgen deines Favicons per FTP<\/h3>\n
\n
\n
![\"Hinzuf\u00fcgen](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/05\/hinzufugen-favicon-code.jpg\")
Zus\u00e4tzliche Tipps zur Verwendung von WordPress-Favicons<\/h2>\n
Zusammenfassung<\/h2>\n
\n