2 lines
19 KiB
HTML
2 lines
19 KiB
HTML
<!doctype html><html lang="de-DE" data-mode="dark"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover" ><meta name="generator" content="Jekyll v4.3.4" /><meta property="og:title" content="Customize the Favicon" /><meta name="author" content="Justin" /><meta property="og:locale" content="de_DE" /><meta name="description" content="The favicons of Chirpy are placed in the directory assets/img/favicons/. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons." /><meta property="og:description" content="The favicons of Chirpy are placed in the directory assets/img/favicons/. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons." /><link rel="canonical" href="https://pages-test.morlana.net/posts/customize-the-favicon/" /><meta property="og:url" content="https://pages-test.morlana.net/posts/customize-the-favicon/" /><meta property="og:site_name" content="Morlana Industries" /><meta property="og:type" content="article" /><meta property="article:published_time" content="2019-08-10T18:34:00+02:00" /><meta name="twitter:card" content="summary" /><meta property="twitter:title" content="Customize the Favicon" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Justin","url":"https://tree.morlana.link/@SitirioTV"},"dateModified":"2019-08-10T18:34:00+02:00","datePublished":"2019-08-10T18:34:00+02:00","description":"The favicons of Chirpy are placed in the directory assets/img/favicons/. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.","headline":"Customize the Favicon","mainEntityOfPage":{"@type":"WebPage","@id":"https://pages-test.morlana.net/posts/customize-the-favicon/"},"url":"https://pages-test.morlana.net/posts/customize-the-favicon/"}</script><title>Customize the Favicon | Morlana Industries</title><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png"><link rel="manifest" href="/assets/img/favicons/site.webmanifest"><link rel="shortcut icon" href="/assets/img/favicons/favicon.ico"><meta name="apple-mobile-web-app-title" content="Morlana Industries"><meta name="application-name" content="Morlana Industries"><meta name="msapplication-TileColor" content="#da532c"><meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml"><meta name="theme-color" content="#ffffff"><link rel="preconnect" href="https://fonts.googleapis.com" ><link rel="dns-prefetch" href="https://fonts.googleapis.com" ><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com" ><link rel="preconnect" href="https://cdn.jsdelivr.net" ><link rel="dns-prefetch" href="https://cdn.jsdelivr.net" ><link rel="stylesheet" href="/assets/css/jekyll-theme-chirpy.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.29.0/dist/tocbot.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css"><body><aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end"><header class="profile-wrapper"> <a href="/" id="avatar" class="rounded-circle"><img src="https://robertsspaceindustries.com/media/di49khyfxgs9ir/logo/MORINC-Logo.png" width="112" height="112" alt="avatar" onerror="this.style.display='none'"></a> <a class="site-title d-block" href="/">Morlana Industries</a><p class="site-subtitle fst-italic mb-0">Your Expert in Intergalactic Transport!</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class="nav"><li class="nav-item"> <a href="/" class="nav-link"> <i class="fa-fw fas fa-home"></i> <span>STARTSEITE</span> </a><li class="nav-item"> <a href="/categories/" class="nav-link"> <i class="fa-fw fas fa-stream"></i> <span>KATEGORIEN</span> </a><li class="nav-item"> <a href="/tags/" class="nav-link"> <i class="fa-fw fas fa-tags"></i> <span>TAGS</span> </a><li class="nav-item"> <a href="/archives/" class="nav-link"> <i class="fa-fw fas fa-archive"></i> <span>ARCHIV</span> </a><li class="nav-item"> <a href="/about/" class="nav-link"> <i class="fa-fw fas fa-info-circle"></i> <span>ÜBER</span> </a></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"> <a href="https://morlana.link/discord" aria-label="discord" target="_blank" rel="noopener noreferrer" > <i class="fa-brands fa-discord"></i> </a> <a href="javascript:location.href = 'mailto:' + ['contact','morlana.net'].join('@')" aria-label="email" > <i class="fas fa-envelope"></i> </a> <a href="/feed.xml" aria-label="rss" > <i class="fas fa-rss"></i> </a></div></aside><div id="main-wrapper" class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id="topbar-wrapper" aria-label="Top Bar"><div id="topbar" class="d-flex align-items-center justify-content-between px-lg-3 h-100" ><nav id="breadcrumb" aria-label="Breadcrumb"> <span> <a href="/">Startseite</a> </span> <span>Customize the Favicon</span></nav><button type="button" id="sidebar-trigger" class="btn btn-link"> <i class="fas fa-bars fa-fw"></i> </button><div id="topbar-title"> Eintrag</div><button type="button" id="search-trigger" class="btn btn-link"> <i class="fas fa-search fa-fw"></i> </button> <search id="search" class="align-items-center ms-3 ms-lg-0"> <i class="fas fa-search fa-fw"></i> <input class="form-control" id="search-input" type="search" aria-label="search" autocomplete="off" placeholder="Suche..." > </search> <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">Abbrechen</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class="px-1" data-toc="true"><header><h1 data-toc-skip>Customize the Favicon</h1><div class="post-meta text-muted"> <span> Veröffentlicht <time data-ts="1565454840" data-df="DD.MM.YYYY" data-bs-toggle="tooltip" data-bs-placement="bottom" > 10.08.2019 </time> </span><div class="d-flex justify-content-between"> <span> Von <em> <a href="https://tree.morlana.link/@SitirioTV">Justin</a> </em> </span><div> <span class="readtime" data-bs-toggle="tooltip" data-bs-placement="bottom" title="212 Wörter" > <em>1 Minuten</em> Lesezeit</span></div></div></div></header><div id="toc-bar" class="d-flex align-items-center justify-content-between invisible"> <span class="label text-truncate">Customize the Favicon</span> <button type="button" class="toc-trigger btn me-1"> <i class="fa-solid fa-list-ul fa-fw"></i> </button></div><button id="toc-solo-trigger" type="button" class="toc-trigger btn btn-outline-secondary btn-sm"> <span class="label ps-2 pe-1">Inhalt</span> <i class="fa-solid fa-angle-right fa-fw"></i> </button> <dialog id="toc-popup" class="p-0"><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">Customize the Favicon</div><button id="toc-popup-close" type="button" class="btn mx-1 my-1 opacity-75"> <i class="fas fa-close"></i> </button></div><div id="toc-popup-content" class="px-4 py-3 pb-4"></div></dialog><div class="content"><p>The <a href="https://www.favicon-generator.org/about/">favicons</a> of <a href="https://github.com/cotes2020/jekyll-theme-chirpy/"><strong>Chirpy</strong></a> are placed in the directory <code class="language-plaintext filepath highlighter-rouge">assets/img/favicons/</code>. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.</p><h2 id="generate-the-favicon"><span class="me-2">Generate the favicon</span><a href="#generate-the-favicon" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool <a href="https://realfavicongenerator.net/"><strong>Real Favicon Generator</strong></a> and click the button <kbd>Select your Favicon image</kbd> to upload your image file.</p><p>In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.</p><h2 id="download--replace"><span class="me-2">Download & Replace</span><a href="#download--replace" class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>Download the generated package, unzip and delete the following two from the extracted files:</p><ul><li><code class="language-plaintext filepath highlighter-rouge">browserconfig.xml</code><li><code class="language-plaintext filepath highlighter-rouge">site.webmanifest</code></ul><p>And then copy the remaining image files (<code class="language-plaintext filepath highlighter-rouge">.PNG</code> and <code class="language-plaintext filepath highlighter-rouge">.ICO</code>) to cover the original files in the directory <code class="language-plaintext filepath highlighter-rouge">assets/img/favicons/</code> of your Jekyll site. If your Jekyll site doesn’t have this directory yet, just create one.</p><p>The following table will help you understand the changes to the favicon files:</p><div class="table-wrapper"><table><thead><tr><th>File(s)<th style="text-align: center">From Online Tool<th style="text-align: center">From Chirpy<tbody><tr><td><code class="language-plaintext highlighter-rouge">*.PNG</code><td style="text-align: center">✓<td style="text-align: center">✗<tr><td><code class="language-plaintext highlighter-rouge">*.ICO</code><td style="text-align: center">✓<td style="text-align: center">✗</table></div><blockquote class="prompt-info"><p>✓ means keep, ✗ means delete.</p></blockquote><p>The next time you build the site, the favicon will be replaced with a customized edition.</p></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"> <i class="far fa-folder-open fa-fw me-1"></i> <a href="//categories/blogging/">Blogging</a>, <a href="//categories/tutorial/">Tutorial</a></div><div class="post-tags"> <i class="fa fa-tags fa-fw me-1"></i> <a href="//tags/favicon/" class="post-tag no-text-decoration" >favicon</a></div><div class=" post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2 " ><div class="license-wrapper"> Dieser Eintrag ist vom Autor unter <a href="https://creativecommons.org/licenses/by/4.0/"> CC BY 4.0 </a> lizensiert.</div><div class="share-wrapper d-flex align-items-center"> <span class="share-label text-muted">Teilen</span> <span class="share-icons"> <a href="https://twitter.com/intent/tweet?text=Customize%20the%20Favicon%20-%20Morlana%20Industries&url=https%3A%2F%2Fpages-test.morlana.net%2Fposts%2Fcustomize-the-favicon%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Twitter" aria-label="Twitter"> <i class="fa-fw fa-brands fa-square-x-twitter"></i> </a> <a href="https://www.facebook.com/sharer/sharer.php?title=Customize%20the%20Favicon%20-%20Morlana%20Industries&u=https%3A%2F%2Fpages-test.morlana.net%2Fposts%2Fcustomize-the-favicon%2F" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Facebook" aria-label="Facebook"> <i class="fa-fw fab fa-facebook-square"></i> </a> <a href="https://t.me/share/url?url=https%3A%2F%2Fpages-test.morlana.net%2Fposts%2Fcustomize-the-favicon%2F&text=Customize%20the%20Favicon%20-%20Morlana%20Industries" target="_blank" rel="noopener" data-bs-toggle="tooltip" data-bs-placement="top" title="Telegram" aria-label="Telegram"> <i class="fa-fw fab fa-telegram"></i> </a> <button id="copy-link" aria-label="Copy link" class="btn small" data-bs-toggle="tooltip" data-bs-placement="top" title="Link kopieren" data-title-succeed="Link erfolgreich kopiert!" > <i class="fa-fw fas fa-link pe-none fs-6"></i> </button> </span></div></div></div></article></main><aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted"><div class="access"><section id="access-lastmod"><h2 class="panel-heading">Kürzlich aktualisiert</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"> <a href="/posts/customize-the-favicon/">Customize the Favicon</a><li class="text-truncate lh-lg"> <a href="/posts/getting-started/">Getting Started</a><li class="text-truncate lh-lg"> <a href="/posts/write-a-new-post/">Writing a New Post</a><li class="text-truncate lh-lg"> <a href="/posts/text-and-typography/">Text and Typography</a></ul></section><section><h2 class="panel-heading">Beliebte Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/getting-started/">getting started</a> <a class="post-tag btn btn-outline-primary" href="/tags/typography/">typography</a> <a class="post-tag btn btn-outline-primary" href="/tags/writing/">writing</a></div></section></div><section id="toc-wrapper" class="ps-0 pe-4"><h2 class="panel-heading ps-3 mb-2">Inhalt</h2><nav id="toc"></nav></section></aside></div><div class="row"><div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id="related-posts" aria-labelledby="related-label"><h3 class="mb-4" id="related-label">Weiterlesen</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class="col"> <a href="/posts/getting-started/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565355300" data-df="DD.MM.YYYY" > 09.08.2019 </time><h4 class="pt-0 my-2">Getting Started</h4><div class="text-muted"><p>Get started with Chirpy basics in this comprehensive overview. You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.</p></div></div></a></article><article class="col"> <a href="/posts/write-a-new-post/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565244600" data-df="DD.MM.YYYY" > 08.08.2019 </time><h4 class="pt-0 my-2">Writing a New Post</h4><div class="text-muted"><p>This tutorial will guide you how to write a post in the Chirpy template, and it’s worth reading even if you’ve used Jekyll before, as many features require specific variables to be set. Naming and...</p></div></div></a></article><article class="col"> <a href="/posts/text-and-typography/" class="post-preview card h-100"><div class="card-body"> <time data-ts="1565235180" data-df="DD.MM.YYYY" > 08.08.2019 </time><h4 class="pt-0 my-2">Text and Typography</h4><div class="text-muted"><p>Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"> <a href="//posts/getting-started/" class="btn btn-outline-primary" aria-label="Eintrag vorher" ><p>Getting Started</p></a><div class="btn btn-outline-primary disabled" aria-label="Nächster Eintrag"><p>-</p></div></nav><footer aria-label="Site Info" class=" d-flex flex-column justify-content-center text-muted flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3 " ><p>© <time>2024</time> <a href="https://tree.morlana.link/@Morlana">Morlana</a>. <span data-bs-toggle="tooltip" data-bs-placement="top" title="Alle Einträge auf dieser Seite stehen, soweit nicht anders angegeben, unter der Lizenz Creative Commons Attribution 4.0 (CC BY 4.0)." >Einige Rechte vorbehalten.</span></p><p>Powered by <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a> with <a data-bs-toggle="tooltip" data-bs-placement="top" title="v7.1.1" href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener" >Chirpy</a> theme</p></footer></div></div><div id="search-result-wrapper" class="d-flex justify-content-center d-none"><div class="col-11 content"><div id="search-hints"><section><h2 class="panel-heading">Beliebte Tags</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"> <a class="post-tag btn btn-outline-primary" href="/tags/favicon/">favicon</a> <a class="post-tag btn btn-outline-primary" href="/tags/getting-started/">getting started</a> <a class="post-tag btn btn-outline-primary" href="/tags/typography/">typography</a> <a class="post-tag btn btn-outline-primary" href="/tags/writing/">writing</a></div></section></div><div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div></div><aside aria-label="Scroll to Top"> <button id="back-to-top" type="button" class="btn btn-lg btn-box-shadow"> <i class="fas fa-angle-up"></i> </button></aside></div><div id="mask" class="d-none position-fixed w-100 h-100 z-1"></div><aside id="notification" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="true" data-bs-autohide="false" ><div class="toast-header"> <button type="button" class="btn-close ms-auto" data-bs-dismiss="toast" aria-label="Close" ></button></div><div class="toast-body text-center pt-0"><p class="px-2 mb-3">Eine neue Version ist verfügbar.</p><button type="button" class="btn btn-primary" aria-label="Update"> Neue Version </button></div></aside><script src="https://cdn.jsdelivr.net/combine/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js,npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js,npm/glightbox@3.3.0/dist/js/glightbox.min.js,npm/clipboard@2.0.11/dist/clipboard.min.js,npm/dayjs@1.11.13/dayjs.min.js,npm/dayjs@1.11.13/locale/de.js,npm/dayjs@1.11.13/plugin/relativeTime.js,npm/dayjs@1.11.13/plugin/localizedFormat.js,npm/tocbot@4.29.0/dist/tocbot.min.js"></script> <script src="/assets/js/dist/post.min.js"></script> <script defer src="/app.min.js?baseurl=/®ister=true" ></script> <script>SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('search-results'), json: '/assets/js/data/search.json', searchResultTemplate: '<article class="px-1 px-sm-2 px-lg-4 px-xl-0"><header><h2><a href="{url}">{title}</a></h2><div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1"> {categories} {tags}</div></header><p>{snippet}</p></article>', noResultsText: '<p class="mt-5">Ups! Keine Einträge gefunden.</p>', templateMiddleware: function(prop, value, template) { if (prop === 'categories') { if (value === '') { return `${value}`; } else { return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`; } } if (prop === 'tags') { if (value === '') { return `${value}`; } else { return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`; } } } }); </script>
|