ぽちっとファビコン

ファビコン生成ツールです。

生成されたファイルはzipファイルでまとめてダウンロードされます。

ファビコンにしたい画像(png,jpgなど)

使い方

上記のフォームで画像を選択して、「ファビコンを作成」を押すと、zipファイルがダウンロードされます。

ダウンロードしたzipファイルを解凍して設置します。

その後に以下のコードを貼り付けることでfaviconが表示されます。

ただし、hrefの値は環境に応じて変更が必要な場合があります。

<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="shortcut icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="shortcut icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="msapplication-TileImage" sizes="144x144" href="/ms-icon-144x144.png">

生成されるファイル

次のファイルが生成されます。

  • apple-icon-サイズ.png
  • favicon-サイズ.png
  • ms-icon-サイズ.png
  • favicon.ico

favicon.ico

favicon.icoは、複数のサイズの画像を一つにまとめたファイルです。

以前は、ファビコンとしてicoファイルを利用するのが一般的でした。