faviconとはホームページのアイコンのことで、faviconを設置するとブックマークやタブなんかにアイコンが表示されるようになります。設置しないとドキュメントのようなアイコンが表示されるだけになります。
ここではfaviconを作成してWordpressへ設置する簡単な方法を紹介します。
favicon.pngを作成する
まず最初に260×260のサイズの画像を作成します。
ペイントでもPhotoshopでもGIMPでも良いです。
ちなみに私はGIMPを使ってfavicon.pngを作成しました。
作成時間10分
このサイトのfaviconは、ものづくりエクスペリメントの“も”にしました。
Favicon Generatorで全種類を自動作成
現在faviconは大小あわせて21種類になっているそうです。
Webサイトに必要なfaviconが21個になっていた
21個も作ってられるか！と言うことで、Favicon Generatorを使って、自動で作成してもらいます。
Favicon Generatorにある“Select your Favicon picture”というボタンをクリックして先ほど作成したfavicon.pngを指定します。
すると数秒でfaviconの作成の設定とプレビュー画面が表示されます。
iOSでの表示
iOSのプレビューだと右側が少し切れてしまっているけど気にしない。実機(iPhone5)で確認してみたけどは切れてなかった。ただ、ホーム画面に追加した場合でfaviconの背景を透明にしている場合、そこが真っ黒になります。対処法は調べてみたけどわかりませんでした。気になる人は背景を透明にしないとうことで・・・。対処法を知っている人がいたら教えてー。
Androidでの表示
設定は特に変える必要はありません。
一番下に“Generate your Favicons and HTML code”というボタンがあるのでそれをクリックします。
クリックすると数秒でfaviconセットがダウンロード可能になります。
1. Download your package: Favicon package
Favicon packageというのがリンクになっているので、それをクリックしてダウンロードします。
favicons.zipというファイルがダウンロードされるので解凍しておきます。
WordPressのheader部分に追加するコードが下記になります。
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/android-chrome-manifest.json"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff">
apple用のfaviconがとてつもなくウザいです。
WordPressへの設置
favicons.zipを解凍した中身をFTP等でアップロードします。
アップロードする場所はWordpressの最初の場所、wp-config.phpやwp-login.phpなんかがある場所です。そこにfavicons.zipを解凍して出てきたファイルを全部アップロードします。
ちなみに私はCyberduckを使ってアップロードしました。
アップロードし終わったら次にWordpressのテーマにfavicon情報を変更します。
外観 → テーマの編集 → ヘッダー (header.php)
<?php wp_head(); ?> <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="/android-chrome-manifest.json"> <meta name="msapplication-TileColor" content="#da532c"> <meta name="msapplication-TileImage" content="/mstile-144x144.png"> <meta name="theme-color" content="#ffffff"> </head>
こんな感じでヘッダーにfavicon情報を設定します。
以上でfaviconの設定が完了です。
自分のホームページを更新してみてください。タブに作ったアイコンが表示されると思います。(WP Super Cacheなどを使っている場合はキャッシュをクリアしましょう)
Favicon Generatorの一番下のところに“Check your favicon”というのがあるので、自分のサイトのアドレスを入力して“Check Favicon”をクリックするとfaviconの設定を確認してくれます。パソコン、Android、iOSでのfaviconのプレビュー画面も表示してくれます。
コメントを残す