アドレスバーの横のアイコンの変更方法 -ファビコン-


 2015年5月20日   2016年02月08日   IT   4分(2222文字)   243回    
広告

自分もかなり前ファビコンの変更方法を見つけるまで時間がかかったものです・・・
ですので、少しでもこの記事が役に立てれば良いなと思い投稿させて頂きます

ファビコンとは

SnapCrab_HTML5 - Wikipedia - Internet Explorer_2015-5-19_23-6-33_No-00
スクリーンショット:Wikipedia

このよくあるアドレスバーの横のアイコンです
これを設定することにより、ブックマークした時に目立ちやすいなどのメリットがあり、サイトを閲覧している時も結構目立ちます

今回はそのアイコンの作成から設定方法までをHTMLとWordpressの二通りで紹介していきたいと思います

ファビコンを作る

ファビコンを作る方法は基本的に二通りあり、サイトでファビコンを直接作るか、正方形の画像をあとでファビコンに変換するかです

サイトでファビコンを直接つくる

Screenshot of www.xiconeditor.com

 URL  http://www.xiconeditor.com/
まずドット絵感覚で直接ファビコンを作るには上記のサイトを利用します
このサイトですと標準的なエディタ機能に加え、リアルタイムでプレビューが確認できるので、完成図が予想しづらいドット絵でも簡単に作成できます

用意した画像をファビコンに変換する

https://inkscape.org/ja/

ソフトを利用して
ファイル icon-arrow-right ドキュメントのプロパティ icon-arrow-right カスタムサイズ
で正方形になるように 500×500pix などの適当な数字を設定して下さい
そして自分の好きなように画像を作り終わったら PNG等 で保存します

ファビコンのサイズは16×16、32×32、64×64程度なのですが、大きめに保存しておくと後々サイトのロゴ等にも使うことができるので便利です

次に作り終わったアイコンを

Screenshot of favicon.qfor.info

 URL  http://favicon.qfor.info/c/
のサービスを利用して変換します
ファイルを参照してサイズを指定後、アイコン作成を押すだけで生成してくれるので非常に便利です

ファビコンを設置する

ファビコンの設置です、ルート・ディレクトリ、「一般的にはWWWフォルダの階層」にfavicon.icoなどで保存しておけば自動認識してくれるのですが、コード等で認識させることもできるので、今回はそのコードを設置してみましょう

HTML版(手打ちでホームページ)

まず作成したファイルをサーバーにFTPやSSHなどを使ってアップロードします
この辺りがよくわからない方は「ご利用のサーバー名+FTP」などで検索すると、方法が出てくるはずですので、それを御覧ください
HTML内の<head>と</head>のどこかに以下のコードを入力します

ちなみに 144X144pix のpng画像もサーバーにアップしておけば

Apple用のアイコンも指定することができるのです
ちなみにWindowsモダンUIアイコン用のコードもあります

Screenshot of www.buildmypinnedsite.com

 URL  http://ja.wikipedia.org/wiki/Modern_UI
詳しくは説明しませんが上記のサイトで項目を設定していくことで、自動的にコードを生成してくれます
 参考  http://alc.netgamebm.com/p/187(他の方のサイトです)

WordPressでファビコンを設定

Screenshot of wordpress.org

 URL  https://wordpress.org/plugins/favicon-rotator/
で簡単にファビコンを設定することができるんですよね
プラグイン追加 icon-arrow-right 外観の中にあるFaviconをクリック icon-arrow-right Add Iconに先ほど作成したPC用アイコン、Touch IconはiPhoneなどに表示させるモバイルアイコンを設定できます icon-arrow-right 「設定を保存」をクリック
ただこれだけです
簡単だったでしょう笑

最期に

ファビコンを登録しておくと、ブックマークなどをしてもらった時に非常に目立たすことができるので登録をおすすめします

アイコンはSNSなど様々なところに使用することができるので、この機会にオリジナルアイコンを作ってみては!

広告
 , , , ,

こちらの記事もおすすめです

Feb 29
IT
ブラインドタッチ習得手順
 4分   2222文字   274回
Feb 22
IT
WordPressの引っ越し手順!
 4分   2222文字   397回
May 27
IT
さくらインターネットからXServerに変えるのを諦めた、たった一つの理由!
 4分   2222文字   310回
Feb 24
IT
Chrome厨の自分が使ってる厳選拡張機能
 4分   2222文字   632回

最新情報をお届け!

 Facebookをフォロー
 通知を受け取る
 Twitterをフォロー

コメント