DESIGN IT YOURSELF.

BUROKI


top

blog

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

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

design_thing

  • top
  • blog
  • design_thing
  • 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

意外と簡単?chocoZAPのセルフ脱毛サービスを利用開始しました

2023年の1月から初心者向けスマートライフジム「chocoZAP(チョコザップ)」に通い始めたことは以前このブログに書きましたが・・。 デスクワークで…

2025.06.15.

private

家二郎を極めたい。家庭用二郎系ラーメン「鬼を超えろ」を美味しく作る方法

月に1度くらいのペースで食べたくなってしまう二郎系ラーメン。3月に行ったときに書いた「歴史を刻め 日本橋店」のブログは検索上位にランクインし、…

2025.06.10.

private

これから行く人へ。大阪・関西万博の体験談と注意点をまとめました

前回のブログで「大阪・関西万博」の各国パビリオンの写真館ブログを書きました。 建築デザインがいい感じ!大阪・関西万博の各国パビリオンの外観写…

2025.06.04.

private

建築デザインがいい感じ!大阪・関西万博の各国パビリオンの外観写真館

5月28日の水曜日。 平日ではありますが、いま大阪で一番アツいイベント「大阪・関西万博」へ行ってきました。 朝9時に夢洲駅に到着し、夜の20時くら…

2025.05.31.

think

SEO小話vol.08 ドメインにも歴史あり?取得する際の注意点

昨年の4月より不定期に更新している「SEO小話」シリーズ。 各テーマに分けてできるだけ手短に、僕の過去のSEO施策体験からきている内容を書くことを…

2025.05.27.

think

5月13日、BUROKI design開業6周年と個人的なお知らせ

2025年5月13日(火)。 本日、BUROKI designは無事に開業6周年を迎えることができました。 ついに税務署にて個人事業の開業届と青色申告承認申請書を…

2025.05.13.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル