【blogger】ショートカットアイコンをオリジナル画像に変更する方法

2018/7/19 ume

スマホのホーム画面や新規タブを開いた時に、表示されるショートカットアイコン。

これをオリジナルアイコンに変えたいな～と思っていて、やってみたら割と簡単にできました。

※いつアイコンを変更したのか、分かるようにするための備忘録的な記事です。

参考にしたサイト↓

ファビコンとiPhone用アイコンの作り方｜ Tips Note by TAM
先日、ファビコンとiPhone用アイコンを設定する機会があったのですが、忘れていたことが多かったので、今更ですがまとめてみました。　（B）ファビコンを設置したいサイトの「.htaccess」に設定。 AddType image/xicon .ico ＜Files favicon.ico＞ ErrorDocument 404 【ファビコンまでのパス】/【ファビコンのファイル名】.ico ＜/Files＞　【参考】・もう何も恐くない...綺麗なfavicon作成の基本的なコツ・アイデアまとめ | 株式会社LIG http://liginc.co.jp/web/design/material/16853 ・WordPress のよくあるカスタマイズコード functions.php 多め | Webデザインレシピ http://webdesignrecipes.com/wordpress-customize-with-functions-php/#p7 【画像サイズ】　129×129 ～ 150×150 正方形を推奨。PNG形式。（実際には、適当なサイズで作っても自動的に縮小（または拡大）・トリミングされるそうです。）【アイコンのサイズ】 iPhone や iPadなど、デバイスによってアイコンの表示サイズは若干異なりますが、自動的にリサイズされてアイコン化されます。・Retinaディスプレイ　iPhone・iPod touch： 114×114、　iPad： 144×144 ・旧モデル（Retinaディスプレイではない）　iPhone・iPod touch： 57×57、　iPad： 72×72 【注意事項】・ロゴなどを中央に配置したい場合は、若干上寄りに設置するとバランスが良く見える。　（参考）Apple.com で設置されているアイコン（129×129） http://www.apple.com/apple-touch-icon.png ・角丸、つやつやした効果、ボタンの影は自動的に追加されるため　白っぽい画像だと目立たなくなってしまう。・透明部分は黒く塗りつぶされるため、設定しない。【設置方法】（A）ルートに設置する。 ※HTMLなどに特に記述する必要はありません。（自動的に読み込んでくれます。）（B）任意の場所へアップする。画像をアップロード後、ウェブページの＜head＞～＜/head＞内へ以下の1行を追加。【参考】・研究室／iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方 - iをありがとう http://arigato-ipod.com/lab-webclip-apple-touch-icon.html ※Android用アイコンの設定については、こちらをご参照ください。・Androidは「apple-touch-icon」でいろいろハマるので要注意 | Tips Note https://www.tam-tam.co.jp/tipsnote/mobile/post1232.html

①真四角の画像をPNG形式で準備する

てへぺろnaoうさぎ

ブログ内の「吹き出し」でちょくちょく顔を出す「naoうさぎ」。今回は「てへぺろ」をチョイス。

これらの画像はすべて、私がExcelのオートシェイプ機能を駆使して作成しました^^

ブログの吹き出し用とは別に、ファビコン用に用意した画像なので、背景が透明です。

②画像をサーバーにアップロードする

FC2

bloggerなら、新規ページに画像を貼り付け、HTML画面でURLを取得します。

FC2ブログのファイルアップロードサービスも便利です。

Googleフォトは、一定時間ごとにURLが変わるのでNG。

③＜head＞～＜/head＞内に追加

HTML

＜head＞の直後に置いたら、サイドバーのデザインが崩れた（上に白い隙間ができた）ため、＜/head＞の直前に書き込みました。

作業は以上で終了です。

自分のiPhoneで確認してみます。

iPhoneホーム画面

iPhone新規タブ画面

Androidスマホを使っているnaoに試してもらったところ、Androidのホーム画面でも表示されました↓

左：アイコン設定なし
右：アイコン設定後

おわりに

ただの「B」より、うさぎの方が可愛いと思う（笑）
完全に自己満足ですが、コレでいいのだ！

「ニャー！！」

ポチっとよろしく♪

2018/07/19