https://c5bt.net/weblog/hobby/pc/favicon.htmlアドレスバーの横のアイコンの変更方法 -ファビコン-
広告
自分もかなり前ファビコンの変更方法を見つけるまで時間がかかったものです・・・
ですので、少しでもこの記事が役に立てれば良いなと思い投稿させて頂きます
ファビコンとは

スクリーンショット: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など様々なところに使用することができるので、この機会にオリジナルアイコンを作ってみては!
広告
こちらの記事もおすすめです
自分流SNSの使い分け
4分 2222文字
125回
さくらインターネットからXServerに変えるのを諦めた、たった一つの理由!
4分 2222文字
404回
サブドメインの設定がうまくできなかったらCloudFlareを見直すべき!
4分 2222文字
467回
撮った写真を自動で切り取ってくれるアプリが便利
4分 2222文字
197回
最新情報をお届け!
コメント