Tutorial

All Favicons for All Devices and Sizes

Draft updated on Invalid Date
    Default avatar

    By Nicholas Cerminara

    All Favicons for All Devices and Sizes

    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:

    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">
    

    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:

    1. brew install imagemagick

    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:

    1. convert -v

    Now to convert multiple .png files into a single .ico file, just follow this format from the terminal:

    1. convert pathtofirstfile pathtofsecondfile pathtothirdfile [...] outputname.ico

    Here is an example of five favicon .png files being converted into a single .ico file:

    1. convert favicon-16.png favicon-24.png favicon-32.png favicon-48.png favicon-64.png favicon.ico

    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:

    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">
    

    Not this:

    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/favicon.ico">
    

    And not this:

    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/images/favicon.ico">
    

    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.

    <link rel="apple-touch-icon" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/wp-content/themes/thirty/img/icons/favicon-72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/wp-content/themes/thirty/img/icons/favicon-114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/thirty/img/icons/favicon-120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/wp-content/themes/thirty/img/icons/favicon-144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/thirty/img/icons/favicon-152.png">
    

    You’ll also want to add this in your document:

    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    

    Favicon for Windows 8 Tile

    This is just for the most basic icon. They recently added support for even more sizes though.

    <meta name="application-name" content="Scotch">
    <meta name="msapplication-TileImage" content="/wp-content/themes/thirty/img/icons/favicon-144.png">
    <meta name="msapplication-TileColor" content="#2A2A2A">
    

    And All Together

    <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="https://scotch.io/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/wp-content/themes/thirty/img/icons/favicon-57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/wp-content/themes/thirty/img/icons/favicon-72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/wp-content/themes/thirty/img/icons/favicon-114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/wp-content/themes/thirty/img/icons/favicon-120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/wp-content/themes/thirty/img/icons/favicon-144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/wp-content/themes/thirty/img/icons/favicon-152.png">
    <meta name="application-name" content="Scotch Scotch scotch">
    <meta name="msapplication-TileImage" content="/wp-content/themes/thirty/img/icons/favicon-144.png">
    <meta name="msapplication-TileColor" content="#2A2A2A">
    

    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.

    Learn more about us


    About the authors
    Default avatar
    Nicholas Cerminara

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    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!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel