Browse Source

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
pull/360/head
glaszig 4 years ago
parent
commit
c70433585a
  1. 74
      _layouts/default.html
  2. 0
      dist/icons/android-chrome-192x192.png
  3. 0
      dist/icons/apple-touch-icon.png
  4. 0
      dist/icons/browserconfig.xml
  5. 0
      dist/icons/favicon-16x16.png
  6. 0
      dist/icons/favicon-32x32.png
  7. 0
      dist/icons/favicon.png
  8. 2
      dist/icons/site.webmanifest
  9. 12
      index.php

74
_layouts/default.html

@ -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>

0
android-chrome-192x192.png → dist/icons/android-chrome-192x192.png

Before

Width: 192  |  Height: 192  |  Size: 25 KiB

After

Width: 192  |  Height: 192  |  Size: 25 KiB

0
apple-touch-icon.png → dist/icons/apple-touch-icon.png

Before

Width: 180  |  Height: 180  |  Size: 13 KiB

After

Width: 180  |  Height: 180  |  Size: 13 KiB

0
browserconfig.xml → dist/icons/browserconfig.xml

0
favicon-16x16.png → dist/icons/favicon-16x16.png

Before

Width: 16  |  Height: 16  |  Size: 1.4 KiB

After

Width: 16  |  Height: 16  |  Size: 1.4 KiB

0
favicon-32x32.png → dist/icons/favicon-32x32.png

Before

Width: 32  |  Height: 32  |  Size: 2.5 KiB

After

Width: 32  |  Height: 32  |  Size: 2.5 KiB

0
favicon.png → dist/icons/favicon.png

Before

Width: 16  |  Height: 16  |  Size: 1.7 KiB

After

Width: 16  |  Height: 16  |  Size: 1.7 KiB

2
dist/icons/site.webmanifest

@ -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"
}

12
index.php

@ -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 -->

Loading…
Cancel
Save