This is a really basic question, but I&#39;m trying to change the favicon of my node.js/Express app with

    app.use(express.favicon(__dirname + &#39;/public/images/favicon.ico&#39;));

and I&#39;m still getting the default favicon. This is in my `app.configure` function, and yes, I&#39;ve verified that there **is**  a `favicon.ico` in the `/public/images/favicon.ico`.There&#39;s nothing about a `favicon.ico` in the console, either, which leads me to believe that this line of code is being ignored. Everything else in the function (setting port, setting views directory, setting template engine. etc.) seems to be working fine, so why would this line of code not be executing?

**What I tried**

 - Emptying browser cache
 - Restarting Terminal and running `node app.js` again
 - Adding `{ maxAge: 2592000000 }`, as described [here](https://groups.google.com/forum/?fromgroups#!topic/express-js/W5mkAorVrW8)

Thanks in advance.

**Update:** I got it to work. See my answer below for more information.

Unable to Change Favicon with Express.js

How do I set a little icon next to the website title on tabs in the web browser?

HTML set image on browser tab

I want to have an image on the title in an HTML page (i.e on the tab along with the title). How can I do that?


HTML Title Image

I am trying to develop on Google App Engine and in the list of the errors displayed in the admin console I always see the following:

&gt; /favicon.ico

i read the documentation , added a new folder called static and added this in my app.yaml:
    
    - url: /favicon.ico
           static_files: static/favicon.ico
           upload: static/favicon.ico

but even now I&#39;m getting the same error...

favicon.ico &quot;not found error&quot; in App Engine

I want to set the favicon for a fairly large number of pages. But, instead of using the HTML `&lt;head&gt;` tag `&lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot;&gt;`, I&#39;d like to set it in the CSS file. I have limited access to some of the html files, and limited control to their life cycle.

using favicon with css

How do I add image in title bar?

I have title- &quot;Webnet&quot; 

Merging it with a FontAwesome Glyphicon&#39;s icon images as-

    &lt;title&gt;&lt;i class=&quot;icon-user icon-black&quot;&gt;&lt;/i&gt;Webnet&lt;/title&gt;

And I tried it replacing with image source-

    &lt;title&gt;&lt;img src=&quot;assests/img/user-Hermosillo.png&quot; &gt;&lt;/img&gt;Webnet&lt;/title&gt;

But title shows innerHTML instead of showing image there.

Any help?


Add image in title bar

In a HTML5 document, which favicon format do you recommend and why? I want it to be supported by IE7 and all the modern browsers.

Also, when using .png, do I need to specify the type (type=&quot;image/png&quot;)?
    &lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; href=&quot;image.png&quot; /&gt;

Favicon: .ico or .png / correct tags?

What is the final/best recommendation for how to serve favicon.ico in ASP.NET MVC?

I am currently doing the following:

* Adding an entry to the **very beginning** of my RegisterRoutes method:

        routes.IgnoreRoute(&quot;favicon.ico&quot;);

* Placing favicon.ico in the root of my application (which is also going to be the root of my domain).

I have two questions:

* Is there no way to put the favicon.ico somewhere other than the root of my application. It&#39;s pretty icky being right there at the same level as `Content` and `Controllers`.
* Is this `IgnoreRoute(&quot;favicon.ico&quot;)` statement sufficient - or should I also do the following as discussed in [a blog post from Phil Haack][1]. I&#39;m not aware of ever having seen a request to favicon.ico in any directory other than the root - which would make this unnecessary (but it&#39;s good to know how to do it).


        routes.IgnoreRoute(&quot;{*favicon}&quot;, new {favicon=@&quot;(.*/)?favicon.ico(/.*)?&quot;});

 


  [1]: http://haacked.com/archive/2008/07/14/make-routing-ignore-requests-for-a-file-extension.aspx

Serving favicon.ico in ASP.NET MVC

I didn&#39;t include the following line of code in my head tag, however my favicon still appears in my browser:

    &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;

What&#39;s the purpose of including it?

Do you have to include &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;?

I just want to drop the `favicon.ico` in my `staticfiles` directory and then have it show up in my app.

How can I accomplish this?

I have placed the `favicon.ico` file in my `staticfiles` directory, but it doesn&#39;t show up and I see this in my log:

    127.0.0.1 - - [21/Feb/2014 10:10:53] &quot;GET /favicon.ico HTTP/1.1&quot; 404 -

If I go to `http://localhost:8000/static/favicon.ico`, I can see the favicon.

How can I get a favicon to show up in my django app?

According to the **Internet Assigned Numbers Authority** (IANA), all .ico file falls under the MIME type `image/vnd.microsoft.icon`. ([Source][1])

E.g.
`&lt;link rel=&quot;icon&quot; type=&quot;image/vnd.microsoft.icon&quot; href=&quot;favicon.ico&quot; /&gt;`

However, savvy internet guru, **Paul Irish**, claims this is wrong, and that it would actually be `image/x-icon`. ([Source][2])

E.g.
`&lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /&gt;`

I know you can get away with not including a &quot;type&quot; for .ico files, but if you were going to include one, which should it be? Are there actually any problems with serving it as official IANA type?


  [1]: http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
  [2]: https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Correct MIME Type for favicon.ico?

I was reading the Favicon page on Wikipedia. They mention the HTML 5 spec for Favicon: 

&gt; The current HTML5 specification recommends specifying size icons in multiple sizes using the attributes rel=&quot;icon&quot; sizes=&quot;space-separated list of icon dimensions&quot; within a &lt;link&gt; tag. [[source][1]] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon&#39;s content type in the form of type=&quot;file content-type&quot; within the &lt;link&gt; tag.

Looking at the cited article (W3) they show this example: 

    &lt;link rel=icon href=favicon.png sizes=&quot;16x16&quot; type=&quot;image/png&quot;&gt;
    &lt;link rel=icon href=windows.ico sizes=&quot;32x32 48x48&quot; type=&quot;image/vnd.microsoft.icon&quot;&gt;
    &lt;link rel=icon href=mac.icns sizes=&quot;128x128 512x512 8192x8192 32768x32768&quot;&gt;
    &lt;link rel=icon href=iphone.png sizes=&quot;57x57&quot; type=&quot;image/png&quot;&gt;
    &lt;link rel=icon href=gnome.svg sizes=&quot;any&quot; type=&quot;image/svg+xml&quot;&gt;

My question is do any browsers support the HTML 5 method? 

Note: I know Apple uses their `apple-touch-icon` meta tag method over the HTML5 method.

The wikipedia article claims:

&gt; The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128&#215;128 pixel application icons when the user chooses the Create application shortcuts... from the &quot;Tools&quot; menu.

How does Internet Explorer (v9 to v11) and Firefox handle this? And is the article correct in how Chrome handles the HTML Favicons? (There is no source cited for Chrome confirming this.) 

In searching I wasn&#39;t able to really find any (credible) info on HTML 5 Favicon other than the Wikipedia Article.

  [1]: http://www.w3.org/html/wg/drafts/html/master/links.html#rel-icon

HTML 5 Favicon - Support?

I&#39;d like to use a single image as both a regular favicon and iPhone/iPad friendly favicon. 

Is this possible? Would an iPad-friendly 72&#215;72 PNG scale if linked to as a regular browser favicon? Or do I have to use a separate 16&#215;16 or 32&#215;32 image?

Does a favicon have to be 32&#215;32 or 16&#215;16?

I have a few static pages that are just pure HTML, that we display when the server goes down. How can I put a favicon that I made (it&#39;s 16x16px and it&#39;s sitting in the same directory as the HTML file; it&#39;s called favicon.ico) as the &quot;tab&quot; icon as it were? I have read up on Wikipedia and looked at a few tutorials and have implemented the following:

    &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot;/&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot;/&gt;

But it still doesn&#39;t want to work. I am using Chrome to test the sites. According to Wikipedia .ico is the best picture format that runs on all browser types.

## Update

I could not get this to work locally although the code checks out it will only really work properly once the server started serving the site. Just try pushing it up to the server and refresh your cache and it should work fine.

Adding a favicon to a static HTML page

Are there any modern browsers that won&#39;t detect the favicon.ico automatically? Is there any reason to add the link tag for favicon.ico?

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot;&gt;

My guess is that it&#39;s only necessary to include it in the HTML document if you decide to go with GIF or PNG...

Necessary to add link tag for favicon.ico?

I&#39;ve been working on a website and I&#39;d like to add a small icon to the browser tab.

How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a `.png` logo file that I&#39;d like to convert to an icon.

Related: https://stackoverflow.com/questions/2359866/html-set-image-on-browser-tab.

How to add a browser tab icon (favicon) for a website?

I don&#39;t have a favicon.ico, but my browser always makes a request for it.

Is it possible to prevent the browser from making a request for the favicon from my site? Maybe some META-TAG in the HTML header?

How to prevent favicon.ico requests?

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 nowadays? Is there any option &quot;one file fits all&quot;?

I&#39;ve been browsing many websites and checked different &quot;favicon generators&quot;. All of them are years old and work mostly with png files.

**For example:**
What code should be used for ico and svg? 

    &lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/ico&quot;&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;favicon.svg&quot; type=&quot;image/svg+xml&quot;&gt;



or should dimensions be specified if ico contains more sizes? I didn&#39;t find one good answer.

    &lt;link rel=&quot;icon&quot; sizes=&quot;16x16 24x24 32x32 48x48 64x64&quot; href=&quot;favicon.ico&quot;&gt;


Please provide dimensions, file formats and meta/link tags of what favicons should be used.



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

Simple enough question: I&#39;ve created a small app that is basically just a favourites that sits in my system tray so that I can open often-used sites/folders/files from the same place. Getting the default icons from my system for known file types isn&#39;t terribly complicated, but I don&#39;t know how to get the favicon from a website. (SO has the grey-&gt;orange stack icon in the address bar for instance)

Does anyone know how I might go about that?

How can I get a web site&#39;s favicon?

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?

How to set custom favicon in Express?

I have a favicon icon which isn&#39;t showing up in Chrome (I&#39;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&#39;t the icon appear?

Favicon not showing up in Google Chrome

The image next to the page title in the browser tab - how can you link an image here?

How do I put my website&#39;s logo to be the icon image in browser tabs?

Is it possible to use a [Font Awesome][1] icon as a favicon icon? You know, the little icon that appears along-side a website title in the browser tab?


  [1]: http://fortawesome.github.io/Font-Awesome/

Use Font Awesome Icon As Favicon

**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 browsers?

**Method 1**

Placing a file named `favicon.ico` in the main directory is one way. The browser always requests that file. You can see that in the apache log files.

**Method 2**

HTML tag in the `&lt;head&gt;` section:

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.png (or ico?)&quot; type=&quot;image/x-icon&quot; /&gt;

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

I&#39;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 and even [site] bookmark uses the favicon I&#39;ve specified.  Just not my bookmarklet.

How can I code my site or bookmarklet so that the bookmarklet gets the favicon, too?

I&#39;m aware of various manual hackery techniques users can use to set the favicon after the fact, but those are undesirable solutions.


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

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:

&gt; Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/favicon.ico

So inside webpack, how to import the `favicon.ico` correctly?

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

*Updated question:*

What is considered best practise when creating favicons in 2022?

---
*This is the original question asked back in 2013:*

I&#39;m trying to get my head around all these different sizes and formats that are needed for Favicons, Touch icons and now Tile icons too.

I&#39;ve read this post: 
http://www.jonathantneal.com/blog/understand-the-favicon 
but I&#39;m still a bit hazy on exactly what to use that will look reasonably good on all devices and browsers &gt;= IE8.

I think I should create the following:

ICO&lt;br&gt;
favicon.ico (32x32)

PNG&lt;br&gt;
favicon.png (96x96)

Tile Icon&lt;br&gt;
tileicon.png (144x144)

Apple Touch Icon&lt;br&gt;
apple-touch-icon-precomposed.png (152x152)&lt;br&gt;based on this https://github.com/h5bp/html5-boilerplate/issues/1367

...and then use this code to serve &#39;em up?

    &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;path/to/touchicon.png&quot;&gt;
    &lt;link rel=&quot;icon&quot; href=&quot;path/to/favicon.png&quot;&gt;
    &lt;!--[if IE]&gt;&lt;link rel=&quot;shortcut icon&quot; href=&quot;path/to/favicon.ico&quot;&gt;&lt;![endif]--&gt;
    &lt;!-- or, set /favicon.ico for IE10 win --&gt;
    &lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#D83434&quot;&gt;
    &lt;meta name=&quot;msapplication-TileImage&quot; content=&quot;path/to/tileicon.png&quot;&gt;

Am I missing anything?

I&#39;m not clear whether this will cover IE 10?

Favicons - Best practices

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 &#39;favicons-webpack-plugin&#39; which can be found here: https://github.com/jantimon/favicons-webpack-plugin. 

If anyone can tell me what I am doing wrong, your assistance would be greatly appreciated. 

 I get the following error when I run &#39;npm run start&#39;

[![enter image description here][1]][1]


This is my directory structure:

[![enter image description here][2]][2]


  [1]: http://i.stack.imgur.com/yCWdy.png
  [2]: http://i.stack.imgur.com/SqlcM.png

This is my webpack.config.js file:

    const path = require(&#39;path&#39;);
    const merge = require(&#39;webpack-merge&#39;);
    const webpack = require(&#39;webpack&#39;);
    const NpmInstallPlugin = require(&#39;npm-install-webpack-plugin&#39;);
    const TARGET = process.env.npm_lifecycle_event;
    const FaviconsWebpackPlugin = require(&#39;favicons-webpack-plugin&#39;);
    const HtmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;);
    const CleanPlugin = require(&#39;clean-webpack-plugin&#39;);
    const ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);
    var favicons = require(&#39;favicons&#39;),
        source = &#39;my-logo.png&#39;,           // Source image(s). `string`, `buffer` or array of `{ size: filepath }`
        configuration = {
            appName: null,                  // Your application&#39;s name. `string`
            appDescription: null,           // Your application&#39;s description. `string`
            developerName: null,            // Your (or your developer&#39;s) name. `string`
            developerURL: null,             // Your (or your developer&#39;s) URL. `string`
            background: &quot;#fff&quot;,             // Background colour for flattened icons. `string`
            path: &quot;/&quot;,                      // Path for overriding default icons path. `string`
            url: &quot;/&quot;,                       // Absolute URL for OpenGraph image. `string`
            display: &quot;standalone&quot;,          // Android display: &quot;browser&quot; or &quot;standalone&quot;. `string`
            orientation: &quot;portrait&quot;,        // Android orientation: &quot;portrait&quot; or &quot;landscape&quot;. `string`
            version: &quot;1.0&quot;,                 // Your application&#39;s version number. `number`
            logging: false,                 // Print logs to console? `boolean`
            online: false,                  // Use RealFaviconGenerator to create favicons? `boolean`
            icons: {
                android: true,              // Create Android homescreen icon. `boolean`
                appleIcon: true,            // Create Apple touch icons. `boolean`
                appleStartup: true,         // Create Apple startup images. `boolean`
                coast: true,                // Create Opera Coast icon. `boolean`
                favicons: true,             // Create regular favicons. `boolean`
                firefox: true,              // Create Firefox OS icons. `boolean`
                opengraph: true,            // Create Facebook OpenGraph image. `boolean`
                twitter: true,              // Create Twitter Summary Card image. `boolean`
                windows: true,              // Create Windows 8 tile icons. `boolean`
                yandex: true                // Create Yandex browser icon. `boolean`
            }
        },
        callback = function (error, response) {
            if (error) {
                console.log(error.status);  // HTTP error code (e.g. `200`) or `null`
                console.log(error.name);    // Error name e.g. &quot;API Error&quot;
                console.log(error.message); // Error description e.g. &quot;An unknown error has occurred&quot;
            }
            console.log(response.images);   // Array of { name: string, contents: &lt;buffer&gt; }
            console.log(response.files);    // Array of { name: string, contents: &lt;string&gt; }
            console.log(response.html);     // Array of strings (html elements)
        };
    
    favicons(source, configuration, callback);
    const pkg = require(&#39;./package.json&#39;);
    
    const PATHS = {
      app: path.join(__dirname, &#39;app&#39;),
      build: path.join(__dirname, &#39;build&#39;)
    };
    
    process.env.BABEL_ENV = TARGET;
    
    const common = {
      entry: {
        app: PATHS.app
      },
      // Add resolve.extensions
      // &#39;&#39; is needed to allow imports without an extension
      // note the .&#39;s before the extension as it will fail to load without them
      resolve: {
        extensions: [&#39;&#39;, &#39;.js&#39;, &#39;.jsx&#39;, &#39;.json&#39;]
      },
      output: {
        path: PATHS.build,
        filename: &#39;bundle.js&#39;
      },
      module: {
        loaders: [
          {
            // Test expects a RegExp! Notethe slashes!
            test: /\.css$/,
            loaders: [&#39;style&#39;, &#39;css&#39;],
            //Include accepts either a path or an array of paths
            include: PATHS.app
    
          },
          //set up JSX. This accepts js too thanks to RegExp
          {
          test: /\.(js|jsx)$/,
          //enable caching for improved performance during development
          //It uses default OS directory by default. If you need something more custom,
          //pass a path to it. ie: babel?cacheDirectory=&lt;path&gt;
          loaders: [
            &#39;babel?cacheDirectory,presets[]=es2015&#39;
        ],
          //parse only app files Without this it will go thru the entire project.
          //beside being slow this will likely result in an error
          include: PATHS.app
          }
        ]
      }
    };
    
    // Default configuration. We will return this if
    // Webpack is called outside of npm.
    if(TARGET === &#39;start&#39; || !TARGET){
      module.exports = merge(common, {
        devtool: &#39;eval-source-map&#39;,
        devServer: {
          contentBase: PATHS.build,
    
          //enable history API fallback so HTML5 HISTORY API based
          // routing works. This is a good default that will come in handy in more
          // complicated setups.
          historyApiFallback: true,
          hot: true,
          inline: true,
          progress: true,
    
          //display only errors to reduce output amount
          stats: &#39;errors only&#39;,
    
          //Parse host and port from env so this is easy to customize
          host: process.env.HOST,
          port: process.env.PORT
    
    },
    
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new NpmInstallPlugin({
        save: true //--save
      }),
      new FaviconsWebpackPlugin(&#39;my-logo.png&#39;)
    
    ]
    });
    }
    
    if(TARGET === &#39;build&#39; || TARGET === &#39;stats&#39;) {
      module.exports = merge(common, {
        entry: {
          vendor: Object.keys(pkg.dependencies).filter(function(v) {
            return v !== &#39;alt-utils&#39;;
          }),
          style: PATHS.style
        },
        output: {
          path: PATHS.build,
          // Output using entry name
          filename: &#39;[name].[chunkhash].js&#39;,
          chunkFilename: &#39;[chunkhash].js&#39;
        },
        module: {
          loaders: [
            // Extract CSS during build
            {
              test: /\.css$/,
              loader: ExtractTextPlugin.extract(&#39;style&#39;, &#39;css&#39;),
              include: PATHS.app
            }
          ]
        },
        plugins: [
          // Output extracted CSS to a file
          new ExtractTextPlugin(&#39;[name].[chunkhash].css&#39;),
          // Extract vendor and manifest files
          new webpack.optimize.CommonsChunkPlugin({
            names: [&#39;vendor&#39;, &#39;manifest&#39;]
          }),
          // Setting DefinePlugin affects React library size!
          new webpack.DefinePlugin({
            &#39;process.env.NODE_ENV&#39;: &#39;&quot;production&quot;&#39;
          }),
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false
            }
          })
        ]
      });
    }


This is my server.js file:

    /* Global Requires */
    
    const express    = require(&#39;express&#39;);
    const logger     = require(&#39;morgan&#39;);
    const bodyParser = require(&#39;body-parser&#39;);
    const path       = require(&#39;path&#39;);
    const app        = express();
    const ReactDOM = require(&#39;react-dom&#39;)
    var favicon = require(&#39;serve-favicon&#39;);
    
    
    if(process.env.NODE_ENV === &#39;development&#39;) {
      console.log(&#39;in development.&#39;);
      require(&#39;dotenv&#39;).config();
    } else {
      console.log(&#39;in production.&#39;);
    }
    
    /* App Config */
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
    app.use(express.static(path.join(__dirname, &#39;build&#39;)));
    app.use(favicon(__dirname + &#39;/public/favicon.ico&#39;));
    
    app.use(logger(&#39;dev&#39;));
    
    /* Server Initialization */
    app.get(&#39;/&#39;, (req, res) =&gt; res.sendFile(&#39;index.html&#39;));
    var port = process.env.PORT || 3000;
    app.listen(port, () =&gt; console.log(`Server initialized on // ${new Date()}`));
    


Add Favicon with React and Webpack

&gt; **Possible Duplicate:**  
&gt; [HTML Title Image](https://stackoverflow.com/questions/3103490/html-title-image)  

&lt;!-- End of automatically inserted text --&gt;

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.

Add Favicon to Website

Other than the fact that PNG is a more common image format, is there any technical reason to favor favicon.png vs. favicon.ico?

I&#39;m supporting modern browsers which all support PNG favorite icons.

favicon.png vs favicon.ico - why should I use PNG instead of ICO?

How can I create a favicon for my website?

Creating a favicon

How can I override the favicon of Spring Boot?

&gt; **NOTE**: Here is my another question that provides another solution which does not involve any coding: [Spring Boot: Is it possible to use external application.properties files in arbitrary directories with a fat jar?][1] It&#39;s for application.properties, but it can also be applied to the favicon. In fact, I&#39;m using that method for favicon overriding now.

If I implement a class that has @EnableWebMvc, WebMvcAutoConfiguration class of Spring Boot does not load, and I can serve my own favicon by placing it to the root directory of the static contents.

Otherwise, WebMvcAutoConfiguration registers faviconRequestHandler bean, (see source https://github.com/spring-projects/spring-boot/blob/master/spring-boot-autoconfigure/src/main/java/org/springframework/boot/autoconfigure/web/WebMvcAutoConfiguration.java) and it serve the &#39;green leaf&#39; icon which is placed in the Spring Boot&#39;s main resource directory.

How can I override it without implementing a class that has @EnableWebMvc myself, thus disabling whole default configuration functionality of WebMvcAutoConfiguration class of Spring Boot?

Also, since I want the icon file be updated as soon as possible on the client (web browser) side, I want to set the cache period of the favicon file to 0. (like the following code, which I&#39;m using for my &#39;static&#39; webapp content and script files which must be updated on the client side as soon as possible after I change the file.)

	public void addResourceHandlers(ResourceHandlerRegistry registry)
	{
		registry.addResourceHandler(&quot;/**&quot;)
			.addResourceLocations(&quot;/&quot;)
			.setCachePeriod(0);
	}

So, just to find the place to save the favicon.ico file that Spring Boot&#39;s faviconRequestHandler honors may not be sufficient.

**UPDATE**

Now I know that I can override the default one by placing a favicon file to src/main/resources directory. But the cache period problem still remains.&lt;br&gt;
Also, it is preferable to place the favicon file to the directory that static web files are placed, rather than the resource directory.

**UPDATE**

Ok, I managed to override the default one.
What I did is as follows:

	@Configuration
	public class WebMvcConfiguration
	{
		@Bean
		public WebMvcConfigurerAdapter faviconWebMvcConfiguration()
		{
			return new FaviconWebMvcConfiguration();
		}
		
		public class FaviconWebMvcConfiguration extends WebMvcConfigurerAdapter
		{
			@Override
			public void addResourceHandlers(ResourceHandlerRegistry registry)
			{
				registry.setOrder(Integer.MIN_VALUE);
				registry.addResourceHandler(&quot;/favicon.ico&quot;)
					.addResourceLocations(&quot;/&quot;)
					.setCachePeriod(0);
			}
		}
	}
		
Basically, I overrode the default one by adding a resource handler with the highest order by calling registry.setOrder(Integer.MIN_VALUE).

Since the default one in Spring Boot has the order value (Integer.MIN_VALUE + 1), (see FaviconConfiguration class in https://github.com/spring-projects/spring-boot/blob/master/spring-boot-autoconfigure/src/main/java/org/springframework/boot/autoconfigure/web/WebMvcAutoConfiguration.java) my handler wins. 

Is this Ok?
Is there another way (something gentler than what I did)?

**UPDATE**

It&#39;s not Ok.
When I call `registry.setOrder(Integer.MIN_VALUE)`, actually I raise the priority of all resource handlers. So, when I add following code to another `WebMvcConfigurerAdapter`, effectively all http request is directed to that resource handler, preventing any dynamic handling by Java code.

	public void addResourceHandlers(ResourceHandlerRegistry registry)
	{
		registry.addResourceHandler(&quot;/**&quot;)
			.addResourceLocations(&quot;/&quot;)
			.setCachePeriod(0);
	}

Another solution is needed.

**UPDATE**

For now, I could not find the way to override the favicon functionality Spring Boot provides.&lt;br&gt;
Maybe there is a way to add add my own `HandlerMapping` bean, but I don&#39;t know how to do it.

Now I can choose one of following options:

1. Have a class that has `@EnableWebMvc` thus disabling Spring Boot `WebMvcAutoConfiguration` class. (I can copy the code of `WebMvcAutoConfiguration` class and delete the favicon functionality)
2. Give up the freedom of placing favicon file to arbitary location and place it to the resource directory as Spring Boot&#39;s favicon functionality requires. And ignore caching problem.

But neither option is satisfactory.&lt;br&gt;
I just want to place the favicon file with my static web files (which can be any directory since I can change the document root) and resolve the caching problem.&lt;br&gt;
Am I missing something?&lt;br&gt;
Any suggestion would be greatly appreciated.

**UPDATE**

BTW, the reason I want to change the location of favicon and other static files is as follows. For now it is mainly the development environment issue.&lt;br&gt;

I&#39;m building a single page web application(SPA).

Libraries/Frameworks:

 - For server side, I use Spring. (of course)
 - For client (web browser) side, I use AngularJS.

Tools:

 - For server side, I use Spring Tool Suite.
 - For client side, I use WebStorm.

Main directory structure:

	ProjectRoot\
		src\
		bin\
		build\
		webapp\
		build.gradle


 - src: Where my Spring java source files reside.
 - bin: Where Spring Tool Suite places its build output.
 - build: Where &#39;gradle build&#39; places its build output.
 - webapp: Where my client source files(.js, .css, .htm and favicon) reside. Thus this is the WebStorm project directory. (I can change the directory name if necessary)

What I want is:

 - To be able to modify and test my client code without rebuilding/restarting my Spring server application. So, the client code must not be put into the jar file. Anyways Spring Tool Suite does not build a jar file at all (at least for the current configuration)
 - To be able to test my Spring server application with the client code, easily switching between Spring Tool Suite output and gradle output. So, client code must be accessible from both the server application in `build` subdirectory (actually `build\libs`) and the server application in `bin` directory.
 - When I modify the client code, it must be immediately available to the web browser. So browser must not cache it indefinitely, and must always ask for the server for update.
 - When deployed, client code must be modifiable without rebuilding/restarting the server application. So the client code must not be put into the jar file.

Regarding cache issue:

Without setCachePeriod(0) on addResourceHandlers(), Google Chrome caches the file indefinitely, without asking the server for updates. It does not even connect to the server. (Google engineers say that the behavior is correct.) So, all I can do is to manually clear the browser cache. It is frustrating on development environment, and unacceptable on production environment.

BTW, express.js module on Node.js gives reasonable default HTTP header so that Google Chrome ask the server for updates. When I reviewed the HTTP headers that Spring and express.js produces using Fiddler, they were different.

Any suggestion for improving my environment would be appreciated.&lt;br&gt;
Since I&#39;m a Spring beginner, I may be missing something.

**UPDATE**

Finally I have a working code. It is as follows:

	@Configuration
    public static class FaviconConfiguration
    {
        @Bean
        public SimpleUrlHandlerMapping myFaviconHandlerMapping()
        {
            SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
            mapping.setOrder(Integer.MIN_VALUE);
            mapping.setUrlMap(Collections.singletonMap(&quot;/favicon.ico&quot;,
                myFaviconRequestHandler()));
            return mapping;
        }
        
        @Autowired
        ApplicationContext applicationContext;

        @Bean
        protected ResourceHttpRequestHandler myFaviconRequestHandler()
        {
            ResourceHttpRequestHandler requestHandler =
                new ResourceHttpRequestHandler();
            requestHandler.setLocations(Arrays
                .&lt;Resource&gt; asList(applicationContext.getResource(&quot;/&quot;)));
            requestHandler.setCacheSeconds(0);
            return requestHandler;
        }
    }
	
Notice the bean names. I have added &#39;my&#39; to avoid name clash.&lt;br&gt;
Autowiring application context itself seems awkward, but it was neccessary for mimicking the code in `org.springframework.web.servlet.config.annotation.ResourceHandlerRegistration.addResourceLocations()`.

Now I have a favicon handler free of caching problem, and I can place the favicon file anywhere I want.&lt;br&gt;
Thanks.


  [1]: https://stackoverflow.com/questions/26140784/spring-boot-is-it-possible-to-use-external-application-properties-files-in-arbi

Spring Boot: Overriding favicon

I have a web application that&#39;s branded according to the user that&#39;s currently logged in. I&#39;d like to change the favicon of the page to be the logo of the private label, but I&#39;m unable to find any code or any examples of how to do this. Has anybody successfully done this before?

I&#39;m picturing having a dozen icons in a folder, and the reference to which favicon.ico file to use is just generated dynamically along with the HTML page. Thoughts?

Changing website favicon dynamically

I&#39;m trying to get an SVG Favicon on my site but no matter what I do, it just doesn&#39;t want to work.

I&#39;ve got the following code saved as an .svg file in my usual favicon location, but when I change the favicon path to be .svg instead of .ico, nothing loads.

    &lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 384.5 283.4&quot; style=&quot;enable-background:new 0 0 384.5 283.4;&quot; xml:space=&quot;preserve&quot;  width=&quot;100%&quot; height=&quot;100%&quot;&gt;

    &lt;style type=&quot;text/css&quot;&gt;
        .shape1 {fill: #DB6B2A;}
    	.shape2 {fill: #AE1A31;}
    &lt;/style&gt;

    &lt;path class=&quot;shape1&quot; d=&quot;M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
	l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
	c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
	c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7&quot;/&gt;

    &lt;path class=&quot;shape2&quot; d=&quot;M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
	c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
	c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
	c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7&quot;/&gt;
    &lt;/svg&gt;

This is the code I&#39;m using to set the favicon;

    &lt;link rel=&quot;icon&quot; href=&quot;http://www.MYSITE.co.uk/favicon.svg?v=4&quot;&gt;

I can&#39;t work out if it is an issue with my .svg code, or I&#39;m missing something.
Thanks

SVG Favicon Not Working

What is currently the best way to get a favicon to display in all browsers that currently support it?

Please include:

1. Which image formats are supported by which browsers.

2. Which lines are needed in what places for the various browsers.

What is currently the best way to get a favicon to display in all browsers that support Favicons?

I am trying to do a very simple preliminary exercise to setting up a website which is creating a favicon.

This is the code I am using: 

    &lt;!DOCTYPE html &gt;
    &lt;html lang=&quot;en-US&quot;&gt;
    &lt;head profile=&quot;http://www.w3.org/2005/10/profile&quot;&gt;
    &lt;link rel=&quot;shortcut icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot; /&gt;
    &lt;/head&gt;
    &lt;/html&gt;

But it is not working - can anyone please assist?
I&#39;ve saved the file favicon.ico on the same level as my html file (on a subdirectory). 

Many thanks

How to set-up a favicon?

From: JPG, To: ICO;

    /usr/bin/convert -resize x16 -gravity center -crop 16x16+0+0 input.jpg \
    -transparent white -colors 256 output/favicon.ico 

This is the output for the command line.

From: GIF&#39;s, PNG To: ICO;

    /usr/bin/convert -resize x16 -gravity center -crop 16x16+0+0 input.png \
    -flatten -colors 256 output/favicon.ico 

I am having issues with transparency. I can&#39;t seem to get the right code for it, i have tried -channel alpha -negate, etc

This creates an image and when i apply to the site, it works with Firefox but none of the other browsers. IE, Chrome, Opera and Safari all hate it for some reason, it is a simple favicon.ico file. My conclusion is it must be my command somewhere is breaking. Please help?

Converting GIF&#39;s, PNG&#39;s and JPG&#39;s to .ICO files using Imagemagick

I have a Grails application running locally using its own tomcat and I have just changed the favicon for a new one.  Problem is that I can not see it in any browser.  The old favicon shows up or I get no favicon at all, but not my new one.  I do not think this is a Grails issue per se, more an issue with favicons.

What is supposed to happen with favicons?  How are they supposed to work?  I have numerous bookmarks in my browser which have the wrong icons and they never seem to get refreshed.  How do I force the server/browser to stop caching them?  It seems pretty silly to always cache them given they are normally only 16x16.  Why not just upload them with every visit to the page? It is not exactly a huge overhead.

How do I force a favicon refresh?

I&#39;m not sure what the correct size should be.

Many sites seem to repeat that the apple-touch-icon should be 57x57 pixels but cite a broken link as their source.

[Hanselman][1]&#39;s and [playgroundblues][2]&#39;s comments suggest different sizes including 163x163 and 60x60.

Apple&#39;s own [apple.com icon][3] is 129x129!

See my related question:
[How do I give my web sites an icon for iPhone?][4]


  [1]: http://www.hanselman.com/blog/MakeYourWebsiteMobileAndIPhoneFriendlyAddHomeScreenIPhoneIconsAndAdjustTheViewPort.aspx
  [2]: http://playgroundblues.com/posts/2008/jan/15/iphone-bookmark-iconage/
  [3]: http://www.apple.com/apple-touch-icon.png
  [4]: https://stackoverflow.com/questions/1505/how-do-i-give-my-web-sites-an-icon-for-iphone

What are the correct pixel dimensions for an apple-touch-icon?

I know new rails apps come with an empty favicon.ico file.  I want to know how I go about adding a favicon.  I know you can use the `favicon_link_tag` helper, but I am not sure how to populate the favicon.ico file.  Do you use favicon generators?  If so, which one is best?

I also want to be able to cache it, does rails do that automatically as well?

Thanks

How to add favicon in rails 3.2

I *DO* know this question has been asked at least a thousand times in this website alone, but I HAVE read many of those threads, I DO consider myself very knowledgeable and rarely ever ask anything, instead prefer to do my own research.

However, THIS issue is so strange, without hope for real enlightenment (since this question HAS been discussed so often and still I could not benefit from reading there), here is my issue:

favicon.ico exists, and (locally hosted development website) `http://website/favicon.ico` displays the correct icon. Its size is a mere 198 Bytes, so the size limit I found in Firefox&#39;s about:config of 1024 Bytes is adhered to. According to the wisdom on favicons on the web the browser should ask for favicons on its own when there is nothing in the &lt;head&gt; of the page. However, my apache log clearly shows Firefox (9.01) never even asks for it.

Next: when I add 

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot;&gt;

I still don&#39;t get a favicon.

Next: when I instead use

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico?&quot;&gt;

(note the trailing &quot;?&quot;) I suddenly *DO* get a favicon. BUt it cannot be a cache issue! First, I have cleared the cache, second, as I mentioned above, I already successfully loaded the icon file into Firefox through its URL `http://website/favicon.ico`

I am unable to explain this behavior of Firefox. Chrome shows the correct favicon, by the way.

This is my page head:

    &lt;!doctype html&gt;
    &lt;html&gt;
    &lt;head&gt;
    	&lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico?&quot; /&gt;
    &lt;/head&gt;
    ...
As soon as I append at least the &quot;?&quot; after &quot;ico&quot; it works.

Here is what the server sends when the icon is requested, since some have asked for this. **I have no idea why this would be useful, since a) I said my cache was empty for each test (checked with about:cache too), and b) I said the server is never even asked for the file when it does not show up.** Firefox just does not ask without the &quot;?&quot; - with cache empty! The request shows up in the apache log ONLY when I use the appended &quot;?&quot;.

    Date	Fri, 23 Dec 2011 12:53:22 GMT
    Server	Apache/2.2.20 (Ubuntu)
    Last-Modified	Fri, 23 Dec 2011 12:02:49 GMT
    Etag	&quot;12c07fe-c6-4b4c132190e30&quot;
    Accept-Ranges	bytes
    Content-Length	198
    Content-Type	image/x-icon

favicon not displayed by Firefox

The [WHATWG document](http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-rel) for HTML5 says that the `rel` attribute must contain values that are space-separated, and then it gives a table of allowed values.

&gt; The attribute&#39;s value must be a set of space-separated tokens. The [allowed keywords and their meanings](http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes)...

The list of allowed keywords for the `link` element does not include `shortcut`, but it does include `icon`. So I&#39;m looking at the all-too-well-known tag

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;

and wondering if it is HTML5-compliant. Should I remove the keyword `shortcut` from this tag throughout my Website?

HTML5 `&lt;link rel=&quot;shortcut icon&quot; /&gt;`

How to animate a favicon like that?

![animated favicon](http://i.stack.imgur.com/ag814.gif)

It seems to work only in Firefox.

How to animate a favicon?

I have a favicon with the dimensions of height=26px / width=20px named favicon.png

    &lt;link href=http://www.example.com/images/favicon.png rel=&quot;shortcut icon&quot; /&gt;

However, in my browser, my favicon.png is all distorted.

**Question**: Is my favicon.png supposed to be a particular size? Also, can I use a non-standard size/dimension and if so, how?



Favicon dimensions?

I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.

I&#39;m using Google Chrome, I see favicons working on other websites, but the favicon on my website won&#39;t show up.  The site is in a folder on my desktop named site.

The `favicon.ico` file is 16x16, and I used an online generator to make it.

This is the code: 

    &lt;!DOCTYPE html&gt;
    &lt;html&gt; 
        &lt;head&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/head&gt;
        &lt;body&gt;
        &lt;/body&gt;
    &lt;/html&gt;

 

HTML Favicon.ico won&#39;t show on Google Chrome

Everybody knows how to set up a favicon.ico link in their HTML:

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;http://hi.org/icon.ico&quot; type=&quot;image/x-icon&quot;&gt;

But it&#39;s silly that for only a several-byte-tiny icon we need **yet yet another potentially speed-penalizing HTTP request**.

So I wondered, how could I make that favicon part of a usable sprite (e.g., `background-position=0px -200px;`) that doubles as, say, a logo on the rest of the website, in order to speed up the site and save that precious and valuable HTTP request. How can we get this to go into an existing sprite image along with our logo and other artworks?






How to save up another precious HTTP-request for the tiny favicon?

I am trying to set a `favicon.ico` for my github page, but it doesn&#39;t work. When I serve it locally I see the standard &quot;empty&quot; favicon and when I push it I see the facebook icon. Why is it so? I have the right `favicon.ico` in the root directory of my project and I added the line 

    &lt;link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;/favicon.ico&quot;&gt;

to the relevant `default.html`. You can see the sources here: https://github.com/drorata/drorata.github.io

Unable to set favicon using Jekyll and github pages

I am using Hugo to generate a static site. Where should I put my `favicon.ico` file? 

Where do I put my favicon with Hugo

I&#39;m trying to add a favicon to a Next.js static site without much luck.

I&#39;ve tried customising the document with components from ```&#39;next/document&#39;```
https://nextjs.org/docs/#custom-document

A straight link to the favicon.ico file doesn&#39;t work because the file isn&#39;t included in the build and the href doesn&#39;t update to ```/_next/static/...```

Importing the image and adding to the link&#39;s href doesn&#39;t work either (see commented out lines).

```js
import React from &#39;react&#39;;
import Document, { Html, Head, Main, NextScript } from &#39;next/document&#39;;

// import favicon from &#39;../data/imageExports&#39;;

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      &lt;Html&gt;
        &lt;Head&gt;
          {/* &lt;link rel=&quot;shortcut icon&quot; href={favicon} /&gt; */}
          &lt;link rel=&quot;shortcut icon&quot; href=&quot;../images/icons/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    );
  }
}
```

**The favicon links get added however it doesn&#39;t display.** I&#39;d expect it to work when I import the file, but it just adds a ```&lt;link rel=&quot;shortcut icon&quot; href=&quot;[object Object]&quot;&gt;``` link.

Has anyone done this yet?

All Favicon Solutions on Gang of Coders

Total of 49 Favicon Solutions