ウェブサイトには「ファビコン」と「アップルタッチアイコン」を設定しておこう!

シェアボタンを押して情報を共有しましょう。

mobile-phone-1087845_1920

どうも、こんにちは。橋尾渡(@hashio_wataru)です。

あなたはウェブサイトに、ファビコンとアップルタッチアイコンを設定していますか?

アイコンはウェブサイトのシンボルマークとなって、ブランディングをするには欠かせない要素の一つになります。

アイコンを設定することによって、一目でそのサイトが誰のものなのかわかり、相手にその印象を残します。

ツイッターで例えるとわかりやすいですが、プロフィールのアイコンで誰が何をツイートしているのか、一瞬でわかりますよね。

恐らく、そういう感じです(笑)

とにかく、まだファビコンとアップルタッチアイコンを設定していない方は、これを機にウェブサイトへアイコンの設定をしてみましょう!

スポンサーリンク
レクタングル(大)広告

ファビコンとは?

そもそも、ファビコンとアップルタッチアイコンを知らない方もいると思うので、まずはそちらの説明からしていきましょうか。

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

スクリーンショット_090218_084913_PM

wikipedia

ファビコンは、サイトURLの左側に表示されていたり、ページタブに表示されるアイコンのことです。

Wikipediaの引用を見てもらえればわかるように、その設定したアイコンが「ウェブサイトのシンボルマーク・イメージ」となるんですね。

スクリーンショット_090318_125447_AM

Firefoxのブラウザでページタブを確認してみると、「W」というアイコンが左側に表示されています。

スクリーンショット_090318_020728_AM

さらに、デスクトップ画面にショートカットを設置してみると、四角いアイコンの中心にシンボルマークが表示されていますね。

これが、ファビコンというものになります。

アップルタッチアイコンとは?

それでは次に、アップルタッチアイコンについて説明していきましょう。

アップルタッチアイコンもファビコンと同様に、ウェブサイトのシンボルマークになってくれます。

Screenshot_20180902-171948_090318_090656_AM

僕の場合、IPhoneじゃないのでちょっと違いますが、ブックマークに入れたウェブサイトがブラウザのトップページに表示された時のアイコンです。

Screenshot_20180903-091143_090318_091334_AM

または、ホーム画面に追加した時に見えるアイコンのことです。

これが、アップルタッチアイコンというものなんですね。

アイコンを設定する方法

さて、ファビコンとアップルタッチアイコンについておわかりいただけたと思いますので、次はあなたのウェブサイト(ブログなど)にアイコンの設定をしていきましょう!

今回僕が設定するウェブサイトは、ワードプレスというCMSを使った説明のものになりますので、それ以外の方は以下の検索リンクで自分のサイトに適した設定方法を探してみてください。

検索 Google検索 「ファビコン 設定」

アイコンを用意しておく

ウェブサイトにアイコンを設定するのはいいのですが、まだアイコンをお持ちでないという方もいらっしゃるかと思います。

自分でアイコンを作ることができるなら問題ありませんが、僕のように絵心がない人間だと自作では逆にイメージダウンする恐れがあります(笑)

なので、そういった人たちのためにオススメしたいファビコン専門のサイトをご紹介しましょう。

著作権フリーのファビコン専門サイト「Free Favicons」です。

スクリーンショット_090318_113658_AM

このサイトへアクセスしてもらうと、ご覧の通り様々なアイコンが用意されています。

WS000287_090318_121010_PM

上のメニューから「Free Favicons」へマウスオーバーさせると、アイコンのカテゴリを選択することができます。

気に入ったアイコンを見つけたら、「Download this favicon」のリンクをクリックして画像を保存してください。

ファビコンを保存することができたら、ファイルを解凍しておきましょう。

一般的なテーマにアイコンを設定する方法

それではアイコンの用意ができたと思いますので、一般的なワードプレスのテーマにアイコンを設定する方法を書いていきましょう。

WS000286_090318_105558_AM

まずワードプレスのダッシュボードを開いたら、左メニューの「外観」から「カスタマイズ」を選択してください。

スクリーンショット_090318_110127_AM

カスタマイズページへ移動したら、「サイト基本情報」を選択しましょう。

スクリーンショット_090318_110232_AM

サイト基本情報の中に「サイトアイコン」を設定する項目があると思うので、そちらにある「画像を選択」をクリックしてください。

スクリーンショット_090318_010647_PM

画像選択ウィンドウが開いたら、「ファイルをアップロード」するタブへ移動させ、「ファイルを選択」をクリックしてから先程ダウンロードした画像をアップロードしましょう。

※画像をアップロードする際は、推奨サイズが「512×512」となっておりますので、そちらのサイズを選びましょう。

スクリーンショット_090318_013954_PM

アイコンをアップロードし終えたら、一度ウェブサイトのほうへ確認しに行きます。

スクリーンショット_090318_014130_PM

すると、小さくてわかりづらいですが、ページタブの左側にファビコンが表示されるようになりました。

super-fish-114-232028

ちなみに、ファビコンに設定したアイコンはこちらの「魚」です(笑)

アイコンの背景が透明なので、カスタマイズ画面では目が潰れていますが、タブを切り替えたら表示されるので安心してください。

Simplicityのテーマでアイコンを設定する

お次は、僕がよく利用している「Simplicity」というテーマで、ファビコンとアップルタッチアイコンを設定していきたいと思います。

スクリーンショット_090318_064552_PM

では先程と同様に、ワードプレスのカスタマイズ画面を開いてください。

左側のメニューから「その他」を選択しましょう。

スクリーンショット_090318_073957_PM

その他を選択したら下にスクロールして、「ファビコン」と「アップルタッチアイコン」を探してください。

そして、それらの項目を見つけたら、チェックボックスにチェックを入れます。

チェックを入れたら、「画像を選択」をクリックしてファビコンとアップルタッチアイコンの設定をしていきます。

アップロードする画像の推奨サイズなんですが、ファビコンは「32px × 32px」にして、アップルタッチアイコンは「152px × 152px」にしておきましょう。

終わりに

以上で、ファビコンとアップルタッチアイコンについて説明する記事は終わりになります。

アップルタッチアイコンに関してなんですが、推奨サイズが「192px x 192px」と断言しているサイトもあります。

ですが、アイコンをお持ちでない方は「Free Favicons」でダウンロードされたので、最大サイズが「152px × 152px」しかありません。

厳密にいえば「512px」のサイズもありますが、流石にそれでは大き過ぎるので、やはり「152px」で大丈夫だと思われます。

もしも、「192px」で設定したいという方がいましたら、Googleなどでアイコンの作り方などを調べてみましょう。

それではそろそろ、ウェブサイトには「ファビコン」と「アップルタッチアイコン」を設定しておこう!についての記事を終わりたいと思います。ありがとうございました!

オススメ記事!  エックスサーバーをおすすめする10の理由・高速・多機能・安定の業界トップサーバー

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告
この記事をお届けした
わたろぐの最新ニュース情報を、
いいねしてチェックしよう!

シェアボタンを押して情報を共有しましょう。

フォローする

関連記事