WPサイトにも使える！アイコン作成方法まとめ

いつも「みなラボ」にアクセスいただいてありがとうございます！(´∀｀*)ﾉｼ
↓みなラボのFacebookページに「いいね！」はコチラから↓(＞∀＜)ﾉ☆　

↓みなラボのLine@アカウントの友だち追加はコチラから↓Σ(|||▽||| )　

↓みなラボのtwitterアカウントのフォローはコチラから↓(*^▽^*)　
Follow @share_lab
↓様々なブラウザで使える「Push7」でみなラボを無料購読するにはコチラをクリック↓(*´ч`*)　

↑お好きなアプリでみなラボの更新通知を受け取ってくださいね！↑＜(_ _)＞　
↓「ブログランキング」と「ブログ村」の2つのランキングに参加しています！クリックで応援していただけると、もの凄く励みになります！↓(∩´∀｀)∩　※右クリック「新しいタブで開く」が非常に便利です♪



※↑それぞれのクリックで「みなラボ」へ1票＆「みなラボ」のランキング状況を確認いただけます！　

アイコンを作成してみました！
「Inkscape」というフリーの描画ソフトを使ってデザインした後、.png⇒.ico変換ソフトで拡張子を変換し、アップロードしました！

インターネットエクスプローラでの認識が上手くいかず、表示されたりされなかったりで、.icoファイルをhtmlのメインルート？に置いたら、なんとか表示されるようになりました。

インターネットエクスプローラで上手くいったと思ったら、今まで上手く表示されていたandroidスマホのブラウザを開いた時のアイコンが表示されなくなってしまいました。なかなかうまくいかないもんですね。。。

ブックマークやショートカットにした時のアイコンは問題なかったので、現状で使っております。

追記（2016.109）：現在はスマホでもPCでも問題なく表示されています。あれから何も手は加えてないので、ネット上での認識を安定させる為にも少し時間をおいてみる事が重要かもしれません。

今回のアイコンの作り方をまとめて置いたので、どうぞご覧ください！

 

1.ロゴチックで簡単なアイコンの作成方法（WordPressサイト編）

 

1-1.デザイン描画ソフトのダウンロード

デザインを描く為に、無料ソフトをダウンロードします。
ベクトル形式のデザインが描ける「Inkscape」を使います。

アドビーのイラストレーターより機能は少し劣るんでしょうけど、同じような機能を持っているソフトだったと思います。
あまり使いこんでないので、知識は中途半端です。。。

窓の杜でダウンロードしました！
「Inkscape」ダウンロード

 

1-2.「Inkscape」の使用方法

普通にインストールして、ソフトを起動してみましょう！
こんな画面がでてくると思います。
動画で簡単なデザイン方法をまとめましたので、下のサムネイル画像をクリックしてみて下さい。

フィルターを上手く使うと、もっと凝ったデザインができると思いますので、色々と試してアイコンのデザインを作成してみると面白いのではないかと思います。

 

1-3..icoファイルへの変換ソフトのダウンロード

-[IconSet]-ページより、「PNGtoICO」というソフトをダウンロードします。

「PNGtoICO」ダウンロード

操作方法は非常にシンプルです。
インストール不要で、.zipファイルを展開するとPNGtoICO.exeがあるので、実行。

このようなウインドウが開くので、.icoファイルに変換したい.pngファイルをドラッグ＆ドロップするだけです。保存先を指定すれば、そこに.icoファイルに変換されて出力されます。

 

1-4.プラグインのインストールと設定

 
WordPressプラグインの「FaviconRotator」をインストールします。

※icon=Faviconと考えて良いと思います。

ダッシュボード＞外観＞Faviconとクリックすると、メディアを設定する画面になるので、
ブラウザ用（上側）とモバイル用（下側）に.icoや.png等の画像ファイルをドラッグ＆ドロップすると設定できる。

ここまでの方法で、WordPressにてFaviconを設定できるはずなんですが、自分の場合、インターネットエクスプローラではなぜか上手く表示されませんでした。

上手くいなかった場合は下の項目も実行してみて下さい。

 

1-5.ルートにファイルを置く

先ほどのデザインしたファビコンファイルを.icoファイルに変換したものをhtml.phpと同じ階層に置いておくと、インターネットエクスプローラでも認識してくれるようなので、そこに置いてみましょう！

この時、ファイル名を「favicon.ico」に変更して、置いておくようにして下さい。

FTPソフトで、サーバーにアクセスし、ドメイン/public_html内に「html.php」があると思いますので、そこに「favicon.ico」をアップロードしてみて下さい。

以上の内容でも上手くいかない場合は、インターネットエクスプローラのキャッシュが影響している場合もあるので、下の項目も実行してみて下さい。

 

1-6.キャッシュを削除して、再度読み込む

まず初めに、対象サイトをブックマークに登録している場合は、ブックマークを削除する。

そして、インターネットエクスプローラの右上歯車マークをクリック。

 

プルダウンメニューが開くので、「インターネットオプション」をクリック。

 

全般＞閲覧の履歴にある「削除」ボタンをクリック。

 

「お気に入りWebサイトデータを保持する」チェックを外す。

「インターネット一時ファイルおよびWebサイトのファイル」チェックを入れる。

「クッキーとWebサイトデータ」チェックを入れる。

「履歴」チェックを入れる。

その他項目は、任意で設定する。

チェックボックスの設定をした後、「削除」ボタンをクリックすれば、インターネットエクスプローラのキャッシュをクリアできます。

この状態で、再度対象サイトを表示させ、ブックマーク登録すれば、最新の状態に更新できます。

＝おしまい＝

 
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！

にほんブログ村

 
↓こちらもお願いしますっ！

人気ブログランキングへ

 

 

こちらの記事もよく読まれています。↓（※広告含む）

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです！どうぞ、よろしくお願いいたします！m(_ _)m

Feedly、RSS、Push7はこちら！！

Line@はこちら！！