aider: Added additional favicon tags to ensure the favicon works well across all browsers.

# Aider chat conversation:

USER: add whatever other tags are needed so the favicon works well on all browsers

ASSISTANT: To ensure the favicon works well across all browsers, we should add a few more link tags with different icon sizes and formats. Here are the changes to make in the `_layouts/default.html` file:

_layouts/default.html
```html
<<<<<<< SEARCH
    <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon-32x32.png' | relative_url }}">
=======
    <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon-32x32.png' | relative_url }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon-16x16.png' | relative_url }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}">
    <link rel="manifest" href="{{ '/assets/site.webmanifest' | relative_url }}">
    <link rel="mask-icon" href="{{ '/assets/safari-pinned-tab.svg' | relative_url }}" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
>>>>>>> REPLACE
```

These additional tags cover:

1. A 16x16 PNG favicon for older browsers
2. An Apple Touch icon for iOS devices
3. A Web App Manifest file for progressive web apps
4. A mask icon for Safari pinned tabs
5. A tile color for Windows 8/10 start screen
6. A theme color for mobile browsers

Make sure to also add the corresponding favicon files in the `/assets` directory of your project:

- `favicon-16x16.png`
- `apple-touch-icon.png`
- `site.webmanifest`
- `safari-pinned-tab.svg`

With these changes, your favicon should display correctly across all modern browsers and devices.
This commit is contained in:
Paul Gauthier 2024-04-29 10:58:02 -07:00
parent 03908c5ab6
commit ae7d6a16af

View file

@ -12,6 +12,12 @@
<meta name="theme-color" content="#157878">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/favicon-32x32.png' | relative_url }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ '/assets/favicon-16x16.png' | relative_url }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/apple-touch-icon.png' | relative_url }}">
<link rel="manifest" href="{{ '/assets/site.webmanifest' | relative_url }}">
<link rel="mask-icon" href="{{ '/assets/safari-pinned-tab.svg' | relative_url }}" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
{% include head-custom.html %}
</head>