Questions tagged [favicon]

An icon associated with particular website. It is often displayed in a web browser in address field (usually left to the URL), on tab bar, or in bookmarks.

A favicon is an icon associated with a particular website. It is often displayed in a web browser in the address field (usually left of the URL), on a tab bar, or in bookmarks.

Originally, favicons had a size of 16x16 pixels, though now they can be larger. How large the favicon is depends on the user agent. Favicons were introduced by Internet Explorer 5, which was using those small graphics for ed websites. Bookmarked websites were called favorites in IE5, which led to the name "favicon".

Favicons were originaly produced in format, but now they can use other types of image files (ie. or ). The benefit of using ".ico" files is that these can hold images in multiple sizes (usually 16x16, 32x32 and 48x48 pixels) for different contexts such as in the browser or on the desktop.

Favicons help give a website identity. They are often a scaled-down version of a website logo.

1781 questions
184
votes
3 answers

Favicon Standard - 2023 - svg, ico, png and dimensions?

What favicon dimensions, file formats and meta/link tags should be used as of 2022? This includes apple icon, windows, android and other devices people use today. I use Opera and I can see it supports svg format. Is it the best solution to use svg…
Jakub Muda
  • 6,008
  • 10
  • 37
  • 56
179
votes
2 answers

HTML 5 Favicon - Support?

I was reading the Favicon page on Wikipedia. They mention the HTML 5 spec for Favicon: The current HTML5 specification recommends specifying size icons in multiple sizes using the attributes rel="icon" sizes="space-separated list of icon…
L84
  • 45,514
  • 58
  • 177
  • 257
172
votes
6 answers

Necessary to add link tag for favicon.ico?

Are there any modern browsers that won't detect the favicon.ico automatically? Is there any reason to add the link tag for favicon.ico? My guess is that it's only necessary to include it in the HTML…
user1087110
  • 3,633
  • 11
  • 34
  • 43
164
votes
15 answers

How to set custom favicon in Express?

I recently started working in Node.js and in the app.js file there is this line: app.use(express.favicon()); Now, how do I set up my own custom favicon.ico?
Ilya Karnaukhov
  • 3,838
  • 7
  • 31
  • 53
151
votes
4 answers

Favicon not showing up in Google Chrome

I have a favicon icon which isn't showing up in Chrome (I'm not sure about other browsers as I only use Chrome) but the strange thing is if I type the path to the icon in the URL bar it shows up! Why doesn't the icon appear?
Chris
  • 2,106
  • 4
  • 16
  • 17
146
votes
6 answers

How do I put my website's logo to be the icon image in browser tabs?

The image next to the page title in the browser tab - how can you link an image here?
jay
  • 12,066
  • 16
  • 64
  • 103
142
votes
6 answers

Use Font Awesome Icon As Favicon

Is it possible to use a Font Awesome icon as a favicon icon? You know, the little icon that appears along-side a website title in the browser tab?
Connor Black
  • 6,921
  • 12
  • 39
  • 70
133
votes
4 answers

What is the best practice for creating a favicon on a web site?

Question What is the best practice for creating a favicon on a web site? and is an .ico file with both 16x16 and 32x32 images better than a .png file with 16x16 only? Could the right method preferred today not be working in reasonably old…
bytecode77
  • 14,163
  • 30
  • 110
  • 141
121
votes
9 answers

How to have favicon / icon set when bookmarklet dragged to toolbar?

I've made myself a bookmarklet, and it functions just fine, but when added to a toolbar in Opera or Firefox, it just takes on the default bookmark icon for the browser (a globe and a star, respectively). My site has a favicon, and the window, tab…
Pistos
  • 23,070
  • 14
  • 64
  • 77
121
votes
7 answers

How to set favicon.ico properly on vue.js webpack project?

I have created a vue webpack project using vue-cli. vue init webpack myproject And then ran the project under dev mode: npm run dev I got this error: Failed to load resource: the server responded with a status of 404 (Not Found)…
Alfred Huang
  • 17,654
  • 32
  • 118
  • 189
121
votes
17 answers

Add Favicon with React and Webpack

I am attempting to add a favicon to a React-based website that I made using webpack. It has been a total nightmare to add a favicon and I have tried many solutions to no avail. The latest solution that has been recommended to me is called…
CodeYogi
  • 1,369
  • 3
  • 12
  • 14
117
votes
5 answers

Favicons - Best practices

Updated question: What is considered best practise when creating favicons in 2022? This is the original question asked back in 2013: I'm trying to get my head around all these different sizes and formats that are needed for Favicons, Touch icons…
Leon
  • 1,478
  • 3
  • 16
  • 20
105
votes
16 answers

How to add a favicon to a Next.js static site?

I'm trying to add a favicon to a Next.js static site without much luck. I've tried customising the document with components from 'next/document' https://nextjs.org/docs/#custom-document A straight link to the favicon.ico file doesn't work because…
Advait Junnarkar
  • 3,283
  • 4
  • 13
  • 25
102
votes
2 answers

Add Favicon to Website

Possible Duplicate: HTML Title Image Can someone please tell me how to make icons appear on browser tabs in PHP? I want my icon to appear on the tabs when my site is being accessed.
osg
  • 1,117
  • 2
  • 7
  • 6
100
votes
10 answers

Creating a favicon

How can I create and use a favicon for my website?
user187554