粘土細工

ファビコンのアイコン制作ツール・設置・メタ記述メモ

ワードプレス以外のhtmlサイトのファビコン設定方法

11年ぶりに「ブログ」を始めたワタシ。

それまでhtmlのサイトいじりばかりしていたので、基礎知識はそれなりにあるつもり。

ワードプレスのプラグインってようするにスクリプトなんだね。…とか。

さて、一枚一枚ページを用意するhtml5のホームページと違い、そんなこんなでワードプレスはプラグインであれこれできるので、ファビコンを設定してみた。

ワードプレスで入れたプラグインは「Favicon by RealFaviconGenerator」というプラグイン。

それはともかく、スマホ(アンドロイド)でも「ホーム画面に追加」でオリジナルアイコンがアイコンになる様子を見て、静的なhtmlのサイトもそうできるように設定することにした…のメモ書き。

静的htmlサイトのファビコン制作ツール

ツールというか、favicon.ico形式の画像に変換してくれるウェブページをご利用する。

https://www.favicon-generator.org/

アイコンのイラストはフリー素材をご利用。

商標登録するわけではないし、「使って下さい」と公開してくださっているのでありがたくイメージアイコンへ。

上記のファビコンデータ化ツールでダウンロードした画像一式のファイルをhtmlサイトにアップロード。

格納フォルダは「favicon」というフォルダー名にした。

サイトページにメタ情報の記載

あとは全てのページのヘッダー部分に以下のメタ情報を記載。

ファビコン表示のためのメタ情報例
<link rel=”apple-touch-icon” sizes=”57×57″ href=”../favicon/apple-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”../favicon/apple-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”../favicon/apple-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”../favicon/apple-icon-76×76.png”>
<link rel=”apple-touch-icon” sizes=”114×114″ href=”../favicon/apple-icon-114×114.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”../favicon/apple-icon-120×120.png”>
<link rel=”apple-touch-icon” sizes=”144×144″ href=”../favicon/apple-icon-144×144.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”../favicon/apple-icon-152×152.png”>
<link rel=”apple-touch-icon” sizes=”180×180″ href=”../favicon/apple-icon-180×180.png”>
<link rel=”icon” type=”image/png” sizes=”192×192″ href=”../favicon/android-icon-192×192.png”>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”../favicon/favicon-32×32.png”>
<link rel=”icon” type=”image/png” sizes=”96×96″ href=”../favicon/favicon-96×96.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”../favicon/favicon-16×16.png”>
<link rel=”manifest” href=”../favicon/manifest.json”>
<meta name=”msapplication-TileColor” content=”#ffffff”>
<meta name=”msapplication-TileImage” content=”../favicon/ms-icon-144×144.png”>
<meta name=”theme-color” content=”#ffffff”>

※上記は<>を大文字にしているため、コピペだけじゃ使えません。

トップページのindex.htmlだけは「../favicon/~」ではなく「favicon/~」。(階層・ルートパスのお話)

ソースが膨らんでしまうけれど、もう「favicon.ico」だけじゃアレですね。

ワードプレス(ブログ)の人はプラグインでなんでもかんでもできるけれど、プラグインを入れれば入れるほど.htaccessファイルやらページソースやらスクリプトやらが大量に書き換えられていることに注意しましょう。

ブログはあれこれをつなぎ合わせて自動化しているだけでhtmlとしていることは同じ。

グーグルさんルールによって「ブログ=量産」だった世界も、あまりにも小さなスマホの画面に特化した『一段落で次のページ』レベルのブログばかりになり、パソコン画面向けの1ページで完結する静的htmlサイトも見直されつつ…あるのかな?

ページを多くめくらせる(クリックさせる)情報ばかりのサイトって、(内容自体無意味で)役に立たないですものね。

少数派なhtmlサイト対応のメモ書きでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です