Perfect static site template

Hello, world!

This is a small template for a small static site.

(Almost) Proper Favicon

Indeed, this site was made to mess with ‘favicons’. This is damn hard thing in a modern web. You know, different formats, tons of scaled images, links with strange names, web manifests. There is so many ways to shoot youself in the foot.

Single source of trurh: favicon.svg

All other formats is generated from the SVG source.

• Here are a very basic image to start ;)
• Sample media query for dark theme included
• I prefer to add width and height to root <svg> tag (200×200 here)

Legacy favicon.ico (32×32)

It is present in the site’s root, but not linked.

Why it is not linked?

• If we will provide the link to it, then we’ll have to fight some stupid Chome bugs.
• And, indeed, who really care about MSIE now?

Why it is still present?

• Some stupid user agents will try to load path /favicon.ico anyway, even if there is no such link on page, so let’s just decrease number of 404s in web server logs

(Research in progress…)

Apple touch icon (180×180)

It also is present on predefined place /apple-touch-icon.png, but not linked.

• Plain white background added
• Tested on Safari 9 on antique iPad 2

Why it is not linked?

• Safari will try to load it anyway when needed
• In Firefox, if all that links is present, the unholy goddamned FaviconLoader.jsm will mindlessly try to load your favicon and Apple touch icon both, even if it is not really needed

Manifest: no web manifest

Web manifest is considered harmful for non-PWA multi-page sites, so it’s not included.

Instead of it, there is a bit outdated, but standard meta tag application-name. It is supported by mobile Chrome.

Known imperfections:

• Mobile Firefox ignores application-name meta tag (and even did not use icon)
• Safari 9 ignores application-name meta tag

(Research in progress…)

OpenGraph

There is set of OpenGraph tags. Nothing special, but it works. Unfortunately, SVG is not supported by OpenGraph, so there is PNG version made of SVG.

How it works?

Facebook

(That was done not in the real Facebook, only the Sharing Debugger.)

Twitter (DM)

Skype chat

Well. It works.

Note: by using media queries, one can easily choose dark and light versions of screenshots, to conform overall page style. Even SVG icon can have media queries. But not OpenGraph.

Mandatory section

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

P.S.

Valid HTML

Valid CSS

P.P.S.

Indeed, indeed, this site is also a placeholder for a Makefile.