{"id":6236,"date":"2025-09-03T18:13:54","date_gmt":"2025-09-03T18:13:54","guid":{"rendered":"\/de\/tutorials\/?p=6236"},"modified":"2026-01-30T23:41:27","modified_gmt":"2026-01-30T23:41:27","slug":"wordpress-favicon","status":"publish","type":"post","link":"\/de\/tutorials\/wordpress-favicon\/","title":{"rendered":"Was ist ein WordPress Favicon und wie f\u00fcgt man es hinzu? 4 schnelle Methoden"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Ein Favicon ist ein kleines Bild, das in der Registerkarte des Webbrowsers angezeigt wird, wenn ein Benutzer auf Ihre WordPress-Website zugreift. Es hilft den Nutzern, Ihre Website schnell zu erkennen, wenn mehrere Tabs ge&ouml;ffnet sind, insbesondere wenn der Titel Ihrer Website nicht sichtbar ist.<\/p><p class=\"wp-block-paragraph\">In diesem Tutorial wird erkl&auml;rt, was ein WordPress Favicon ist, wie wichtig es ist und wie man es erstellt. Wir werden auch verschiedene M&ouml;glichkeiten erkunden, wie Sie ein Favicon zu Ihrer Website hinzuf&uuml;gen k&ouml;nnen, damit Sie eines nach Ihren Vorlieben ausw&auml;hlen k&ouml;nnen.<\/p><p>\n\n\n\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                     Was ist ein Favicon?                 <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Ein Favicon ist ein Bild, in der Regel ein Logo, das Ihre WordPress-Website kennzeichnet. Es hat in der Regel ein rechteckiges Seitenverh&auml;ltnis, eine niedrige Aufl&ouml;sung und enth&auml;lt die visuelle Identit&auml;t Ihrer Website, z. B. die Farbpalette. Sie k&ouml;nnen es mit einer Grafiksoftware wie Photoshop, Webtools oder der in WordPress integrierten Funktion erstellen. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Ein Favicon hilft Nutzern bei der Verwaltung mehrerer Registerkarten und erh&ouml;ht die Sichtbarkeit Ihrer Website auf den Ergebnisseiten von Suchmaschinen (SERPs). Dieses Icon begleitet die URL Ihrer Website und erm&ouml;glicht es den Nutzern, die Webseite schnell zu identifizieren.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c3488c671\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c3488c671\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2024\/09\/hostinger-favicon-on-a-browser-tab.png\/public\" alt=\"Hostinger-Favicon auf einem Browser-Tab\" class=\"wp-image-115433\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Dieses Bild wird auch auf den Startbildschirmen der Nutzer als App-Icon angezeigt, wenn sie Ihre Webseite auf ihrem Ger&auml;t als Lesezeichen speichern. Ein eindeutiges Favicon l&auml;sst Ihre Website nicht nur professioneller erscheinen, sondern hilft auch beim Aufbau des Brandings.<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-man-ein-favicon-bild-erstellt\">Wie man ein Favicon-Bild erstellt<\/h2><p class=\"wp-block-paragraph\">Um ein WordPress Favicon zu erstellen, k&ouml;nnen Sie eine beliebige Grafikdesign-Software oder ein Online-Tool wie <a href=\"https:\/\/realfavicongenerator.net\/\" target=\"_blank\" rel=\"noopener\">Real Favicon Generator<\/a> nutzen. Ihre Wahl h&auml;ngt von Ihrer Erfahrung mit visuellen Designkonzepten und Ihren F&auml;higkeiten ab, diese Tools zu bedienen.<\/p><p class=\"wp-block-paragraph\">Ber&uuml;cksichtigen Sie also Folgendes:<\/p><ul class=\"wp-block-list\">\n<li><strong>Aufl&ouml;sung<\/strong>. Da Ihr Icon nur auf SERPs und Browser-Tabs erscheint, ist ein &uuml;berm&auml;&szlig;ig hoch aufgel&ouml;stes Bild nicht unbedingt notwendig. Die ideale Gr&ouml;&szlig;e eines WordPress-Favicons ist <a href=\"https:\/\/mailchimp.com\/resources\/favicon-size\/\" target=\"_blank\" rel=\"noopener\">512 x 512 Pixel<\/a>.<\/li>\n\n\n\n<li><strong>Seitenverh&auml;ltnis.<\/strong> Das Favicon auf Ihrer WordPress-Seite muss in einem <strong>1:1<\/strong>-Seitenverh&auml;ltnis richtig angezeigt werden. Andernfalls k&ouml;nnte es abgeschnitten oder verzerrt werden, was das Aussehen der Webseite beeintr&auml;chtigt.<\/li>\n\n\n\n<li><strong>Farbpalette<\/strong>. Wenn Sie einen transparenten Hintergrund verwenden, hebt sich Ihr Favicon besser ab, insbesondere wenn Sie wei&szlig;e Elemente oder Icone verwenden. Denken Sie daran, die gleiche Palette wie Ihre Marke zu verwenden, um eine konsistente Website-Identit&auml;t zu erhalten.<\/li>\n\n\n\n<li><strong>Dateiformat<\/strong>. Das PNG-Format ist erforderlich, wenn die Favicon-Datei Ihrer WordPress-Website einen transparenten Hintergrund enth&auml;lt. Andernfalls k&ouml;nnen Sie Erweiterungen wie ICO, JPEG oder GIF<strong> <\/strong>verwenden, die WordPress unterst&uuml;tzt.<\/li>\n\n\n\n<li><strong>Anforderungen f&uuml;r Suchmaschinen<\/strong>. Ihr WordPress-Website-Icon muss den <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/favicon-in-search\" target=\"_blank\" rel=\"noopener\">Google-Richtlinien f&uuml;r Favicons<\/a> entsprechen, um in den SERPs korrekt angezeigt zu werden.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Die Schritte zur Erstellung von WordPress Favicons variieren stark, je nach Grafiksoftware und gew&uuml;nschtem Bild. Wenn Sie eine einfachere L&ouml;sung w&uuml;nschen, verwenden Sie den <a href=\"\/de\/logo-erstellen\">Hostinger KI Logo Maker<\/a>, um das Bild kostenlos zu erstellen!<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                     Experten-Tipp                 <\/p>\n            <\/div>\n            <p class=\"protip__content\"> Wir empfehlen, Ihr WordPress-Favicon nicht zu h&auml;ufig zu &auml;ndern, da es ein wichtiger Bestandteil der Identit&auml;t Ihrer Website ist. H&auml;ufige &Auml;nderungen verhindern m&ouml;glicherweise, dass Besucher eine starke Markenassoziation aufbauen. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-methoden-um-favicons-in-wordpress-hinzuzufugen\"><strong>Methoden, um Favicons in WordPress hinzuzuf&uuml;gen<\/strong><\/h2><p class=\"wp-block-paragraph\">In diesem Abschnitt werden vier g&auml;ngige Methoden zum Hinzuf&uuml;gen eines benutzerdefinierten Favicons zu Ihrer WordPress-Website vorgestellt. Da sie alle den gleichen Zweck erf&uuml;llen, w&auml;hlen Sie einfach eine nach Ihren Vorlieben und Bed&uuml;rfnissen.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-den-gutenberg-block-editor-verwenden\"><strong>1. Den Gutenberg-Block-Editor verwenden<\/strong><\/h3><p class=\"wp-block-paragraph\">Der einfachste Weg, ein Favicon zu Ihrer WordPress-Seite hinzuzuf&uuml;gen, ist die Verwendung des <strong>Gutenberg-Editors<\/strong>. Beachten Sie, dass diese Funktion nur f&uuml;r<strong> Block-Themes<\/strong> und <strong>WordPress 5.9 <\/strong>oder neuere Versionen verf&uuml;gbar ist.<\/p><p class=\"wp-block-paragraph\">Und so geht&rsquo;s:<\/p><ol class=\"wp-block-list\">\n<li>Loggen Sie sich in Ihr <strong>WordPress Dashboard<\/strong> ein &rarr; <strong>Design<\/strong> &rarr; <strong>Anpassen<\/strong>.<\/li>\n\n\n\n<li>Bewegen Sie den Mauszeiger &uuml;ber den Bereich, in dem Sie das Icon platzieren m&ouml;chten und klicken Sie auf das <strong>Plus<\/strong> (<strong>+<\/strong>)-Icon. Sie k&ouml;nnen es &uuml;berall platzieren, wir empfehlen jedoch eine der Ecken der Kopfzeile.<\/li>\n\n\n\n<li>Suchen und w&auml;hlen Sie den Block <strong>Seitenlogo<\/strong>.<\/li>\n\n\n\n<li>Bewegen Sie den Mauszeiger &uuml;ber den Block und klicken Sie auf das Icon <strong>Hochladen<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c3488ea9c\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c3488ea9c\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"262\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image.png\/public\" alt=\"Website-Iconblock im WordPress-Gutenberg-Editor\" class=\"wp-image-6237\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Laden Sie Ihre Favicon-Datei hoch oder w&auml;hlen Sie eine aus Ihrer WordPress-<strong>Medienbibliothek<\/strong> aus. Klicken Sie auf <strong>Ausw&auml;hlen<\/strong>, um zu best&auml;tigen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c34890a7d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c34890a7d\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"474\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-1.png\/public\" alt=\"Favicon-Bild in der WordPress-Medienbibliothek\" class=\"wp-image-6239\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"6\" class=\"wp-block-list\">\n<li>Klicken Sie auf das Favicon und navigieren Sie zum Abschnitt <strong>Blockeinstellungen<\/strong> in der rechten Seitenleiste. Wenn Sie die Option nicht sehen, klicken Sie auf die Schaltfl&auml;che <strong>Einstellungen<\/strong> oben rechts auf Ihrem Bildschirm.<\/li>\n\n\n\n<li>Aktivieren Sie in der Seitenleiste die Funktion <strong>Als Website-Icon verwenden<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c34892c8e\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c34892c8e\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"418\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-4.png\/public\" alt=\"Verwenden Sie die Umschaltfunktion f&uuml;r das Website-Icon im Gutenberg-Website-Editor.\" class=\"wp-image-6242\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-4.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-4.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-4.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Klicken Sie oben rechts auf <strong>Speichern <\/strong>, um die &Auml;nderungen zu &uuml;bernehmen.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Wenn Sie Ihre Website besuchen, sollten Sie das neue Favicon anstelle des Standard-WordPress-Logos sehen.<\/p><h3 class=\"wp-block-heading\"><strong>2. &Uuml;ber den WordPress Customizer zugreifen und konfigurieren<\/strong><\/h3><p class=\"wp-block-paragraph\">Benutzer des klassischen Themes k&ouml;nnen ein Favicon mit der WordPress-Funktion <strong>Customizer<\/strong> hinzuf&uuml;gen. Diese Methode ist nur m&ouml;glich, wenn Sie<strong> WordPress 4.3<\/strong> oder h&ouml;her verwenden. So geht&rsquo;s:<\/p><ol class=\"wp-block-list\">\n<li>Gehen Sie in Ihrem WordPress-Dashboard zu <strong>Design<\/strong>&rarr; <strong>Anpassen.<\/strong> Wenn Sie die Option nicht sehen k&ouml;nnen, f&uuml;gen Sie <strong>wp-admin\/customize.php<\/strong> zu Ihrer Website-URL hinzu, um sie manuell zu &ouml;ffnen.<\/li>\n\n\n\n<li>Navigieren Sie zur <strong>linken Seitenleiste<\/strong> &rarr; <strong>Website-Identit&auml;t<\/strong>. Klicken Sie auf die Schaltfl&auml;che <strong>Website-Icon ausw&auml;hlen<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c34894f45\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c34894f45\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"415\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-6.png\/public\" alt=\"Men&uuml; &bdquo;Website-Identit&auml;t&ldquo; im WordPress-Customizer\" class=\"wp-image-6244\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-6.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-6.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-6.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Laden Sie Ihr Bild hoch oder w&auml;hlen Sie es aus der <strong>Mediathek<\/strong>. Best&auml;tigen Sie mit <strong>Ausw&auml;hlen<\/strong>.<\/li>\n\n\n\n<li>Passen Sie die Gr&ouml;&szlig;e des Favicons an Ihre Bed&uuml;rfnisse an und klicken Sie auf <strong>Bild zuschneiden<\/strong>. Um die Standardeinstellungen zu verwenden, w&auml;hlen Sie <strong>Beschneiden &uuml;berspringen<\/strong>.<\/li>\n\n\n\n<li>Jetzt sollten Sie die Vorschau Ihres Website-Favicons unter dem <strong>Website-Icon<\/strong>-Abschnitt in der Seitenleiste sehen. Um die &Auml;nderungen zu speichern, klicken Sie auf <strong>&Auml;nderungen speichern<\/strong>.<\/li>\n<\/ol><h3 class=\"wp-block-heading\"><strong>3. Das RealFaviconGenerator-Plugin verwenden<\/strong><\/h3><p class=\"wp-block-paragraph\">Wenn Sie mehr Anpassungsm&ouml;glichkeiten und Vorschaubilder w&uuml;nschen, verwenden Sie ein Plugin eines Drittanbieters, um ein Favicon in WordPress einzurichten. Es gibt mehrere Optionen, aber wir empfehlen <a href=\"https:\/\/wordpress.org\/plugins\/favicon-by-realfavicongenerator\/\" target=\"_blank\" rel=\"noopener\"><strong>Favicon by RealFaviconGenerator<\/strong><\/a>, da es die am h&auml;ufigsten verwendete Option ist.<\/p><p class=\"wp-block-paragraph\">Nach der Installation und Aktivierung des Plugins folgen Sie diesen Schritten, um ein neues Favicon zu erstellen und hinzuzuf&uuml;gen:<\/p><ol class=\"wp-block-list\">\n<li>Navigieren Sie in Ihrem WordPress-Administrations-Dashboard zu <strong>Design<\/strong> &rarr; <strong>Favicon<\/strong>.<\/li>\n\n\n\n<li>Klicken Sie auf <strong>Aus der Mediathek ausw&auml;hlen<\/strong> und laden Sie ein neues Bild hoch oder w&auml;hlen Sie ein vorhandenes Bild aus Ihrer WordPress-Bibliothek aus.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c3489781c\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c3489781c\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"310\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-7.png\/public\" alt=\"Die Schaltfl&auml;che &bdquo;Select from the Media Library&rdquo; im Men&uuml; des Real Favicon Generator-Plugins\" class=\"wp-image-6245\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-7.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-7.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-7.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Klicken Sie auf <strong>Favicon generieren<\/strong>, und das Plugin leitet Sie auf eine separate Seite weiter.<\/li>\n\n\n\n<li>Wenn Sie das Standardbild beibehalten m&ouml;chten, w&auml;hlen Sie die Option <strong>Das urspr&uuml;ngliche Bild so verwenden, wie es ist<\/strong>. Andernfalls passen Sie Einstellungen wie die Hintergrundfarbe, den Radius und die Bildgr&ouml;&szlig;e an.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c34899737\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c34899737\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"141\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-3.png\/public\" alt=\"Real Favicon Generator-Optionen zur Bearbeitung von Favicons\" class=\"wp-image-6241\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-3.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-3.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-3.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Scrollen Sie nach unten zu den <strong>Favicon-Generator-Optionen<\/strong> und klicken Sie auf <strong>Ihre Favicons und HTML-Code generieren<\/strong>, um zu best&auml;tigen.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Das war&rsquo;s! Sie werden zur&uuml;ck zum <strong>Favicon<\/strong>-Men&uuml; im WordPress Dashboard weitergeleitet. Klicken Sie auf die Schaltfl&auml;che <strong>&Uuml;berpr&uuml;fen Sie Ihr Favicon<\/strong>, um zu &uuml;berpr&uuml;fen, ob Ihr Website-Icon richtig funktioniert. Um das aktuelle Icon zu ersetzen, wiederholen Sie einfach die oben genannten Schritte.<\/p><p class=\"wp-block-paragraph\">Denken Sie daran, dass dieses Plugin aktiviert bleiben muss, um das Favicon anzuzeigen. Wenn Sie es deaktivieren oder deinstallieren, wird das Icon Ihrer Website nicht mehr angezeigt.<\/p><p class=\"wp-block-paragraph\">Aktualisieren Sie das Plugin regelm&auml;&szlig;ig, um Sicherheitsrisiken und Bugs zu vermeiden. Um diese Aufgabe zu vereinfachen, k&ouml;nnen <a href=\"\/de\/wordpress-hosting\"><strong>Hostinger Managed WordPress Hosting<\/strong><\/a>-Nutzer die Auto-Update-Funktion im <strong>hPanel<\/strong> aktivieren.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/de\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-4104\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h3 class=\"wp-block-heading\"><strong>4. Theme-Dateien manuell bearbeiten<\/strong><\/h3><p class=\"wp-block-paragraph\">Sie k&ouml;nnen ein Favicon hinzuf&uuml;gen, indem Sie das Bild manuell in den WordPress-Rootordner hochladen und Ihre Theme-Datei bearbeiten. Da diese Methode etwas komplexer sein kann, empfehlen wir sie f&uuml;r Entwickler oder Personen mit Programmierkenntnissen.<\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Wichtig! <\/strong>Idealerweise sollten Sie Codesnippets in einer <a href=\"\/de\/tutorials\/wordpress-staging-site-erstellen\/\">WordPress-Staging-Umgebung<\/a> &uuml;berpr&uuml;fen, bevor Sie sie zur Live-Site hinzuf&uuml;gen. Dieser Schritt stellt sicher, dass die neuen Erg&auml;nzungen keine potenziell schwerwiegenden Fehler verursachen.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Bevor Sie dies tun, erstellen und aktivieren Sie ein Child-Theme, um sicherzustellen, dass Ihr Favicon-Code nach einem Update intakt bleibt. F&uuml;hren Sie dann die folgenden Schritte aus:<\/p><ol class=\"wp-block-list\">\n<li>&Ouml;ffnen Sie die <strong>Real Favicon Generator<\/strong>-Website, klicken Sie auf <strong>Pick your Favicon image<\/strong> und laden Sie die Favicon-Datei von Ihrem Computer hoch.<\/li>\n\n\n\n<li>Scrollen Sie zum Abschnitt <strong>Favicon Generator Options<\/strong> und klicken Sie auf die Registerkarte <strong>Path<\/strong>. W&auml;hlen Sie aus, wo Sie das Favicon-Bild ablegen m&ouml;chten. Idealerweise sollten Sie das <strong>root-<\/strong>Verzeichnis w&auml;hlen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c3489c754\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c3489c754\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/de\/tutorials\/wp-content\/uploads\/sites\/29\/2025\/09\/the-select-from-the-media-library-button-in-real-favicon-generator-plugin-menu.avif\" alt=\"Die Schaltfl&auml;che &bdquo;Select from the Media Library&rdquo; im Men&uuml; des Real Favicon Generator-Plugins\" class=\"wp-image-7946\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Klicken Sie auf <strong>Generate your Favicons and HTML code<\/strong>.<\/li>\n\n\n\n<li>Sie werden auf die Seite mit der Installationsanleitung weitergeleitet. Klicken Sie auf die Schaltfl&auml;che <strong>Favicon package<\/strong>, um die Favicon-Dateien herunterzuladen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c3489e643\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c3489e643\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"281\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-2.png\/public\" alt=\"Optionen f&uuml;r den Pfad des Real Favicon Generator\" class=\"wp-image-6238\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Kopieren Sie das Codesnippet und bewahren Sie es sicher auf, zum Beispiel in einer TXT-Datei. Alternativ k&ouml;nnen Sie diese Registerkarte ge&ouml;ffnet lassen, da wir sie sp&auml;ter ben&ouml;tigen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a61c348a079a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a61c348a079a\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"387\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-5.png\/public\" alt=\"Installationsanleitung f&uuml;r den Real Favicon Generator\" class=\"wp-image-6243\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-5.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-5.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2025\/09\/image-5.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Jetzt, da die Dateien und der Code fertig sind, f&uuml;gen Sie sie zu Ihrer WordPress-Website hinzu. So geht&rsquo;s:<\/p><ol class=\"wp-block-list\">\n<li>Greifen Sie auf das <strong>public_html<\/strong>-Rootverzeichnis Ihrer WordPress-Website zu, indem Sie einen <strong>File Transfer Protocol<\/strong> (FTP)-Client wie<strong> FileZilla <\/strong>oder den Dateimanager Ihres Hosting-Providers verwenden.<\/li>\n\n\n\n<li>Laden Sie das heruntergeladene Archiv hoch und entpacken Sie es in das Verzeichnis <strong>public_html<\/strong>. Denken Sie daran, dass <strong>public_html<\/strong> nur die Favicon-Dateien enthalten sollte, nicht den Ordner.<\/li>\n\n\n\n<li>Geben Sie die folgende URL in Ihren Webbrowser ein, um zu best&auml;tigen, dass WordPress Ihr Favicon lesen kann. Ersetzen Sie <strong>domain.tld<\/strong> mit Ihrem tats&auml;chlichen Domainnamen:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">domain.tld\/favicon.ico<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>&Ouml;ffnen Sie Ihr WordPress-Dashboard und navigieren Sie zu <strong>Werkzeuge <\/strong>&rarr; <strong>Theme File<\/strong> <strong>Editor<\/strong>.<\/li>\n\n\n\n<li>Im Men&uuml; <strong>Theme-Dateien<\/strong> auf der rechten Seite w&auml;hlen Sie <strong>header.php<\/strong> aus. Falls Ihr Theme diese Datei nicht enth&auml;lt, bearbeiten Sie stattdessen die <strong>Datei functions.php<\/strong>.<\/li>\n\n\n\n<li>F&uuml;gen Sie den HTML-Code des Real Favicon Generator am Ende Ihrer Datei nach dem <strong>?&gt;<\/strong>-Tag ein. In unserem Fall sieht das Snippet wie folgt aus:<\/li>\n<\/ol><pre class=\"wp-block-preformatted\">&lt;link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"\/apple-touch-icon.png\"&gt;&gt;&lt;link rel=\"icon\" type=\"image\/png\" sizes=\"32x32\" href=\"\/favicon-32x32.png\"&gt;&lt;link rel=\"icon\" type=\"image\/png\" sizes=\"16x16\" href=\"\/favicon-16x16.png\"&gt;&lt;link rel=\"manifest\" href=\"\/site.webmanifest\"&gt;&lt;link rel=\"mask-icon\" href=\"\/safari-pinned-tab.svg\" color=\"#5bbad5\"&gt;&gt;&lt;meta name=\"msapplication-TileColor\" content=\"#da532c\"&gt;&lt;meta name=\"theme-color\" content=\"#ffffff\"&gt;<\/pre><ol start=\"7\" class=\"wp-block-list\">\n<li>Klicken Sie auf <strong>Datei aktualisieren<\/strong>, um die &Auml;nderungen zu speichern.<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Um das benutzerdefinierte Favicon zu entfernen, l&ouml;schen Sie den Code aus Ihrer Theme-Datei und entfernen Sie die Bilddateien aus dem WordPress-Rootverzeichnis.<\/p><h2 class=\"wp-block-heading\" id=\"h-fazit\"><strong>Fazit<\/strong><\/h2><p class=\"wp-block-paragraph\">Ein WordPress Favicon ist ein kleines Bild, das auf der Browser-Registerkarte eines Benutzers erscheint, wenn dieser Ihre Website aufruft. Es hilft ihnen, zwischen den Tabs zu unterscheiden und f&ouml;rdert die Wiedererkennung der Marke.<\/p><p class=\"wp-block-paragraph\">Sie k&ouml;nnen ein Favicon mit einer Grafiksoftware oder einem Webtool wie dem<strong> Real Favicon Generator<\/strong> erstellen. Denken Sie daran, dass das Bild quadratisch sein muss, mindestens <strong>512 x 512 Pixel<\/strong> gro&szlig; sein muss und den Richtlinien f&uuml;r Suchmaschinen entspricht.<\/p><p class=\"wp-block-paragraph\">Der einfachste Weg, ein Favicon zu Ihrer Website hinzuzuf&uuml;gen, ist die Verwendung des<strong> Website-Icon<\/strong>-Blocks im Gutenberg-Editor. Wenn Sie klassische Themes verwenden, nutzen Sie die <strong>WordPress Customizer<\/strong>-Funktion im <strong>Design<\/strong>-Men&uuml;.<\/p><p class=\"wp-block-paragraph\">Alternativ k&ouml;nnen Sie ein Plugin wie <strong>Real Favicon Generator<\/strong> verwenden und das Bild &uuml;ber die <strong>Design<\/strong>-Einstellung hochladen. Entwickler k&ouml;nnen dies auch manuell tun, indem sie das Icon in das WordPress-Rootverzeichnis hochladen und HTML-Code in die <strong>PHP<\/strong>-Datei des Themes einf&uuml;gen.<\/p><h2 class=\"wp-block-heading\" id=\"h-wordpress-favicon-faq\">WordPress Favicon FAQ<\/h2><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6943ffb02298a\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wie entfernt man das Standard-WordPress Favicon?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Sie k&ouml;nnen das Standard-WordPress Favicon zwar nicht entfernen, aber Sie k&ouml;nnen es durch ein anderes Bild ersetzen. Dazu k&ouml;nnen Sie den integrierten Editor, den Theme-Customizer, ein Plugin oder die Datei <strong>header.php<\/strong> verwenden. Wenn Sie das neue Icon entfernen, wird das Standard-WordPress Favicon wieder angezeigt.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffb02298f\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wie kann ich das Favicon in WordPress transparent machen?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Um einen transparenten WordPress Favicon-Hintergrund zu erstellen, speichern Sie das Bild in einer Erweiterung, die Transparenz unterst&uuml;tzt, wie <strong>PNG<\/strong>. Wenn Ihr Icon in einem anderen Format vorliegt, m&uuml;ssen Sie den Hintergrund mit einer Grafiksoftware entfernen und als neue Datei speichern.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffb022990\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Wof&uuml;r braucht man ein Favicon?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Das WordPress Favicon hilft Nutzern, zwischen verschiedenen Websites zu unterscheiden, wenn sie mehrere Registerkarten in ihren Webbrowsern &ouml;ffnen. Au&szlig;erdem erh&ouml;ht es die Sichtbarkeit auf den Ergebnisseiten der Suchmaschinen und steigert die Markenbekanntheit.&nbsp;<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffb022991\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Was ist der Unterschied zwischen einem Favicon und einem Website-Icon in WordPress?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ein Favicon ist ein kleines Bild auf den Browser-Registerkarten der Nutzer neben dem Titel Ihrer Website. Ein Website-Icon hingegen ist in der Regel gr&ouml;&szlig;er und befindet sich in mehreren Bereichen Ihrer Webseite. Es ist eine detailliertere Darstellung Ihrer Markenidentit&auml;t.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ein Favicon ist ein kleines Bild, das in der Registerkarte des Webbrowsers angezeigt wird, wenn ein Benutzer auf Ihre WordPress-Website zugreift. Es hilft den Nutzern, Ihre Website schnell zu erkennen, wenn mehrere Tabs ge&ouml;ffnet sind, insbesondere wenn der Titel Ihrer Website nicht sichtbar ist. In diesem Tutorial wird erkl&auml;rt, was ein WordPress Favicon ist, wie [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/wordpress-favicon\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":550,"featured_media":6064,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"So f\u00fcgen Sie ein WordPress Favicon zu Ihrer Website hinzu","rank_math_description":"So f\u00fcgen Sie ein WordPress Favicon hinzu: Manuell, mit Plugin und 2 weiteren Methoden. Schritt-f\u00fcr-Schritt-Anleitung f\u00fcr Ihre Website.","rank_math_focus_keyword":"wordpress favicon","footnotes":""},"categories":[20],"tags":[],"class_list":["post-6236","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-favicon\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-adicionar-favicon-no-site\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/favicon-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-favicon-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-favicon\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/favicon-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-favicon\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-favicon\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/favicon-wordpress\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-adicionar-favicon-no-site\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/6236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/550"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=6236"}],"version-history":[{"count":6,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/6236\/revisions"}],"predecessor-version":[{"id":9411,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/6236\/revisions\/9411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media\/6064"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=6236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=6236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=6236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}