ファビコン

ファビコン

マルチアイコン（.ico）ファイルで用意する。

.icoという拡張子が付いたファイルに、必要なサイズのアイコンが数種まとめて入っている。
Photoshopなどの画像ソフトではマルチアイコンとして保存できないので、専用のアプリやサイトを利用して保存する。

【主流】.svgファイルで用意する。

縮小拡大しても画質が劣化しない.svgファイルが用意できれば、正方形であればサイズは気にしなくて良い。
Illustrator、GIMPなどでicon.svgで保存できるので、変換のためのファビコン作成のアプリやサイトは不要となる。

マルチアイコンの作り方

  1. アイコンとする画像を用意する…

    16x16px
    ブラウザのタブに表示されるサイズ ➡
    32x32px
    ブラウザのブックマークなどのサイズ ➡
    48x48px
    IEで使っていたので今はなくていい ➡
    180x180px
    iPhoneのホーム画面用のサイズ ➡
    ※svgが用意できず PNG形式の場合は、256×256px
    256x256px
    androidのホーム画面用のサイズ ➡
    • 全サイズある必要はない。（正方形であれば適当なサイズに縮小拡大表示される。でも拡大させるのは荒れるのでダメ）
      当サイトのファビコンは32px、16pxをfavicon.ico として、
      他にスマホ用として256pxのpngファイルを設定している。
    • icoにする前の画像の形式は、利用するアプリの対応を確認する。角丸などにするなら背景透過できるpngが良い。
    • アイコンとして極小表示されるので、入り組んだデザインは避ける。
    • サイトイメージになるので同じ色・デザインで統一するのが良い。

  2. マルチアイコンとして保存する

    • ファビコン専用のアプリやサイトを利用して保存する。
      【ファビコン 作成ツール】とかで検索するとたくさん出てくるので、自分が使いやすそうな所を選ぶと良い。
      わたしが使わせていただいているサイトはココ ➡ 【ファビコン favicon.ico 作成 リアルタイム 9サイズ版】 です。
    • 通常はファイル名 favicon.ico にして保存する。
      HTMLの方できちんと指定するなら、ファビコンはicoにせずpngのままでも大丈夫。

  3. HTMLの<head>内でファビコンを指定する

    4. サイトのトップ階層にfavicon.icoというファイル名で設置（https://foo.com/favicon.ico）すれば、 HTMLで指定しなくてもブラウザはファビコンとして認識してくれる。

    favicon.ico
    
<link rel="icon" href="Path/to/favicon.ico">
<link rel="icon" href="Path/to/favicon.ico" sizes="32x32">
    icon.svg
    
<link rel="icon" href="Path/to/icon.svg" sizes="any" type="image/svg+xml">
    apple-touch-icon.png 
    
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
    icon.png
    
<link rel="icon" href="Path/to/icon.png" type="image/png" sizes="32x32">

iPhoneのホーム画面にリンクを保存するとこうなります。↓


TOP