Hatena Blog Tags
はてなブログ トップ
favicon
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

favicon

(ウェブ)
【ふぁびこん】

FAVorite ICONの略で、ウェブブラウザのブックマーク(お気に入り)リストやウィンドウアイコン・タブなどに現れることのある、ウェブサイト独自のアイコン。
独自のico形式の画像ファイルを用意して、ページのあるディレクトリかその上位のディレクトリに「favicon.ico」というファイル名で置くか、あるいはページのhead要素内に

<link rel="shortcut icon" href="icoファイルのアドレス">

と書くことによって指定することができる。
もともとはInternet Explorerの独自拡張として実装されたが、FirefoxやSafari、Operaなど他のブラウザも追従したので、事実上ウェブにおける標準のような扱いになっている。

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
好きなことを書かせて•6ヶ月前

favicon.icoをSVGで設定する

みなさんのサイトでは、faviconを設定されていますか。 favorite icon、ファビコンで通じるようです。 ここ、はてなブログでは、ペン先のファビコンが用いられています。 設定しておけば、ブックマークに表示されます。 favorite icon ＝ お気に入りアイコンですから当然ですね。 サイトのオリジナル性も増し、ブランドイメージにも寄与するでしょう。 設定方法 通常は、拡張子をicoにして専用に画像を作成する手間が必要です。 その方法でも簡単に作成できますが、SVGでも可能です。 SVGですので小さくてもかなり鮮明に表示されます。 <link rel="icon" type="i…

#favicon

ネットで話題

もっと見る
1376ブックマークWebサイトに必要なfaviconが21個になっていた - IT探検の追憶itexp.hateblo.jp
946ブックマークfavicon.ico（ファビコン）の作り方 | IDEA*IDEAwww.ideaxidea.com
810ブックマークFavicon.jp - ファビコンがなければ始まらない！8年くらい前にファビコンを作る時にお世話になった「Favicon Japan!!」を久々に見ようとした所、 悲しい事に閉鎖されてしまったらしく、アクセスが出来なくなっていました。 時代の流れなのか、昔はホームページを作ろうとしたらまずFaviconにこだわるのが当たり前と言ったイメージでしたが、 モバイルサイトやタブレッ...www.favicon.jp
773ブックマークPhotoshop で背景透過の美しい favicon を作成する - 2xup2006-04-28T23:23:04+09:00 favicon (ファビコン)はウェブブラウザのアドレスバーや、ブックマークした URL の横に表示される小さなアイコンです。いまやもうサイトのアイデンティティを明示するツールとしてほとんどサイトでみることができますが、小さいファイルであると共に、ファイルを扱えるソフトェアがそれほど多...2xup.org
595ブックマークとってもお手軽なFavicon作成ツール『Favikon』 | 100SHIKI.COMwww.100shiki.com
517ブックマークFavIcon from Pics -- how to create a favicon.ico for your website"The brand and visual elements of your website matter. Studies showed that more than 40% say a website design is the number one factor for discerning the credibility of a company." - Jerry, Founder of Web Hosting Secret Revealed (WHSR).favicon.htmlkit.com
499ブックマークFaviconをつくるときに参考にしたいデザイン＆ツールいろいろ | P O P * P O Pwww.popxpop.com
494ブックマークfavicon.ico GeneratorHow does it work ?Choose a color Click on the squares and paint your logo Download when you are finished Put the favicon.ico file into your webserver directory Optionally publish it under the CC (Creative Commons) licensewww.favicon.cc
462ブックマークForgot the Milk. - Faviconをサクサク作ってくれる８つの Faviconジェネレータ サイトFavicon は、サイトオーナー（ブログオーナー）の自己満足だけではありません。そのサイトやブログの個性を表現することもさることながら、ユーザから「それなりに手をかけているサイトだな」と興味や安心を抱かせる効果もあるように思えます。 そんな Favicon ですか、あなたはどのように作成していますか？ここで紹介...hmiyaza1.hatenadiary.org

関連ブログ

トライト技術ブログ•1年前

Real Favicon Generatorを使ってファビコンを設定した時にハマったこと

ファビコンって 守備範囲広くて面倒ですよね。 もはや当たり前ですが、ずーっと前はfavicon.icoを準備するだけでよかったのが、スマホの「ホーム画面に追加」に対応とか、Winの「ピン留め」に対応とかいろいろとしなきゃならないことが多いです。 なので大きい画像を準備するだけでサクッとマルチデバイス対応してくれるReal Favicon Generatorを使って生成・設定しました。 指南してくれるサイトに沿って記述してアップ。 順調にことは運び、あれよあれよとレビューも終わってステージング環境に反映され、便利ツールを作ってくださった方に一礼してタスク完了。 全然面倒じゃない。本当に助かります…

#favicon#Next.js#webmanifest#CORS#chrome#Android
かもメモ•2年前

favicon をダークモード対応したい

webサイトやwebサービスでタブとかに表示される favicon 。favicon もダークモード対応ができるらしいのでやってみたのメモ favicon を SVG にする 昔から .ico みたいなファイル作ってたけど、最近では SVG もサポートされているらしい。SVG は内部にスタイルシートを持てるのでダークモード用のメディアクエリを埋め込んでしまえばダークモード対応された favicon になるみたい。簡単だ… HTML の <head> 内の favicon の指定を SVG にする <link rel="icon" type="image/svg+xml" href="/favi…

#favicon#Dark mode
IT初学者部•2年前

iOSで「ホーム画面に追加」を選択時のfavicon.ico表示設定について

はじめに 今回は、WEBサイト等でのfavicon.ico設定についての追記内容です。 というか、どっちかというとWEBアプリケーションを作成する際に、iphoneのホーム画面へ追加する際に表示されるアイコンを設定する方法です。 まあ結果として一緒なんですが、とりあえずやっていきましょう。Vue.jsアプリケーションの例です。 結論からすると index.htmlのどっかしらに <link rel="apple-touch-icon" href="favicon.ico" /> これを記載してください。どっかしらって書いてますが、通常のWEBブラウザのfaviconを設定している箇所があると思…

#favicon#favicon.ico#プログラミング#webサイト#Vue.js#フロントエンド
Cocoだけの話。•2年前

FC2ホームページにファビコンをつける。

半年ほど前に、ホームページを作ってみようという気になった。 あまり詳しくはないし、デザインも内容も稚拙だけれど、自己満足の範疇で遊んでいる。 その趣味のホームページに、ファビコンをつけたくなった。 👇🏻 この、地球マークのやつを変えたくなった。 なんとかできたので、次回変更の時のために、手順を記しておこうと思う。 ① ファビコンにするイメージを決める。 ② favicon.ico を作る。 ③ FC2のファイルマネージャーに保存する。 ① ファビコンにするイメージを決める。 私はフリー素材を使った。 「ファビコン フリー素材」「ファビコン 作り方」などど検索をすると、いくつものサイトが見つかる…

#ファビコン#favicon#ホームページ#ウェブサイト
素肌にサスペンダー•3年前

【Nuxt.js】Nuxt.jsでfaviconの設定が更新されない時の対応

favicon.icoをオリジナルのものにしたくて、/staticフォルダのfavicon.icoを差し替えたけど、ブラウザのタブを見るとNuxtデフォルトのアイコンのままだった。 キャッシュかと思い、nuxt.config.jsのfavicon.icoの箇所にパラメータ?v=1.0.0を追加した。 head: { ... link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico?v=1.0.0' }, ], ... それでもNuxtデフォルトのままだった。 Chromeのデベロッパーツールでソースを見ると、以下の３つが反…

#Nuxt.js#favicon
ミモモスティの身も心もハンドメイド•3年前

ブログが書けない…そんな日には「新しいブログアイコン」を作ろう！

何の予定も約束もない週末の午後…。 そんな日はただひたすら無為に過ごす、ミモモスティの未桃みもです。こんにちは！！ ブログに何を書いたらいいのか分からなくなる日もある 昨日は張り切ってブログの記事をふたつも書いたのに。 その反動でしょうか。 今日はこれといった話題が思いつきません。 先日購入した「はてなブログ Perfect GuideBook」をぼんやりと眺めながら 「もしも新しいブログを作ったら…」 という妄想を膨らませてみたり。（あくまでも考える「だけ」です。実行には移していません） はてなブログ Perfect GuideBook [改訂第2版] [ JOE AOTO ] ▲ 前半はひ…

#ハンドメイド#はてなブログ Perfect GuideBook#ブログアイコン#ファビコン#favicon#バーミヤン
虚仮コツ考•5日前

Reddit の r/rust でスコア100以上の投稿一覧（ 2023-01-01 から 2023-02-18 まで）

Reddit の r/rust でスコア100以上をとった投稿を調べています。

ST_FUNC開発日記•22日前

ウェブアプリのデプロイ

さて、テストアプリケーションができたので、実際にサーバーに設置して動くかどうか試してみる。 $ npm start で実行すると、ローカルのhttpサーバーが立ち上がり、http://localhost:3000/でアプリにアクセスされる。 これはテスト用のものなので、ビルドするには $ npm run build で、まとめられたファイルが作成されるはずである。 buildフォルダの中に、ファイルが作成された。 ここで、build/index.htmlをローカルで開いてみたが、ページが真っ白で何も表示されない。 また、ロリポップのサーバー上に置いてみてもやはり真っ白で何も表示されない。 やっ…

'static + Life•24日前

ブログ名を変えました

旧ブログ名: 備忘録 新ブログ名: 'static + Life それに伴ってブログの favicon も変更しました、生まれて初めて変えたかもしれない。 ちなみに、新ブログ名の元ネタは Rust の trait bounds に lifetime bounds も追加したものです *1。 *1:https://doc.rust-lang.org/reference/trait-bounds.html