WordPress ファビコンをオリジナル画像に変える方法 サイトアイコン

ブログ

オリジナルアイコンでサイトを目立たせる

 

こんにちは。

ブログのテクノロジーの「と」と申します。

サイトを作って自分のサイトをスマホのホーム画面に追加したら自分のアイコンがパッとしません。

なんじゃこりゃ

これでは目立ちませんね

こんなアイコンじゃイヤ!!

 

そこでなんとかしたいとこの記事を見て頂いたはずです。

アイコンをオリジナルのものに変更する手順、とても簡単ですのですぐにやりましょう。

スポンサードリンク

スポンサーリンク

オリジナルアイコンを表示させる方法

ワードプレスダッシュボードの管理メニューカスタマイズと進みます。

外観カスタマイズからでも出来ますね。

黄色く囲ったところです。今は管理メニューを囲っています。

次にサイトの基本情報をクリックします。

サイトアイコンの選択で画像を選び、アップロードして公開をクリックして終了です。

簡単ですね。

これでオリジナルのアイコンが活躍します。

スマホだけでは無くてPCのお気に入りのアイコンも同じものが表示されます。

アイコン画像の作成

画像を用意してあった人は設定すれば終わりですが、画像が無いという人は作りましょう。

サイトアイコンは512×512ピクセル以上の正方形にしてくださいと書いてあります。

僕は700×700で作りました。(このサイズに特に意味はありません)

ファイル形式はPNGファイルでと書いてあるサイトが多いですがGIFファイルでも大丈夫でした。

無理に透過ファイルで作る必要はありませんが、透過ファイルで作成するとスッキリさせられます。

好きなように作ってください。

僕はこんな感じで描いてみました。

最初は透明な背景に白だけで絵を描きましたが背景色が真っ白なこのサイトでは全く表示されないので少し縁取りした画像を載せます。

ホーム画面ではこうなります。

ぼやーっとだけ見えます。いいのか悪いのかで言えばあまり良くないでしょうか。

 

背景を黒くしたものです。

初期のアイコンから、透明に白い線。縁取り、黒い背景と並べてみました。

適当に作ってみましたがまあまあ気に入りました。

最初に比べればずっと良くなってますね。

とても簡単なので今すぐお気に入りのアイコンを作ってみてください。

 

関連記事

Wordpress 【cocoon】 Googleマップをブログに埋め込む方法と電話をタップでかける方法
Googleマップと電話の埋め込みを従来のエディタとグーテンベルグでする方法こんにちは。ブログを書いていると店舗や会社など地図情報を載せたいことや、ブログから直接電話をかける方法など出来れば便利なのに、そのくらいのこと出来...

 

Word press cocoon  簡単! Google プレイストア のリンクを簡単に作る方法
こんにちは。 今回はWord pressで作った記事内にGoogleプレイストアへのリンクを直接貼り付ける方法とGoogleプレイストアのバッジを取得してリンクを張る方法のふたつを書いていきます。 リンクの貼り付け方法は2つとも...

 

Wordpres 簡単!プラグイン不要。TwitterとFacebookとInstagramとYouTube投稿を記事に埋め込む方法
SNSを記事に埋め込む簡単な方法 こんにちは。 ブログのテクノロジーの「と」と申します。 今回はブログの記事内にSNSの投稿の簡単な埋め込み方を紹介します。 TwitterとFacebookとInstagramと...

コメント

タイトルとURLをコピーしました