I recently moved a client’s product and category images to Amazon’s S3 storage and AWS CloudFront CDN service. Moving images to a content delivery network (CDN) improves site speed whilst helping to free hosting space, which was also becoming an issue.
Magento 1.9x and S3
Thai Phan’s Magento S3 plugin helps to automate the migration and synchronising of your Magento stores assets and is available for both Magento 1 and Magento 2. After installing the plugin via Composer, setting up an S3 bucket, an IAM user and CloudFront distribution, I was ready to migrate my files.
Following the instructions was relatively painless (NB. plugin doesn’t support region eu-west-2). However although .css, .jpgs and .pngs all worked when I made the switch over, but the .svgs and .ico emebedded in the page all fail to load.
.svg files/ favicon don’t display
Inspect element showed that the path wouldn’t load, although the image would load if the path was pasted directly.
At first I thought it might be a delay in AWS CloudFront deploying the files, before thinking it must be a content type or permissions issue.
Getting favicon .ico files to display in S3 / CloudFront
This proved to be a Content-Type issue.
- Select the file in S3
- Click More button > Change metadata
- Change the key value Content-Type (likely to be the default binary/octet-stream) to the custom value image/x-icon .
This change is likely to take a bit of time to propagate if you’re also using Amazon’s CloudFront.
The process is very similar for .svg files not appearing via Amazon S3 / CloudFront.
Getting .svg files to display in S3 / CloudFront
The correct Content-Type for svg files is ‘image/svg+xml’. Your svg files are likely set as ‘binary/octet-stream’ within your S3 bucket.
- Select the svg file in S3
- Click More button > Change metadata
- Change the key value Content-Type (likely to be the default binary/octet-stream) to image/svg+xml .
This Content-Type option should be available as a dropdown, the .ico Content-Type wasn’t. Again the change is likely to take a bit of time to propagate if you’re also using Amazon’s CloudFront.
I hope that to fix the issue of Amazon S3 svgs and favicon not displaying. I found it puzzling that all other files worked without issue, but the fix turned out to be a simple one.
