WordPressサイト・ブログにも使える!フリーソフトのみでアイコン作成する方法まとめ

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ
↓「ブログランキング」と「ブログ村」の2つのランキングに参加しています!クリックで応援していただけると、もの凄く励みになります!↓(∩´∀`)∩ ※右クリック「新しいタブで開く」が非常に便利です♪

 
ブログランキング・にほんブログ村へ

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


 

スポンサーリンク

WordPressサイト・ブログにも使える!フリーソフトのみでアイコン作成する方法まとめ

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

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

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

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

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

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

 

スポンサーリンク

1.フリーデザイン描画ソフト「Inkscape」のダウンロード

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

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

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

 

スポンサーリンク

2.「Inkscape」の使用方法

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

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

 

スポンサーリンク

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

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

「PNGtoICO」ダウンロード

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

pngtoico

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

 

4.WordPressプラグイン「FaviconRotator」のインストールと設定

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

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

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

favicon-rotator設定2

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

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

 

5.サーバーの『ルートに』ファイルを置く

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

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

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

index.phpと同じ階層2

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

 

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

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

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

ie1s

 

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

ie2s

 

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

ie3s

 

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

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

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

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

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

ie4s

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

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

=おしまい=

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!
ブログランキング・にほんブログ村へ
にほんブログ村

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

人気ブログランキングへ

 

こちらの記事もオススメ!(>∀<)ノ☆
Androidスマホで楽天モバイルの申し込みができない時の解決方法
急げ!【300万名限定】楽天モバイルが月額料金プラン『1年間無料』キャンペーン実施中!
【2020年版】メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の送料・サイズ・重量一覧&出品手数料について
『2020年更新版』Windows10も可! Movie Maker「ムービーメーカー」をダウンロードする方法
【2020年版】動画配信サービスを最もコスパ良く&簡単にテレビの大画面で楽しむ方法(おすすめ&比較)
たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
【毎月約4千円節約できる】簡単にデュアルSIM(DSDS)スマホでドコモSIMと格安SIMを両方同時に使う方法
嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。。。
 

スポンサーリンク

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

 

 

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

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

※↓「LINEいいね」ボタンを押して、この記事をタイムラインでシェアして頂けると、非常に喜びます!(∩´∀`)∩↓

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

Line@はこちら!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です