Web制作実務役立ち

ファビコン(favicon)の作成方法【サイズとPNG,svgの違いについても解説】

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】
本ページにはプロモーションが含まれています。

Webサイトにファビコン、ちゃんと設置していますか?

サイトを立ち上げる際に、ファビコンは必ず設定しておくべきですが、ファビコンは有耶無耶にされやすい存在です。

しかも、ファビコンの作成と設置方法が絶妙にめんどくさいのですよね。

静的HTMLサイトとWordPressでは方法も異なってきます。

そこで今回は「ファビコンの楽な作成と設置方法」について解説していきます。

特にWeb制作を仕事にしている人なら知っていて当然の知識になるので、是非最後まで読んで実践できるところまでいきましょう。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

ファビコンとはそもそも何なのか

ファビコン(favicon)とは、「Favorite icon(お気に入りのアイコン)」が派生したIT用語で、internetExplore5から追加された機能です。

Googleなどのブラウザを開いた際にブラウザのタブに表示されます。

そのほかにも、スマートフォンでWebページを使用ブラウザの「お気に入り」「ホーム画面」

ここにも設定したときには表示されます。

ブラウザを開いたときにタブに表示されるファビコン(favicon)は以下の画像です。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

ファビコンはブランドを表す貴重な指標ですが、未設定だととても味気ないものになります。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】
しょーご

個人的にファビコン未設定のサイトから物は買いたくないですね、SSLとかセキュリティ関連も手が抜かれてそうなので…

ってイメージを持たれる可能性も

Faviconのサイズ

ファビコンで頭が痛くなるのは、「多様なサイズを用意する必要があること」です。

その数20種類以上となりますが、現代で見ておきたいのはせいぜい下記4つです。

16px × 16pxEdge、Chrome、Firefox、Safariなどブラウザのタブ
32px × 32pxブックマークのアイコン
48px × 48pxWindowsホーム画面のサイトアイコン(検索一覧にも必要)
180px × 180pxiOS、Androidなどのスマホのホーム画面アイコン
まさひろくん

う〜ん、でもこの4つすら準備がめんどくさい…

しょーご

大丈夫!!この後超ズボラ式ファビコン設定をご紹介しますし、WordPressなら秒で終わります。

WordPressでのファビコン作成と設置方位

WordPressの場合はとても簡単です。

まずデフォルトでは以下のような感じになっていますが、これを変更します。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

管理画面から「外観→カスタマイズ」を選択。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

その後、「サイト基本情報」を選択。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

サイトアイコンを選択」をクリック。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

その後、ファビコンにしたい「512×512ピクセルのPNG」をドラッグ・アンド・ドロップ。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

PNG形式のアイコンは自分で作るか、素材サイトから持ってきます。

アイコン素材ダウンロードサイト「icooon-mono」

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

その後、PNGをドラッグ・アンド・ドロップして適応させます。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

すると、ファビコンが変わりました。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】
しょーご

WordPressの場合は簡単ですね!!

WordPress以外のファビコン実装の基本方針(おすすめ)

さて、WordPress以外の静的サイトの場合ですが、超ズボラに最低限だけ揃える方法を紹介します。

それがこちら。

ファビコン設定で必要なもの

48×48pxのPNG「1つ」のみ!!

メリット

  1. あらゆるブラウザに対応
  2. Googleの検索結果にも表示される(48の倍数のため)

48pxのPNGファイルだけでいいので、非常に楽です。

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

icon.pngという形で保存して、HTMLのheadに以下の記述を行えば良いです。

<link rel="icon" href="/icon.png"> <!-- 48x48px -->

ただ、この方法にもデメリットがあります。

48pxPNGの欠点
  1. ダークモードに対応できない
  2. iOSホーム画面でぼやける

まずダークモードに対応できないので、黒いファビコンだと背景と同化します。

これを防ぐにはSVGにするしかありませんが、結構未対応のサイトが多い印象ですね…

ファビコン(favicon)の作成方法【サイズとicoとsvgとgeneratorについても解説】

あと、ホーム画面というのは、スマホのアプリ一覧の画面ですね。

そこにWebサイトのファビコンも配置できるんですが、若干ぼやけます。

しょーご

まあ、ホーム画面にお気に入りのWebサイト登録する人がどれぐらいいるのかという感じがしますが…

ダークモード対応やホーム画面アイコンにこだわりたい人向け

もしこのあたりの問題を解决したいなら、以下の実装がおすすめです。

必要なもの
  1. Safari以外のブラウザ向けにSVGを1点
  2. SVGが使えないSafariのために .ico を1点(32x32px)
  3. iOSのホーム画面用にPNGを1点(180x180px)

メリット

  1. ダークモードに対応
  2. あらゆるブラウザに対応
  3. iPhoneホーム画面に対応
  4. SVGはGoogleの検索結果にも表示される

上記のファイル群(SVG,ico,PNG)をまず用意してください。

SVGからICOへは様々なサイトでコンバートできます。

SVGからICOへのコンバーター

SVGとICO,PNGをプロジェクトのディレクトリ内に入れますが、icoは必ずトップディレクトリにファイルを置いてください。じゃないとSVGのフォールバックとして機能しません。

その後、headに以下のコードを追加します。

<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- 180x180px -->

headにico設定は書きません。svgより優先されることがあるようなので。

ダークモードに対応させる場合は、SVG内にCSSを書くことでダークモードに対応できます。

SVGをテキストエディタで開いて、<style>でダークモード用のCSSを書きます。

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <style>
    path {
      fill: #212121; <!-- ライトモードの色 -->
    }
    @media (prefers-color-scheme: dark) {
      path {
        fill: white; <!-- ダークモードの色 -->
        opacity: 0.5; <!-- 他にも色々かける -->
      }
    }
  </style>
SVGの欠点

対応が手間

しょーご

ちなみにブラウザのライトモードとダークモードどちらでもファビコンに違和感なければ、対応の必要はないです。

どこまで対応するかは考える必要あり

正直ファビコンにあまり時間をかけたくはないですよね。

なので、今回紹介した48×48pxのPNG「1つ」のみ!!は結構おすすめの方法になります。

ファビコンで重要な場面は「ブラウザのタブ」「検索一覧」にきちんとファビコンが出現すること。

それさえ満たせれば最低限の機能は果たせているので、十分かなと思っています。

参考記事:ずぼらな私の2023年のファビコン事情(SVGでダークモード対応)

https://zenn.dev/bissy/articles/27c5c09a83b27dce11ff

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!