Tutorial
All Favicons for All Devices and Sizes
By Nicholas Cerminara
This tutorial is out of date and no longer maintained.
Introduction
A site doesn’t seem complete without having a favicon. For some reason, I will usually immediately notice when a site doesn’t have one. It leaves me questioning the legitimacy or quality of the site over something that’s so seemingly irrelevant.
Favicons have evolved beyond being a simple bookmark “favorite icon” though. They’re even more relevant now with responsive design and mobile devices. A user can now “pin” any website or webapp to their home screen (or desktop) to give them the feeling of a quick-access native application. With Windows 8, Microsoft has even gone so far as to let any old website or application even send notifications to the favicon (“tile” in this case).
My Thoughts
I think it’s definitely worth setting up favicons for as many different devices as possible. You never know who will want to pin or favorite the site on whatever device they have. That extra bit of effort can go a long way, as with many things in development. The problem is the standard for favicons is terrible right now. Between all the different devices, operating systems, browsers, and screen resolutions out there, to support everyone is a huge pain and it pollutes the head of your HTML document with numerous lines of link tags. To be perfect every single time requires lots of research and testing.
I like the concept of a .ico file supporting multiple sizes in a single file, but what I really want is vector support for favicons (like an SVG image). This way I could do it once and know I’m supporting everyone’s needs, but that will probably never happen.
Note: It’s probably worth saying that favicon images need to be custom-tailored in some cases. For example, you may want a different image depending on the size. So even if a vector image was possible, it may not be ideal.
Below you will find my default go-to for setting up favicons. There’s a ton of information on the web, and many favicon generators seem to generate different sizes to which they think the standards are. Skip to the bottom of this article if you’d like to check out those resources and references to create your own.
Creating a .ico file with multiple sizes
If you didn’t know, a .ico file can contain multiple .png or .bmp images. This is awesome because now you can support multiple-sized favicons with a single file and line of code in your document’s head. This is what we will be creating:
This single file actually has five different images. It’s actually pretty easy to convert multiple .png images into a single icon file. There’s probably a ton of applications you can download to do it for you, but I’ll show you how to do it for free from the command line.
The first thing you need to do is install ImageMagick. For Mac users who use Homebrew package manager, you can simply type this from your terminal:
If you don’t have Homebrew installed or that doesn’t work, there’s this installer. Lastly, if you’re hardcore or still having trouble, try to follow these instructions.
If everything was successful, you should see a huge list of instructions from the command line when you type:
Now to convert multiple .png files into a single .ico file, just follow this format from the terminal:
Here is an example of five favicon .png files being converted into a single .ico file:
The last thing that I think is important to note is to make sure you put the newly created favicon.ico file in the root of your site and make sure you reference it with a full absolute URL. This:
Not this:
And not this:
For Windows users, you can install ImageMagick here. It should work in a similar way.
Favicons for Android, iPhone, and others
Again, this is something you should look into yourself to make sure it fits your needs and works for you, but this is nonetheless a good starting point.
You’ll also want to add this in your document:
Favicon for Windows 8 Tile
This is just for the most basic icon. They recently added support for even more sizes though.
And All Together
Additional Resources and References
Blog Posts / User Contributed
Documentation
Generators
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
About the author(s)
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.