public/hugo-internet-weblog

Fork 0

Rework favicon integration #5

New issue

Closed

opened 2025-01-28 22:55:18 +01:00 by stephan.hadan · 4 comments

stephan.hadan commented

2025-01-28 22:55:18 +01:00

Owner

No description provided.

stephan.hadan added this to the v1.1 milestone 2025-01-28 22:55:18 +01:00

stephan.hadan added this to the Development of new features project 2025-01-28 22:55:18 +01:00

stephan.hadan commented

2025-01-28 23:01:09 +01:00

Author

Owner

Implementation guideline:

For the browser using HTML:

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

If you’re making a PWA (Progressive Web App), also add this to the HTML:

<link rel="manifest" href="/manifest.webmanifest">

And a file with the web app manifest:

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Maskable icons should have bigger paddings. The safe zone is a 409×409 circle. Use maskable.app to check your icon.

**Implementation guideline:** For the browser using HTML: ``` <link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" href="/icon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> ``` If you’re making a PWA (Progressive Web App), also add this to the HTML: `<link rel="manifest" href="/manifest.webmanifest">` And a file with the web app manifest: ``` // manifest.webmanifest { "icons": [ { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }, { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" } ] } ``` Maskable icons should have bigger paddings. The safe zone is a 409×409 circle. Use [maskable.app](https://maskable.app) to check your icon.

stephan.hadan self-assigned this 2025-01-28 23:03:58 +01:00

stephan.hadan commented

2025-01-28 23:19:14 +01:00

Author

Owner

Every step should be documented in the README.md

stephan.hadan added the

enhancement

label 2025-01-28 23:20:45 +01:00

stephan.hadan added reference feat/rework-of-favicon-integration

2025-01-28 23:31:17 +01:00

stephan.hadan pinned this 2025-01-28 23:31:32 +01:00

stephan.hadan added the due date 2025-01-29

2025-01-28 23:52:49 +01:00

stephan.hadan added spent time 2025-01-29 08:13:40 +01:00

10 minutes

stephan.hadan added a new dependency 2025-01-29 08:13:49 +01:00

#14 added favicons and replaced the links in site_header.html with a state of the art implementation.

stephan.hadan commented

2025-01-29 08:15:02 +01:00

Author

Owner

Implementation is done this way:

First, use the download button to download the files listed below. Place the files in the root directory of your website.

android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
site.webmanifest

Next, copy the following link tags and paste them into the head of your HTML.

<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="manifest" href="/site.webmanifest">

**_Implementation is done this way:_** First, use the download button to download the files listed below. Place the files in the root directory of your website. - android-chrome-192x192.png - android-chrome-512x512.png - apple-touch-icon.png - favicon-16x16.png - favicon-32x32.png - favicon.ico - site.webmanifest Next, copy the following link tags and paste them into the head of your HTML. ``` <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="manifest" href="/site.webmanifest"> ```

stephan.hadan commented

2025-01-29 08:16:09 +01:00

Author

Owner

Done and merged to main branch.

stephan.hadan closed this issue

2025-01-29 08:16:13 +01:00

stephan.hadan unpinned this 2025-01-29 09:03:21 +01:00