Favicon変換ツール

そもそもFaviconとは？

Favicon（favorite iconの略）は、ブラウザのタブやブックマーク、その他のUI要素に表示される小さなアイコンです。複数のタブやブックマークの中から、あなたのWebサイトを素早く識別できるようにします。

Faviconの使い方

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">HTML

ベストプラクティス

• シンプルに: Faviconは非常に小さいため、複雑なデザインは判別しづらくなります。
• ブランド一貫性: ロゴやブランドを象徴する要素を使いましょう。
• 背景色への配慮: 明るい・暗いテーマのどちらでもアイコンが見やすいようにしましょう。
• 多形式対応: .icoだけでなく、.pngや.svgも用意し、最新ブラウザに対応しましょう（本ツールはすべて生成します）。

各形式の説明