Favicon is not rendering correctly, looks garbled

Question

My favicon seems to be acting up all of a sudden. I'm not sure what change I made that caused it to start failing, but it used to render just fine and now it's garbled.

Here's a sample of what it looks like:

I'm using Spring Boot and have Googled around to find all the typical answers on how to get your favicon showing up... but I've had no luck.

One thing I noticed (not sure if this is normal or not), is that when I visit the favicon URL, it doesn't load it in the browser as an icon, instead it loads as a bunch of text.

Here's what happens when I visit my localhost:8080/favicon.ico url:

The only thing I can think of that I've changed recently that might have had an effect on the favicon was my WebSecurityConfig.java... I added a REALM and basic authentication.

Here's the WebSecurityConfig.java file:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter
{
  @Autowired
  private UserDetailsService userDetailsService;

  private static String REALM="MY_TEST_REALM";

  @Bean
  public PasswordEncoder passwordEncoder() {
      return new BCryptPasswordEncoder();
  }

  @Autowired
  public void globalSecurity (AuthenticationManagerBuilder auth) throws Exception
  {
    auth.userDetailsService(userDetailsService)
      .passwordEncoder(passwordEncoder());
  }

  @Override
  protected void configure(HttpSecurity http) throws Exception
  {
    // authenticate / authorize
    // authentication = who the hell are you? i.e. username/password
    // authorization = what can you access in the app?

    http
      .csrf().disable()
      .authorizeRequests()
        .antMatchers("/*").permitAll()
        .antMatchers("/js/**").permitAll()
        .antMatchers("/webinars/**").permitAll()
        .antMatchers("/img/**").permitAll()
        .antMatchers("/fonts/**").permitAll()
        .antMatchers("/register").permitAll()
        .antMatchers("/samcart").permitAll()
        .antMatchers("/sales").permitAll()
        .antMatchers("/sales/**").permitAll()
        .antMatchers("/paypal/**").permitAll()
        .antMatchers("/forgotPassword").permitAll()
        .antMatchers("proffesso-favicon.ico").permitAll()
        .antMatchers("/students/purchasedCourse.html").permitAll()
        .antMatchers("/students/courses/**").permitAll()
        .antMatchers("/teachers/courses/*/image").permitAll()
        .antMatchers("/teachers/courses/*/offers/*/image").permitAll()
        .antMatchers("/handlebars/**").permitAll()
        .antMatchers("/css/**").permitAll()
        .antMatchers("/admin/**").hasRole("ADMIN")
        .antMatchers("/admin").hasRole("ADMIN")
        .anyRequest().authenticated()
        .and()
      .httpBasic()
        .realmName(REALM)
        .authenticationEntryPoint(getBasicAuthEntryPoint())
        .and()
      .formLogin()
        .loginPage("/login")
        .defaultSuccessUrl("/students/courses")
        .successHandler(new NoRedirectSavedRequestAwareAuthenticationSuccessHandler())
        .permitAll()
        .and()
      .logout()
        .logoutSuccessUrl("/").permitAll()
        .and()
      .sessionManagement()
        .maximumSessions(1);
  }

  @Bean
  public CustomBasicAuthenticationEntryPoint getBasicAuthEntryPoint(){
      return new CustomBasicAuthenticationEntryPoint();
  }

  /* To allow Pre-flight [OPTIONS] request from browser */
  @Override
  public void configure(WebSecurity web) throws Exception {
      web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
  }

  @Bean
  public HttpSessionEventPublisher httpSessionEventPublisher() {
      return new HttpSessionEventPublisher();
  }

  @Bean()
  public SecurityEvaluationContextExtension securityEvaluationContextExtension () {
    return new SecurityEvaluationContextExtension();
  }
}

Answer 1

Not sure if you figured this out. I recently ran into the same thing, my favicon looks just like the one in your screenshot. For me it was caused by maven resource filtering. I added an exclusion for *.ico like this:

<resources>
    <resource>
        <directory>src/main/resources</directory>
        <filtering>true</filtering>
        <excludes>
                <exclude>**/*.ico</exclude>
        </excludes>
    </resource>
</resources>