DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • webサイトの目印になる。ファビコンの作り方と使い方を解説します

webサイトの目印になる。ファビコンの作り方と使い方を解説します

design_thing

  • top
  • blog
  • webサイトの目印になる。ファビコンの作り方と使い方を解説します

webサイトの目印になる。ファビコンの作り方と使い方を解説します

2020.06.26.

スポンサーリンク

スポンサーリンク

いまやwebサイトの目印として当たり前になった「ファビコン」。

なじみのない人もいるかと思うので説明しますと、ファビコンとはwebサイトを閲覧しているとき、ブラウザのタブの左側に出ているアイコンのことをいいます。そのwebサイトのシンボル的な役割を担うので、他のサイトと区別しやすくなります。

区別しやすくできるので、一般的にファビコンに使われるアイコンはロゴマークを使用することが多いです。

webサイト制作時にファビコンも作成するのがデフォルト

webデザイナーなら当たり前にしていることでですが、勉強中の方は覚えておいてください。webサイトを制作するときにファビコンを作成し、サイトに反映させるのはひとつの工程として今や当たり前です。忘れないように気をつけてください。

そんなファビコンを作成できるwebサイトはいくつかあるのですが、ボクは「Your generated favicon」というwebサイトにて作成しています。

今回のブログでは、「Your generated favicon」を利用してファビコンを作成し、webサイトに反映させるまでの方法をご紹介いたします。簡単にできるので参考にしてください。

BUROKIアイコン

覚えておくと便利なのでぜひブックマークしておきましょう!

index

目次

1. まずはファビコン用の画像を用意

ファビコンはアイコンなので、まずは表示させるための画像を作成します。前述していますが、ロゴマークを使用することが多いので、今回もボク自身のロゴマークを使用して画像をつくります。

photoshopを開いてサイズ横320px、縦320pxの新規ドキュメントを作成し、ロゴマークを配置します。

まずはpng画像をphotoshopで作成
背景は透明にしておいたほうがいいと思います

上の画像のような感じで配置できたら、背景を透明にして(背景レイヤーを非表示にすればOK)、png画像で保存します。これでファビコンの元となる画像を作成できました。

2. Your generated faviconに画像をアップロード

次にYour generated faviconに移動し、ファビコンをつくっていきます。webサイトにアクセスすると、下の画面が表示されます。

Your generated favicon
シンプルでわかりやすい画面ですね

画面の右側にある「Select your Favicon image」と書かれた青いボタンをクリックします。するとファイルを選ぶダイアログが表示されるので、1の工程で作成したpng画像を選択し、アップロードします。

3. ファビコンの表示のされ方を確認、カスタマイズ

すると自動的に次の画面に遷移し、ファビコンが実際に反映されているタブのサンプルを表示してくれます。すごい優秀。

pngアップロード後の想定画面
こんな感じで表示されますよーと教えてくれます

こうやって見ると自分のwebサイトだということがわかりやすいですよね。しかしファビコンが表示されるサイズは小さいので、なるべく装飾を控えたシンプルで判別しやすいマークが適していると思います。

スマホでの表示はカスタマイズしましょう

タブにファビコンが表示されるのは大体そのままでいいとして、タブでネットを見るのはPCやタブレット端末の場合だけですよね。続いてスマホでのファビコンの表示も下記の画像のように確認できます。

ファビコンのカスタマイズ画面
ボクは背景は白、余白は8〜10pxくらいにすることが多いです

スマホの待ち受け画面にアイコンを表示させたときのサンプルも確認でき、背景の色を何色にするか、余白はどれくらいつけるかなどを設定することができます。実際の表示を確認しながらカスタマイズできるので、かなり便利です。

どのような表示が適しているか、自分で確認しながら調整してカスタマイズしましょう。

カスタマイズが完了したらページ下部まで移動

ひと通り調整が終わってもまだ完了はしていません。
ページ下部までスクロールしてください。すると「Generate your Favicons and HTML code」と書かれた青いボタンがあると思います。このボタンをクリックします。

htmlコードとファビコンファイルを作成
htmlコードとファビコンファイルを作ってもらいます

このボタンを押すことでカスタマイズしたファビコンと反映させるためのhtmlモードを作成してくれます。

4. ファビコンをダウンロード、ページに反映

「Generate your Favicons and HTML code」ボタンを押してしばらくすると、作成完了ページに遷移します。

このページではファビコンファイルとhtmlコードを生成してくれているので、「Favicon package」と書かれた青いボタンをクリックしてファビコンをダウンロードしましょう。

ファビコンファイルをダウンロードする
ボタン押すだけでファビコンがダウンロードできます

ダウンロードしたzipファイルを早速解凍してみます。すると、数種類のファビコンやアイコンファイルが入っていると思います。それぞれにはもちろん用途があるのですが、基本的に下記の画像の赤い枠で囲っている3つのファイルだけでOKです。

ダウンロードして解凍したファビコンファイルフォルダ
けっこういろいろ入ってます

この3つのファイルはそれぞれ、

  • favicon.ico(ファビコンのファイル)
  • android-chrome-256×256.png(アンドロイドやgoogle chromeで表示されるアイコン)
  • apple-touch-icon.png(スマホに表示されるアイコン)

という役割のファイルたちです。この3つのファイルを自分のwebサイトの任意のフォルダへ移動させましょう。

webサイトのヘッダーにコードを追記

いよいよ最後の工程です。
ファビコンが用意できたので、あとはwebサイトに反映させるためにコードを書くだけです。画像のようにheadタグ内にコードを追記します。

htmlコードにファビコンのコードを追加
headタグ内に入れましょう

画像じゃコードわかりにくいと思うので、下記のコードをコピペして、自分の環境に書き換えて使ってください。

<link rel="shortcut icon" href="/●●(任意のパス)/favicon.ico">
<link rel="apple-touch-icon" href="/●●(任意のパス)/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/●●(任意のパス)/android-chrome-256x256.png">

wordpressでwebサイトを制作している場合(ボクもそうですが)、head関係のphpファイルに追記すればいいと思います。その辺は自分の環境で対応してください。

5. アップロード後、反映されているかwebサイトを確認

各種ファビコンのファイルと、コードを追加したhtmlやphpファイルを自分のサーバーにアップロードします。アップロード後、ちゃんと反映されているか、webサイトにアクセスし、確認します。

webサイトに反映されたファビコン
無事にサイトに反映されました!

ファビコンの設定がうまくいった場合は上の画像のように、タブの左側にアイコンが表示されるようになります。

ファビコンを変更する場合

ファビコンを設定したものの、ちょっと表示に納得がいかない・・変更したい!と思うこともあると思います。その場合は同じ手順で変更できるのですが、反映に時間がかかることがあります。変更したけどファビコンが変わらない・・という場合は、2、3日様子を見てみてください。そうすると変更が反映されることがあります。

BUROKIアイコン

ファビコンが表示されるとうれしくなりますよね。
スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

private

ルクア大阪のバルチカにある人気店「赤白」のフレンチおでんが美味すぎる

早いものでもう7月ですね。 2020年も半分終わり・・本来ならもうすぐオリンピック!といった時期ですね。なのにまさか延期になるなんて、去年の時点…

2020.07.04.

design_thing

実体験をもとに教える。インハウスデザイナーからの独立方法

フリーランスになってから、ずっと書きたいテーマだと思っていましたがなかなか内容がまとまらず、ようやくこの記事を公開することができました。 ボ…

2020.06.28.

design_thing

webサイトの目印になる。ファビコンの作り方と使い方を解説します

いまやwebサイトの目印として当たり前になった「ファビコン」。 なじみのない人もいるかと思うので説明しますと、ファビコンとはwebサイトを閲覧して…

2020.06.26.

think

カフェで仕事するなら断然ドトールコーヒーがオススメな理由

ボクが住む大阪も少し前に緊急事態宣言が解除され、営業を自粛していたお店たちが営業を再開しました。これはうれしいことですよね。 営業を再開して…

2020.06.24.

design_thing

誰でも簡単にできる!webサイトにtwitterを表示させる方法

ボクのwebサイトには表示させていないのですが、クライアントさまによっては「運営しているtwitterをwebサイトにも表示させてほしい!」というご要望…

2020.06.18.

private

昨年6月から1年間浸けつづけた自家製梅酒をついに飲んでみました

昨年の6月に思いつきではじめ、定期的に報告してきた自家製梅酒づくりも今回で最終章・・。 2020年6月13日、浸けはじめて丸1年が経過したこのタイミ…

2020.06.16.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル