move all other favicon-types into dist/icons folder,

point to icons via link and meta tags,
leave favicon.ico in root old browsers,
added custom jekyll layout file to use the icons
for the project website as well.

https://help.github.com/en/articles/customizing-css-and-html-in-your-jekyll-theme
https://github.com/pages-themes/minimal/blob/master/_layouts/default.html
https://stackoverflow.com/a/48969053
This commit is contained in:
glaszig 2019-08-01 15:37:27 +02:00
parent 2104ccb91a
commit c70433585a
9 changed files with 82 additions and 6 deletions

74
_layouts/default.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msapplication-config" content="/dist/icons/browserconfig.xml">
<meta name="msapplication-TileColor" content="#b91d47">
<link rel="icon" type="image/png" sizes="32x32" href="/dist/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/dist/icons/favicon-16x16.png">
<link rel="icon" type="image/png" href="/dist/icons/favicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/dist/icons/apple-touch-icon.png">
<link rel="mask-icon" href="/dist/icons/safari-pinned-tab.svg" color="#b91d47">
<link rel="manifest" href="/dist/icons/site.webmanifest">
{% seo %}
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repository_name }}</a></h1>
{% if site.logo %}
<img src="{{site.logo | relative_url}}" alt="Logo" />
{% endif %}
<p>{{ site.description | default: site.github.project_tagline }}</p>
{% if site.github.is_project_page %}
<p class="view"><a href="{{ site.github.repository_url }}">View the Project on GitHub <small>{{ site.github.repository_nwo }}</small></a></p>
{% endif %}
{% if site.github.is_user_page %}
<p class="view"><a href="{{ site.github.owner_url }}">View My GitHub Profile</a></p>
{% endif %}
{% if site.show_downloads %}
<ul class="downloads">
<li><a href="{{ site.github.zip_url }}">Download <strong>ZIP File</strong></a></li>
<li><a href="{{ site.github.tar_url }}">Download <strong>TAR Ball</strong></a></li>
<li><a href="{{ site.github.repository_url }}">View On <strong>GitHub</strong></a></li>
</ul>
{% endif %}
</header>
<section>
{{ content }}
</section>
<footer>
{% if site.github.is_project_page %}
<p>This project is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
{% endif %}
<p><small>Hosted on GitHub Pages &mdash; Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="{{ "/assets/js/scale.fix.js" | relative_url }}"></script>
{% if site.google_analytics %}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', '{{ site.google_analytics }}', 'auto');
ga('send', 'pageview');
</script>
{% endif %}
</body>
</html>

View file

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View file

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

@ -3,7 +3,7 @@
"short_name": "RaspAP",
"icons": [
{
"src": "/android-chrome-192x192.png",
"src": "/dist/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}

View file

@ -91,12 +91,14 @@ $theme_url = 'dist/css/'.htmlspecialchars($theme, ENT_QUOTES);
<!-- Custom CSS -->
<link href="<?php echo $theme_url; ?>" title="main" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/favicon.png?ver=2.0">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" type="image/png" href="/dist/icons/favicon.png?ver=2.0">
<link rel="apple-touch-icon" sizes="180x180" href="/dist/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/dist/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/dist/icons/favicon-16x16.png">
<link rel="icon" type="image/png" href="/dist/icons/favicon.png" />
<link rel="manifest" href="/dist/icons/site.webmanifest">
<link rel="mask-icon" href="/dist/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="mask-icon" href="/dist/icons/safari-pinned-tab.svg" color="#b91d47">
<meta name="msapplication-config" content="/dist/icons/browserconfig.xml">
<meta name="msapplication-TileColor" content="#b91d47">
<meta name="theme-color" content="#ffffff">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->