*

WordPressで簡単設定ファビコン(favicon)の作り方

公開日: : 最終更新日:2018/01/02 WordPress

ネットをみていると開いたサイトのタブには名前の頭にアイコンがありますね。
これは自分でも作れるのだろうか?と調べてみました。


スポンサーリンク


サイトのシンボルマーク・ファビコン


favicon(ファビコン)というんですね

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。

とあります。

いろいろなファビコン
簡単に言えばサイトのシンボルマークのようなものですね。(^^)

 

有名なところでは

おなじみファビコン
上のようなものがあります。

自分のブログのファビコンも作りたいと思い立ち、作り方をいろいろ調べてみましたが・・・

画像を用意する。
16ピクセル×16ピクセルと32ピクセル×32ピクセル。

拡張子はpngでweb上で簡単にiconに変換できるサイトがあるので、そこで画像を変換。

そして、それをサーバーのルートディレクトリにアップロードして・・

それからソースに書き加える方法やプラグインを使う方法と・・。

丁寧な説明のサイトがたくさんありました。

早速画像を用意してiconに変換してサーバーのルートディレクトリにアップして・・・・

(TT;できません。
表示されたのはStinger3のファビコン。

なんで??

ここでまた躓いてやり直し。

一つでは不安というか、もっとほかのやり方があるかも・・・と

いくつものサイトを参考に、これはという方法で実践した結果です。

ここであきらめるわけにはいきません!

 
でも、うまくいかなかったことが幸いしました(^o^)ころんでもただ起きないという(^^;

もっともっとも~~っと簡単な方法をみつけました(笑)

なんとWordPressの最近のバージョンでは、いとも簡単にファビコンができるのです

現在使っているバージョンはWordPress4.6.1

WordPress の 4.3 からは、ファビコン(favicon)が簡単に設定できる仕様になっていたんですね。

WordPress では「サイトアイコン」という名称で設定するところがあり、ブラウザのタブやブックマークで読み込まれるファビコンと、スマホで読み込まれる Web Clip アイコンを同時に生成してくれます(^o^)いやぁ、嬉しい限りです。

早速小さくした画像を作り直し。
超簡単な方法でファビコンを作ってみました。

 

スポンサーリンク

 

WordPress4.3からのサイトアイコン設定方法


画像は今まで用意したのが16ピクセル×16ピクセルと32ピクセル×32ピクセルのicon形式。

それを基本として、マルチアイコンが簡単に作れるサイトで、様々なサイズのiconができています。
こんな感じです。↓

マルチファビコン
でも必要なのは、幅 512 ピクセル × 高さ 512 ピクセル以上のpng形式の画像が1枚あればOK。

なんということでしょう・・・

でも、今まで苦労して作った小さいアイコンも無駄にはなりません。

Internet Explorer10以下のブラウザは.iconでないと認識してくれないようなのです。

WordPressのバージョンアップで、サイトアイコン設定が標準機能となったのですが、残念ながら IE10 以下のブラウザはだめなんですね。

IE 利用者の約 20 %は まだ10 以下のバージョンを使っているようです。
そこらへんもカバーしようと思ったら、少し面倒でも、icon形式にして、ルートにiconファイルを置くことも考えた方がいいかもしれません。(今は気力的にやりませんが^^;その気になった時に利用できます)

はなしがそれましたが設定方法を順を追って書いてみますね。

画像の用意


512ピクセル×512ピクセル以上のpng形式の画像を用意します

これが推奨サイズになっています。

形式についてはとくに指示がないのですが、iOS で読み込まれるアイコンが同時生成されるため PNG 形式で作成したほうがよいとのこと。
JPEG 形式でアップするとすべて .jpg になってしまい、一部の端末ではうまく読み込まれないようです。

 
スポンサーリンク

 

ファビコン用画像の設定


WordPressのダッシュボードで、左サイドのメニュー「外観」から行います。

「外観」の「カスタマイズ」をクリックします。カスタマイズ画面が表示されます。

外観⇒カスタマイズ
 

その中の「サイト基本情報」をクリックします。

サイト基本情報
 

画面がサイト基本情報に切り替、一番下に「サイトアイコン」欄があります。

「画像を選択」をクリックします。

サイトアイコン
 

用意した512×512の画像をアップロードします。

ここにも推奨画像サイズが表示されていますね。

アップロード
 

アップロードした画像を選択します。そのまま「選択」ボタンを押します。

画像の選択
 

カスタマイズのサイト基本情報画面に戻ります。

サイトアイコンにアップした画像が表示されていればOKです。

「保存して公開」ボタンを押します。これで完了です(^^)v

サイトアイコン完成
 

ブラウザのタブやお気に入りに登録して確認してみます。

こんな感じですね

ブラウザで確認
 

IEの場合
IEの場合

 

chromeの場合
Chromeの場合

 

こんなに簡単にできるとは嬉しい限り!!いろいろ躓いてよかったです(^^;

このファビコンはテーマを変更しても情報が保存されるので、再設定の必要はいりません。

 

さて、うまくいったのに味をしめて、他のブログ用のも作ってみました。

ブログごとのファビコン
 

WordPressに設置されるので、ブログごとに違うファビコンの設定ができるんですね。

自分のマークとして同じものを使いたい場合は、他にもWordPressのブログがあれば同じものを設定すれば大丈夫です。

ブログごとにファビコンを作るのもなかなか楽しいものです(^o^)

 

作ってみたのはこんな感じですが、実は、ここに至るまで紆余曲折ありまして ε=(´ο`*)ハアー

次はついでといってはなんですが、

吹き出し記事作成の時、他のWordPressにファビコンを設定した時、

など躓いたあれこれを書き留めておきたいと思います。

 

同じように躓くかもしれないあなたのお役に立てればと思います<(_ _)>

その前にもう一つ、ショートコードの表示について書き留めておきます

 

記事に吹き出しを入れて会話風にへ

ショートコードをそのまま表示するにはへ


WordPress一覧へ

 


にほんブログ村


日々の出来事 ブログランキングへ

スポンサーリンク




関連記事

DuplicatorでWP丸ごと引越 GMOからXserver2

前回は、Duplicatorでダウンロードした「Installer」「Archive」をXserve

記事を読む

画像キャプチャと編集ができるフリーソフトMonosnapの使い方

前の記事でMonosnapをインストールして、起動するまでをかきました。 WindowsでもMac

記事を読む

「Shortcodes Ultimate」プラグインで簡単画像つき一覧ページを作る

前回の記事で手動?で固定ページに特定カテゴリーの一覧を作りました 記事数が増えてくると、1つ1つ追

記事を読む

WordPressでショートコードをそのまま表示させるには

Speech Bubbleの設定をして記事に吹き出しがいれられるようになったので、そのことを備忘録的

記事を読む

Table of Contents PlusでWordPress記事に目次自動生成

最初に作ったWordPressのブログのテーマは権威でした。権威では、記事の初めに目次が自動表示され

記事を読む

PCにあるキャプチャツールSnipping Toolの便利な使い方

画像をキャプチャするツールは以前「Monosnap」というのを紹介して、私も便利に使っています。

記事を読む

指定場所にジャンプ!簡単タグでページ内リンク

Shortcodes Ultimateの説明の記事で一覧の項目から、説明に飛ぶページ内リンクを作りま

記事を読む

こんなことがしたい!Shortcodes Ultimateで簡単記事装飾

「Shortcodes Ultimate」をインストールすると、ショートコードで簡単に記事の装飾がで

記事を読む

1枚の画像で複数リンク!WordPressでイメージマップを作ってみた

イメージマップとは ホームページビルダーを使っていた時に1枚の画像に複数のリンク先を指定できる

記事を読む

WordPressのイメージマップにSmartArtを使う時の手順

前回ExcelのSmartArtを使って写真入り画像を作りました。 今回は続きになります。

記事を読む

スポンサーリンク




Message

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


花見弁当
お花見とは?なぜ桜なの?意味や由来 花見の風習いつから?日本だけの文化?

春になるとお花見シーズン到来とばかりに、お花見の名所には人が集い、桜の

後片付け
バーベキュー初心者 現地でやることは?炭おこしや焼き方&後片付け

前回の続きです。 バーベキュー初心者 はじめての場合に必要な準備

バーベキュー初心者 はじめての場合に必要な準備とやることやいるもの

暖かくなるとバーベキューなんてやってみたくなりますよね(^^)

駄菓子から元祖梅ジャムが消えた 昭和の味駄菓子の歴史と駄菓子屋の今

この前ニュースというか、テレビで梅ジャムが消えたという話題をやっていた

エプロンとは?いつから?つける意味や必要は?メリットを考えてみた

普段エプロンてつけていますか?つける派つけない派ありますが、もとい、エ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくてアフィリエイトにチャレンジ中

    好きなものは
    アニメ・漫画・ゲーム・お絵描き・映画を観ること・パソコンで遊ぶこと・チョコレート・中島みゆきさんの歌・・

    やりたいことは・・
    空を飛びたい・馬に乗って自由に走り回りたい・猫を飼いたい・・

    いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。
    日々どうしたらできるか考えながらリアル仕事に追われています。

PAGE TOP ↑