当サイトはWordPressテーマNULLで作られています。

ファビコン生成ツール

文字や絵文字、手持ちの画像から、サイトのファビコン(ブラウザーのタブに表示される小さなアイコン)を作るツールです。

favicon.ico、iPhoneのホーム画面用(apple-touch-icon)、Android用のアイコンをまとめて作り、ZIPでダウンロードできます。<head>に貼るタグも一緒に作ります。

ファビコンを作る

1. もとになるものを選ぶ


文字
1〜2文字がおすすめです。絵文字(🍀など)も使えます
文字の書体
文字の色
画像
正方形に近い、シンプルな画像が向いています(画像はサーバーに送信されません)
画像の収め方
大きさ
70%
背景
形

2. 見え方を確認する

サイトの名前
サイトの名前

3. ダウンロードする

4. タグを<head>に貼り付ける

ダウンロードしたファイルをサイトのトップ(例:https://example.com/favicon.ico)に置き、下のタグを<head>の中に貼り付けてください。

作られるファイル

ファイル サイズ 使われる場所
favicon.ico 16・32・48px パソコンのブラウザーのタブ、ブックマーク
apple-touch-icon.png 180px iPhone・iPadのホーム画面に追加した時
icon-192.png / icon-512.png 192px・512px Androidのホーム画面、Googleの検索結果など
site.webmanifest – Androidで使うアイコンの指定

apple-touch-iconは、iPhoneが自動で角を丸くするため、透明や丸の設定にしていても四角で塗りつぶして作ります。

WordPressで設定する場合

WordPressでは、管理画面の「外観」→「カスタマイズ」→「サイト基本情報」の「サイトアイコン」にicon-512.pngを登録するだけで、必要なサイズのアイコンとタグが自動で出力されます。この場合、タグの貼り付けは不要です。

ファビコンを変えても表示が変わらない時は、ブラウザーに古いアイコンが残っています。ブラウザーのキャッシュを消すか、しばらく時間をおいて確認してください。

あわせて使いたいツール

このツールは役に立ちましたか?

これからの開発の参考にしたいので、いいねボタンで教えてください。

関連記事

コメント

この記事へのコメントはありません。