ロゴと少しの詳細を追加すると、すべてのアイコン、共有画像、headのタグが、1つの.zipで得られます。favicon.ico、PNGとAppleのアイコン、Webマニフェスト、1200 x 630の共有画像、貼り付け用のheadのタグが得られます。画像がこの端末の外に出ることはありません。無料です。
アイコンとタグの作り方、手順ごとに
- 「ロゴまたは画像」を選ぶか、ページにドロップします。512 px以上の正方形のロゴが最適です。
- 「共有画像のスタイル」を選びます：色の上にロゴ、または写真全体。
- 「サイト名」「ページのタイトル」「説明」「ページのアドレス」「Xのアカウント名」を入力します。
- 「背景色」と、スマートフォンのブラウザバーに色を付ける「テーマカラー」を選びます。
- 共有カードとアイコンのプレビューを確認します。
- 「.zipをダウンロード」と「HTMLをコピー」を押します。
- ファイルを、ファイルのフォルダにアップロードして、タグをページのheadに貼り付けます。
パックの内容
favicon.icoは、すべてのブラウザ向けに、16、32、48ピクセルのアイコンを保持します。favicon-16.pngとfavicon-32.pngは、最新のブラウザが使う、鮮明なバージョンです。apple-touch-icon.pngは、iPhoneとiPadのホーム画面用で、Androidのアイコンとsite.webmanifestは、サイトがインストールされるときに使われます。og-image.pngは、リンクが共有されたときに表示される画像で、head.htmlには、貼り付けるだけのすべてのタグが入っています。
よい共有画像にする
チャットアプリやSNSは、画像を約1200 × 630で表示し、小さなカードのためにクロップまたは縮小するため、タイトルは短く、ロゴははっきりさせてください。「ロゴ」スタイルは、タイトルの隣の背景色の上に、ロゴを置きます。「写真」スタイルは、カードを画像で埋め、タイトルを、やわらかい影の上に重ねるため、横長の写真に最適です。共有画像には完全なhttps://のアドレスが必要なため、ページのアドレスを入力してください。
動作の確認
ファイルをアップロードしたら、ページを開いてソースを表示して、タグを確認してください。多くのサイトは、共有カードをキャッシュするため、古い画像が表示され続ける場合は、og-image.png?v=2のように、画像のアドレスにバージョンを追加するか、プラットフォームのリンクプレビューツールに、ページをもう一度取得するよう依頼してください。
ヒント
- 16ピクセルでも鮮明なままの、シンプルなロゴを使ってください。
- ブランドに合う背景色を選んでください。
- クリックしたくなるような短い説明を書いてください。
- そのあとで、公開前スキャンでページを確認してください。
ロボットや記事の詳細など、より充実したタグには、メタタグ作成を、アイコンだけなら、ファビコン作成をご覧ください。
こんな方に
個人サイト、ポートフォリオ、ショップ、小さな会社のページを公開する方と、すべてのアイコンと共有ファイルを一度に作りたい開発者。
よくある質問
ファイルはどこに置けばよいですか？
.zipの中身をすべて、サイトのファイルフォルダにアップロードし、タグをページのheadに貼り付けます。
すべてのアイコンが必要ですか？
フルセットを使うと、ブラウザ、スマートフォンのホーム画面、サイトをインストールしたときのいずれでも、アイコンが正しく表示されます。
ロゴはアップロードされますか？
いいえ。すべてブラウザ上で作成されます。