Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Verify favicon metadata is correct #27

Open
JasonYao opened this issue Mar 11, 2021 · 1 comment
Open

Verify favicon metadata is correct #27

JasonYao opened this issue Mar 11, 2021 · 1 comment
Labels
Infra Just stuff that might be good to have done

Comments

@JasonYao
Copy link
Owner

  • Make a favicon image srcset, or update for the favicons I created 4 years ago, since current code is:
    <link rel="shortcut icon" href="{{ .Site.Params.favicon | absURL }}favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.favicon | absURL }}apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ .Site.Params.favicon | absURL }}favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ .Site.Params.favicon | absURL }}favicon-16x16.png">

Old code for favicons:

<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="/manifest.json">
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
<meta name="msapplication-config" content="/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

from https://github.com/JasonYao/deprecated-old-2017-site/blob/source/_includes/head.html#L40-L47

@JasonYao JasonYao added the Infra Just stuff that might be good to have done label Mar 30, 2021
@JasonYao
Copy link
Owner Author

Per https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs, this looks to be the simplified approach nowadays:

HTML in header

<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

Favicon manifest file

{
  "icons": [
    { "src": "/192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Infra Just stuff that might be good to have done
Projects
None yet
Development

No branches or pull requests

1 participant