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

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

ファビコンとは

スクリーンショット：Wikipedia

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

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

ファビコンを作る

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

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

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

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

https://inkscape.org/ja/

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

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

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

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

ファビコンを設置する

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

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

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

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

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など様々なところに使用することができるので、この機会にオリジナルアイコンを作ってみては！

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

最新情報をお届け！

コメント