忍者ブログ

ぶろぐラーナー

ブログのカスタマイズや覚えたことをメモしておくブログです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント

現在、新しいコメントを受け付けない設定になっています。

ファビコン作成の基本

ファビコンとは、Favorite iconの略で、ウェブブラウザのタブの前に表示されるアイコン、またはお気に入りに登録するとショートカットとして表示されるアイコンです。

ファビコンの基本
https://ja.wikipedia.org/wiki/Favicon


ファビコンを作成するには、ico, png, gifの形式がありますが、icoで作成するのが、現在一般的です。(png, gifに対応していないブラウザがある為。)

.ico

一体どのサイズでどの拡張子を使用すればよいの!?

16x16? 32x32? 152x152? ... ICO? PNG? 色々な説があるのでどれを用意すればよいか迷いますよね。
答えは、いくつか用意しないといけないということです。(基本)
または、ブログ・サービスによっては、1つの画像をアップロードするだけで全てに反映してくれるものもあります。

ファビコンは、MicrosoftのIEから始まりました。IEは、ICO形式を使い、その後出てきたiOSのsafariは、PNG形式を使います。Wordpressでは、記述なしで自動でPNG画像をファビコンに読込みができます。
どう表示されるかは Webブラウザ、ディスプレイがRetinaかなどにより変わります。ブログ・サービスによっては、1つの画像からファビコンを反映してくれる機能もあるので、それぞれのブログ・サービスを確認しましょう。

基本的には、icoとpngの画像を用意して
<head></head>の中に

    <link rel="shortcut icon" href="http://アイコンのURL.ico">
    <link rel="apple-touch-icon-precomposed" href="http://アイコンのURL.png">

の記述を書く。

参考になったリンク:
http://algorhythnn.jp/blg/2013/07/22/view-favicon-on-ninja_blg/
PR

コメント

現在、新しいコメントを受け付けない設定になっています。

メモ書き

一般投稿画像:1000px 100KB
Tumblr:540x810 GIF:>540px 3MB
<hr class="hr01" />