自分もかなり前ファビコンの変更方法を見つけるまで時間がかかったものです・・・ ですので、少しでもこの記事が役に立てれば良いなと思い投稿させて頂きます
ファビコンとは
スクリーンショット：Wikipedia このよくあるアドレスバーの横のアイコンです これを設定することにより、ブックマークした時に目立ちやすいなどのメリットがあり、サイトを閲覧している時も結構目立ちます 今回はそのアイコンの作成から設定方法までをHTMLとWordpressの二通りで紹介していきたいと思います
ファビコンを作る
ファビコンを作る方法は基本的に二通りあり、サイトでファビコンを直接作るか、正方形の画像をあとでファビコンに変換するかです
サイトでファビコンを直接つくる
URL http://www.xiconeditor.com/ まずドット絵感覚で直接ファビコンを作るには上記のサイトを利用します このサイトですと標準的なエディタ機能に加え、リアルタイムでプレビューが確認できるので、完成図が予想しづらいドット絵でも簡単に作成できます
用意した画像をファビコンに変換する
ソフトを利用して ファイル icon-arrow-right ドキュメントのプロパティ icon-arrow-right カスタムサイズ で正方形になるように 500×500pix などの適当な数字を設定して下さい そして自分の好きなように画像を作り終わったら PNG等 で保存します ファビコンのサイズは16x16、32x32、64x64程度なのですが、大きめに保存しておくと後々サイトのロゴ等にも使うことができるので便利です
次に作り終わったアイコンを
URL http://favicon.qfor.info/c/ のサービスを利用して変換します ファイルを参照してサイズを指定後、アイコン作成を押すだけで生成してくれるので非常に便利です
ファビコンを設置する
ファビコンの設置です、ルート・ディレクトリ、「一般的にはWWWフォルダの階層」にfavicon.icoなどで保存しておけば自動認識してくれるのですが、コード等で認識させることもできるので、今回はそのコードを設置してみましょう
HTML版(手打ちでホームページ)
まず作成したファイルをサーバーにFTPやSSHなどを使ってアップロードします この辺りがよくわからない方は「ご利用のサーバー名＋FTP」などで検索すると、方法が出てくるはずですので、それを御覧ください HTML内の＜head＞と＜/head＞のどこかに以下のコードを入力します
<link rel="shortcut icon" href="ファビコンのアドレス" >ちなみに 144X144pix のpng画像もサーバーにアップしておけば
<link rel="apple-touch-icon" href="ファビコンのアドレス"/>Apple用のアイコンも指定することができるのです ちなみにWindowsモダンUIアイコン用のコードもあります
URL http://ja.wikipedia.org/wiki/Modern_UI 詳しくは説明しませんが上記のサイトで項目を設定していくことで、自動的にコードを生成してくれます 参考 http://alc.netgamebm.com/p/187（他の方のサイトです）
WordPressでファビコンを設定
URL https://wordpress.org/plugins/favicon-rotator/ で簡単にファビコンを設定することができるんですよね プラグイン追加 icon-arrow-right 外観の中にあるFaviconをクリック icon-arrow-right Add Iconに先ほど作成したPC用アイコン、Touch IconはiPhoneなどに表示させるモバイルアイコンを設定できます icon-arrow-right 「設定を保存」をクリック ただこれだけです 簡単だったでしょう笑
最期に
ファビコンを登録しておくと、ブックマークなどをしてもらった時に非常に目立たすことができるので登録をおすすめします アイコンはSNSなど様々なところに使用することができるので、この機会にオリジナルアイコンを作ってみては！