ファビコン作成
ロゴを一度ドロップするだけで、Webサイトに必要なアイコンとページに貼り付けるコードがすべてそろいます。
このデバイス内で封印済み
ブラウザ内で動作します。何もアップロードされません。
封印済み
アイコン画像
ページに貼るコード
ZIP内のファイルをWebサイトのルートに置き、各ページの<head>内にこのコードを貼り付けてください。
使い方
-
ロゴを追加
SVG、PNG、JPGをドロップするか、選択するか、貼り付けます。512 × 512ピクセル以上の正方形の画像なら、最もくっきりしたアイコンになります。
-
見た目を調整
内側の余白、背景色、角の丸みを設定し、ブラウザのタブとスマートフォンのホーム画面で仕上がりを確認します。
-
ダウンロードしてコードを貼り付け
ZIPをダウンロードしてファイルをWebサイトのルートに置き、各ページの<head>内にコードを貼り付けます。
よくある質問
どんなファイルが作成されますか？
16・32・48ピクセルのアイコンを収めたfavicon.ico、16・32・48・192・512ピクセルのPNGアイコン、iPhoneとiPad用の180ピクセルのapple-touch-icon.png、そしてAndroidで192・512ピクセルのアイコンを使えるようにするsite.webmanifestです。1つずつ、またはZIPファイルでまとめてダウンロードできます。
ファイルはどこに置けばよいですか？
Webサイトのルート（トップページと同じ場所）に置き、/favicon.icoのようなアドレスでアクセスできるようにします。次に、プレビューの下に表示されるコードを各ページの<head>内に貼り付けてください。ブラウザは/favicon.icoを自動で探すため、コードのないページでもアイコンが表示されます。
画像はどのくらいのサイズが必要ですか？
最大のアイコンと同じ、512 × 512ピクセル以上の正方形が理想です。SVGならどのサイズでもくっきり描画されるため最適です。小さな画像でも使えますが、大きなアイコンは拡大されてぼやけて見えます。
ブラウザのタブでアイコンがぼやけたり小さすぎたりするのはなぜですか？
16ピクセルでは、細かい部分や細い文字は見えなくなります。文字入りのロゴ全体ではなく、1文字や記号などのシンプルなマークを使い、内側の余白は小さめにしてください。横長の画像なら「正方形に切り抜く」を選びましょう。
画像はアップロードされますか？
いいえ。画像の読み込み、リサイズ、保存は、お使いのデバイス上のブラウザ内で行われます。どこにも送信されません。
Appleタッチアイコンに背景が付くのはなぜですか？
iPhoneとiPadは、ホーム画面のアイコンの角を自動で丸め、透明部分を黒く表示します。そのため、Appleタッチアイコンには常に塗りつぶしの背景と四角い角が付きます。背景色は設定した色、透明を選んだ場合は白になります。