JA

ファビコン作成：画像・文字・絵文字から

文字、絵文字、ロゴ画像を選び、色と形を決めたら、ZIPでまとめてダウンロードできます。favicon.ico、すべてのサイズのPNG、site.webmanifest、そのまま貼り付けられるHTMLが入っています。ファイルはすべてブラウザー内で作成されます。

ファイルはブラウザー内だけで処理され、アップロードされません。お使いの端末の外に出ることはありません。

ファビコンの元
16×16pxで読めるのは1〜2文字までです。漢字やひらがななら1文字がおすすめです。
名前と保存場所（マニフェスト）
「/」＝サイトのルートフォルダー（おすすめ）。

プレビューとファイル

    <head>に入れるHTML
    site.webmanifest
    結果
    計算方法
    

    ファビコンは、ブラウザーのタブ、ブックマーク、履歴、Googleの検索結果でサイト名の横に表示される小さなアイコンです。このツールは、画像、1〜3文字のテキスト、絵文字から、いまのWebサイトに必要なファイル一式と、それを読み込むHTMLを作成します。
    

    ファビコンのサイズと必要なファイル
    

    
  
    ファイルサイズ用途
    
  
    
    favicon.ico16・32・48px従来のファビコン。HTMLタグがなくてもブラウザーは/favicon.icoを読みに行きます
    
    
    favicon-16x16.png、favicon-32x32.png16px・32pxブラウザーのタブ（標準と高解像度）
    
    
    apple-touch-icon.png180pxiPhone／iPadのホーム画面に追加したときのアイコン
    
    
    android-chrome-192x192.png、-512x512.png192px・512pxWebアプリマニフェスト：Android／Chromeのホーム画面とスプラッシュ画面
    
    
    site.webmanifest–インストールできるWebアプリとしてのサイト名、色、アイコン
    
      

    

    検索結果のファビコンについて、Googleは正方形で8×8ピクセル以上の画像を必須とし、48×48ピクセルより大きいサイズを推奨しています。Chromeはマニフェストに192ピクセルと512ピクセルのアイコンを求め、AppleはiPhoneのホーム画面用に180×180ピクセルを挙げています。
    

    ファビコンの設置方法
    

      
  
    1. ZIPをダウンロードして展開します。
      2. 
  
    2. すべてのファイルをサイトのルートフォルダー（トップページがある場所）にアップロードします。
      3. 
  
    3. HTMLを各ページの<head>に貼り付けます（WordPressやWixなどでは、代わりに「サイトアイコン」の設定があるのが一般的です）。
      4. 

    

    ファイルをサブフォルダーに置く場合は「サーバー上のフォルダー」に入力すると、マニフェストとHTMLが自動で書き換わります。ブラウザーはファビコンを長くキャッシュするため、新しいアイコンはキャッシュを削除するか、シークレットウィンドウで開くまで表示されないことがよくあります。
    

    見やすいファビコンのコツ
    


    絵文字をファビコンにするときはライセンスに注意
    

    絵文字は端末にインストールされた絵文字フォントで描画されるため、iPhoneとWindows、Androidでは見た目が異なります。Unicode規格が定めるのはどの文字かだけで、デザインではありません。デザインの権利はフォントの提供元（Apple、Microsoft、Googleなど）にあり、そのライセンスではWebサイトのロゴやファビコンとしての利用は当然には認められていません。
    

    個人のページならリスクは小さいものの、商用サイトではオープンライセンスの絵文字を使い、その条件を守ってください。
    


    使いたい絵文字をそこからPNGまたはSVGでダウンロードし、ここで「画像・ロゴ」を選んでください。これは一般的な情報で、法的助言ではありません。
    

    プライバシー
    

    ファイルはすべてブラウザー内で作成されます。画像はアップロードされず、どこにも保存されません。
    

    例：青い円に白い文字「M」。ZIPにはfavicon.ico、各サイズのPNG、site.webmanifest、<head>用のHTMLコードが入ります。
    よくある質問
    ファビコンのサイズはいくつがおすすめですか？
    ブラウザーのタブ用に16×16と32×32ピクセル、Google用に48×48以上の正方形、Apple端末用に180×180、AndroidとWebアプリ用に192×192と512×512です。このツールならすべてのサイズを一度に作れます。
    favicon.icoの作り方は？
    文字、絵文字、画像のどれかを選んで色と形を決め、「すべてZIPでダウンロード」を押すだけです。favicon.icoには16・32・48ピクセルがPNG形式で入っています。ペイントなどで手作業で変換する必要はありません。
    favicon.icoはいまも必要ですか？
    用意しておく価値はあります。多くのブラウザー、フィードリーダー、ツールはHTMLタグがなくても/favicon.icoを直接読みに行きます。
    ファビコンをサイトに設置するには？
    ファイルをサイトのルートフォルダーにアップロードし、HTMLを<head>に貼り付けます。WordPressなら「外観 → カスタマイズ → サイト基本情報 → サイトアイコン」に512pxのPNGを設定する方法もあります。
    絵文字をファビコンに使ってもいいですか？
    Apple、Microsoft、Googleの絵文字デザインはそれぞれの会社のものです。商用サイトでは、Twemoji（CC BY 4.0、クレジット表記が必要）やNoto Emoji（OFL 1.1）のようなオープンライセンスの画像を使い、ここでアップロードしてください。
    新しいファビコンが表示されないのはなぜですか？
    ブラウザーはファビコンを長くキャッシュします。シークレットウィンドウで開くか、キャッシュを削除してください。Googleの検索結果に反映されるまでには数日から数週間かかることがあります。
    ロゴ画像はアップロードされますか？
    いいえ。ファイルはすべてブラウザー内で作成され、画像が端末の外に出ることはありません。
    出典・根拠
    更新日：
    関連ツール