{"id":1324,"date":"2011-04-18T06:00:34","date_gmt":"2011-04-18T04:00:34","guid":{"rendered":"http:\/\/www.ewerkzeug.info\/?p=1324"},"modified":"2024-08-05T12:39:18","modified_gmt":"2024-08-05T10:39:18","slug":"use-favicon-in-websites","status":"publish","type":"post","link":"https:\/\/www.ewerkzeug.info\/en\/favicon-in-websites-nutzen\/","title":{"rendered":"Use favicon (website icon) in websites"},"content":{"rendered":"<p>A frequently asked question in courses and workshops about website production concerns the setup of the favicon (\u201efavorite icon\u201c), as it is visible in the address bar of browsers or as a symbol of the website in the browser's bookmark list.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"380\" height=\"81\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-icon-ewerkzeug.png\" alt=\"\" class=\"wp-image-3961\" title=\"favicon_display\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-icon-ewerkzeug.png 380w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/website-icon-ewerkzeug-300x64.png 300w\" sizes=\"auto, (max-width: 380px) 100vw, 380px\" \/><figcaption class=\"wp-element-caption\">Website icon in the browser tab<\/figcaption><\/figure>\n\n\n\n<!--more-->\n\n\n\n<p>To make such graphics usable for your own website, they must first be created and then uploaded to the web server. You may then need to specify in the HTML source code where these graphics are located on the web server.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"faviconwebsiteicon\">Favicon\/Website icon<\/h2>\n\n\n<p>By default, the file that represents the favicon should also have the name <code>favicon.ico<\/code> have. The graphic format of the favicon is now freely selectable (GIF or PNG are also possible). The results are beautiful if you use PNG files with a transparent background.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"herstellung\">Manufacture<\/h3>\n\n\n<p>The easiest way to do this is to use an online tool. With some tools, you can also draw the content yourself.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/www.favicon.cc\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.favicon.cc\/<\/a><\/li>\n<\/ul>\n\n\n\n<p>Or you can create a square graphic on your own computer and have this file converted into a favicon.ico file. This will probably give you a more attractive result.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.websiteplanet.com\/de\/webtools\/favicon-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.websiteplanet.com\/de\/webtools\/favicon-generator\/<\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/tools.dynamicdrive.com\/favicon\/\" target=\"_blank\" rel=\"noopener\">https:\/\/tools.dynamicdrive.com\/favicon\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.favicon-generator.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.favicon-generator.org\/<\/a><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"ablage\">Filing<\/h3>\n\n\n<p>The favicon is stored either under the name <code>favicon.ico<\/code> in the top directory of the website (e.g. <a rel=\"noopener\" href=\"http:\/\/de.wikipedia.org\/favicon.ico\" target=\"_blank\">http:\/\/de.wikipedia.org\/favicon.ico<\/a>) or in another location on the website, which you then have to tell the browser. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"icon\" type=\"image\/x-icon\" href=\"\/unterverzeichnis\/favicon.ico\"&gt;<\/pre>\n\n\n\n<p>If you store the file in the top directory of the website, you do not need to specify the location, because browsers search for <code>favicon.ico<\/code>. <\/p>\n\n\n\n<p>In the case of <strong>WordPress<\/strong> you can easily add your favicon - WordPress also says <strong>Website icon<\/strong> - in the <strong>Customizer <\/strong>upload.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/customizer-website-icon.png\"><img loading=\"lazy\" decoding=\"async\" width=\"313\" height=\"546\" src=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/customizer-website-icon.png\" alt=\"\" class=\"wp-image-3956\" srcset=\"https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/customizer-website-icon.png 313w, https:\/\/www.ewerkzeug.info\/wp-content\/uploads\/customizer-website-icon-172x300.png 172w\" sizes=\"auto, (max-width: 313px) 100vw, 313px\" \/><\/a><figcaption class=\"wp-element-caption\">Website icon in the Customizer<\/figcaption><\/figure>\n\n\n\n<p><a rel=\"noopener\" href=\"http:\/\/de.wikipedia.org\/wiki\/Favicon\" target=\"_blank\">To the Wikipedia article about the favicon<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>A frequently asked question in courses and workshops about website production concerns the setup of the favicon (\u201efavorite icon\u201c), as it is visible in the address bar of browsers or as a symbol of the website in the browser's bookmark list.<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"none","_seopress_titles_title":"Favicon und apple-touch-icon (Webclip-Icon) in Websites nutzen","_seopress_titles_desc":"","_seopress_robots_index":"","iawp_total_views":343,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-1324","post","type-post","status-publish","format-standard","hentry","category-tipps"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/1324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/comments?post=1324"}],"version-history":[{"count":5,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/1324\/revisions"}],"predecessor-version":[{"id":5680,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/posts\/1324\/revisions\/5680"}],"wp:attachment":[{"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/media?parent=1324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/categories?post=1324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ewerkzeug.info\/en\/wp-json\/wp\/v2\/tags?post=1324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}