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

ブログ一覧

think

2023年5月の活動報告。5月はこんなデザイン制作をしていました

5月になりましたね。 サムネイル画像は僕が前からずっと行きたかった十三にある人気ラーメン店「桐麺 本店」の桐玉です。麺と卵と出汁のみのシンプル…

2023.06.04.

private

ブロキの日本ダービー予想2023。今年の1着はあの馬で間違いなし!?

5月28日の日曜日は、我々にとって一大イベントが開催されますね。 その一大イベントとは・・そう、正解です。 「日本ダービー」ですね。 コロナ禍も…

2023.05.27.

think

本日5月13日、BUROKI design開業4周年を迎えることができました

2023年5月13日。 本日でBUROKI designは開業4周年を迎えることができました。 2019年の4月末に会社を退職して今の新居に引っ越し、4年前の今日、税務…

2023.05.13.

think

2023年4月の活動報告。4月はこんなデザイン制作をしていました

ゴールデンウィークはいかがでしたか? 僕はぼちぼち仕事しながらのんびりしていました。 しかし、ゴールデンウィーク中の4月末に人生の大きな決断を…

2023.05.11.

private

【天皇賞・春】リニューアルオープンした京都競馬場へ行ってきました

2020年秋より改修工事に入っていた京都競馬場が、約3年の時を経て4月22日にリニューアルオープンしましたね。 コロナも落ち着いて入場制限も緩和され…

2023.05.04.

private

大阪天満宮にある「鉄板焼 GUMP」で二度目の結婚記念日を祝う

4月22日は相方との結婚記念日。 今年で二度目の結婚記念日を無事迎えることができました。皆さまのおかげです。ありがとうございます。 昨年のこの日…

2023.04.29.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル