WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:ウェブサイト全体の中央揃え、ボックス背景色を画面下まで伸ばす
HOME
次の記事:HTML5のcanvas要素が思いの外すごかった

ファビコンとウェブクリップアイコンの設定方法

Web知識

 

ファビコン設定前
ブラウザのタブ、ファビコン設定前
ファビコン設定後
ブラウザのタブ、ファビコン設定後

URL欄やブラウザタブといった所に表示されるアイコンの事をファビコンと言います。設定方法をサイト立ち上げの度に調べているのでブログ記事にしておきます。

 

アイコンファイル(.ico)の用意

 

pngといった画像ファイルではファビコンが反映されないブラウザがあるので、アイコン専用形式とも言えるico形式の画像ファイルを用意します。

イメージとして複数の画像を一つのファイルに詰め込み、アイコンファイルとして生成します。単体の画像でもアイコンファイルになりますが、複数の画像を設定しておいた方が各所で適切な表示がなされます。

やろうと思えば10や20といった数の画像をアイコンファイルに設定出来ますが、一般的なサイトなら16×16、32×32、48×48の3サイズを設定するだけで充分でしょう。

 

ファビコン favicon.icoを作ろう!

異なるサイズの画像ファイルを用意したら、ファビコン生成サイトでジェネレートします(一つの画像からアイコンを複数自動生成するサイトもありますし、アイコンファイルを取り扱えるペイントツールも存在します)。

 

ファビコンジェネレート

このように透過情報を持った画像もファビコンに出来ます。

 

ファビコンデスクトップアイコン

ちなみに48×48のサイズはデスクトップのショートカットアイコンに使われます。

 

 

 

ファビコンをアップロード

 

FTPソフトでアップロード

FTPソフトで生成したファビコンをアップロードします。今回はメインページと同じ階層にfavicon.icoのファイル名でアップロードしたと仮定します。

 

<link rel="shortcut icon" href="./favicon.ico">

アップロード後は、HTMLファイルのhead要素内(<head>~</head>)に上記コードを追加すれば設定完了です。

WordPressの場合、関数を用いて絶対パスを指定しないとファイルが読み込まれないので注意が必要です。

 

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">

<?php echo get_template_directory_uri(); ?>はWordPressにおいてテンプレートフォルダまでのパスを表示する関数です。

 

 

png形式のアイコン画像を設定

 

高解像度ディスプレイや、AndroidのChrome用に192×192のpng形式のアイコン画像を設定します。

面倒だったり、ページの読み込み速度を優先したければこちらは設定しなくても大丈夫です(ico形式のアイコン画像だけに設定を留めているサイトも多いです)。

 

<link rel="icon" sizes="192x192" href="画像ファイルのパス">

画像をアップロードしたら、上の一文をファビコンを設定した記述の下に追加します。rel属性の値がiconの時、任意属性のsizes属性でアイコンサイズを指定します(縦横サイズの区切りはローマ字のxになります)。

 

Google推奨アイコンサイズの説明文翻訳

png形式の192×192のアイコンサイズはGoogleが推奨しているものです(2016年12月現在)。

 

 

 

ウェブクリップアイコンの設定

ウェブクリップアイコン設定無し

ウェブクリップアイコンとは、スマートフォンやタブレット端末でホーム画面に表示されるショートカットアイコンです。この設定も必須ではありませんが、Webアプリを組み込んだサイトでは設定しておいた方がいいでしょう。

ウェブクリップアイコンのサイズはデバイスによって異なります。iPadでは152×152、iPhone6Plusでは180×180といった感じです。大きな画像を用意しておけばデバイスの方で適切なサイズにリサイズしてくれますが、画像が大き過ぎるとページの読み込み速度に影響が出るので、上の項でも使用した192×192のアイコンを一つ設定するのがベターです(2016年12月現在)。

 

<link rel="apple-touch-icon" href="画像ファイルのパス">

head要素内に記述します。装飾された光沢のあるアイコン設定になります(Androidは光沢が付きません)。

 

<link rel="apple-touch-icon-precomposed" href="画像ファイルのパス">

光沢無しに設定したい場合はrel属性の値を上記のように書き換えます。

 

なお、iPhone用Safariはルートディレクトリにapple-touch-icon.pngというファイル名の画像があると、link要素で記述しなくても自動で読み取ってアイコン画像と認識してくれるようです。光沢無しにしたければapple-touch-icon-precomposed.pngのファイル名に変更します。

参考リンク: iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう

 

 

ウェブクリップアイコン設定有り

Androidではアイコンがうまく表示されない事がありますが、上の項で説明した<link rel=”icon” sizes=”192×192″ href=”画像ファイルのパス”>の記述でいくらか対応出来るようです。

 

 

 

まとめ

 

<head>
 <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
 <link rel="icon" sizes="192x192" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
 <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
</head>

※WordPressでテンプレートフォルダに直接アイコンファイルをアップロードした場合の記述となります。href属性の値や画像ファイル名は適宜書き換えてください。

 

※追記:SVGでロゴを作り直しました

ロゴデザインを一新 擬似要素の画像サイズを変更する方法

 

|

ファビコンとウェブクリップアイコンの設定方法

0件のコメント

コメント

カテゴリ

月別アーカイブ