azure | web-config

Azure Web App - Missing MIME types

by Abhith RajanJuly 11, 2019 · 2 min read · Last Updated:

When you deploy an app to Azure app service (Web App), you may notice that the custom font isn’t showing up or some specific files is getting 404 even if they exist on the right place.

This is because of the missing Mime type definitions.

Mime Types

Its definition is,

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.

And if you want to know why it is causing the 404, read this article.

Missing Mime Types

Font Files

1<mimeMap fileExtension="woff" mimeType="application/font-woff" />
2 <mimeMap fileExtension="woff2" mimeType="application/font-woff" />

Json

1<mimeMap fileExtension=".json" mimeType="application/json" />

SVG

1<remove fileExtension=".svg"/>
2 <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

More

1<mimeMap fileExtension=".webmanifest" mimeType="application/manifest+json" />
2 <mimeMap fileExtension=".webp" mimeType="image/webp" /> <!-- Not all browser supports webp />

Sample web.config file

1<?xml version="1.0" encoding="UTF-8"?>
2<configuration>
3 <system.webServer>
4 <staticContent>
5 <remove fileExtension="woff"/>
6 <mimeMap fileExtension="woff" mimeType="application/font-woff" />
7 <remove fileExtension="woff2"/>
8 <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
9 <remove fileExtension=".json"/>
10 <mimeMap fileExtension=".json" mimeType="application/json" />
11 <remove fileExtension=".svg"/>
12 <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
13 </staticContent>
14 </system.webServer>
15</configuration>

Curious about remove fileExtension ? MimeMap collection inherits but it won’t allow duplicate entries. If a duplicate mimeMap definition is added, it will result,

IIS7 Error: cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’

So for the safe side, we are removing the global definition for that extension before changing it.

Written by Abhith Rajan
Abhith Rajan is an aspiring software engineer with more than 7 years of experience and proven successful track record of delivering technology-based products and services.
Buy me a coffee

Was this article helpful?

Your opinion matters

Please share your thought about this article

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

Related Posts

Related Videos

Azure Messaging: When to use what and why

How to use Azure Bastion to connect securely to your Azure VMs | Azure Friday

Improve security with Azure Sentinel, a cloud-native SIEM and SOAR solution | Azure Friday

Related Stories