/ Register

Get the most out of your Centmin Mod LEMP stack
Become a Member

WebPerf How to Make a Favicon Small and Cacheable

Discussion in 'All Internet & Web Performance News' started by eva2000, Jun 3, 2016.

Previous Thread Next Thread
Loading...
  1. Jun 3, 2016 #1
    eva2000

    eva2000 Administrator Staff Member

    54,868
    12,239
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,810
    Local Time:
    10:23 PM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    Today we want to talk about your favicon and how to make a favicon small, cacheable, and fast. This is definitely one of those optimizations that can be classified as lower priority, but everything adds up over time when it comes to web performance. If you add up 20 small optimizations, suddenly you could be looking at seconds shaved off your load times. As a CDN provider, we love sharing even the smallest of tricks that can help you stay ahead of your competition and ensure your sites load as fast as possible for both your visitors and Google.


    What is a Favicon?


    A favicon, or favicon.ico, is a small image icon file that is associated with your website. When a browser hits your website it does a silent lookup in the background for your favicon.ico (note: you might not see this in a website speed test). This is then displayed in various places such as the tabs in your browser as well as the bookmarks bar. Generally the favicon.ico is stored at the root of your website.

    [​IMG]

    However, it no longer just stops with desktop web browser favicons. Now we have iOS devices, Android devices, Windows 10 devices, and they all have their own size dimensions and file types that they support for associating an icon. iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts. An iPhone needs a 57×57 picture, whereas a brand new iPad with Retina screen looks for a 152×152 picture. Android Chrome also uses these pictures if it finds them. And Windows 10 takes goes a whole other way with a dedicated set of icons and HTML declarations.

    [​IMG]

    Do you need a favicon? The answer is yes. Every website should have a favicon associated with it. Since the browser requests this file, you will see a 404 error if one isn’t present. Since favicon.ico resides in the server’s root, each time the browser requests this file, the cookies for the server’s root are sent. Making the favicon small and reducing the cookie size for the server’s root cookies improves performance for retrieving the favicon.

    [​IMG]

    How to Make a Favicon


    A favicon can actually be either a PNG, GIF, or ICO file. However, ICO files are typically used more than others as the file size is smaller and it is supported in all major browsers. PNGs are used more commonly for IOS, Android, and Windows 10 devices. Today we will be focusing primarily on generating a favicon.ico for your website. If you need to create icons for other devices, visuapharm has a great reference on different icons sizes to get you started.

    Step 1


    A favicon should generally be 16×16 pixels or 32×32 pixels. And it is also recommended to keep it under 1 KB, or as small as possible. You can create your favicon in whatever program you prefer, whether it be Photoshop, Illustrator, Gimp, Paint, or Sketch. Simply save the file or rename it to a ICO file when you are finished. It should be named favicon.ico. (Hint: The best strategy for keeping it small is to use vectors when working with your logo/icon, before saving it out.)

    You can also use an online tool like real favicon generator in which you can upload a PNG, JPG, or SVG (vector based file type) and it will generate the ICO files for you. The tool also has some great generators for incorporating your icons into static sites and projects such as:

    Step 2


    Next you need to upload it to your website. Simply upload it via FTP to your website’s root directory and web browsers that support favicons will find it. If you need or want to put your favicon in a different directory then you can simply add the following into the <head> section of your website with the path to it. For example, snippet below would be if you had your favicon in a folder called images.

    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
    Favicon in WordPress


    If you are running on a WordPress site you can simply follow the steps above or could also use the free Favicon plugin from RealFaviconGenerator. Make sure to also check out the offical WordPress Favicon Documentation.

    Favicon in Joomla


    If you are running on Joomla you have to upload the favicon.ico to the /joomla/templates/<your template> directory. Make sure to also check out the official Joomla Favicon Documentation.

    Favicon Drupal


    If you are running on Drupal you have to follow the steps below. Make sure to also check out the official Drupal Favicon Documentation.

    1. Navigate to the admin/build/themes/settings/THEME or for Drupal 7 admin/appearance/settings/THEME page in the admin area of the site (replace THEME with the name of your default theme).
    2. Choose the favicon.ico file in the ‘Shortcut icon settings’ section of the theme configuration page and upload the file. (It’s possible to specify a path to store the favicon in the theme folder).
    Optimize Your Favicon


    Optimizing your favicon by making it cacheable can avoids frequent requests for it. So it is important to leverage browser caching by adding expire headers and utilizing cache-control. Another recommendation is to load your favicon from your CDN. YSlow also has a recommendation of trying to keep your favicon under 1 KB. If anything, just try to keep you favicon as small as possible. You can see below that our favicon on our test domain, perfmatters.io, is sitting right under the 1KB mark at 925 bytes.

    [​IMG]

    Leverage Browser Caching with Expires Headers


    Add Expires Headers in Apache by adding it to your .htaccess file. Note the line with the image/x-icon.

    ## EXPIRES CACHING ##
    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
    </IfModule>
    ## EXPIRES CACHING ##

    Add Expires headers to Nginx by adding to your server config. Note that the ico file type is included.

    server {
    listen 80;
    server_name example.com;

    location / {
    root /var/www/example;
    index index.html index.htm;
    }

    location ~* \.(jpg|jpeg|gif|ico|png)$ {
    expires 365d;
    }

    location ~* \.(pdf|css|html|js|swf)$ {
    expires 30d;
    }
    }

    Read our more in-depth post on how to leverage browser caching.

    Cache-Control


    You can also utilize cache-control. The following snippet can be added to your .htaccess file in Apache to tell the server to set the Cache-Control header’s max-age to 84600 seconds and to “public” for the listed files. Note that the ico file type is included.

    <filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=84600, public"
    </filesMatch>

    This following snippet can be added to your Nginx configuration file. The example below uses the Cache-Control header directives “public” and “no-transform” with an expire setting set to 2 days. Note that the ico file type is included.

    location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
    expires 2d;
    add_header Cache-Control "public, no-transform";
    }

    Read our more in-depth post on how to utilize cache-control.

    Load your Favicon Off Your CDN


    Another optimization you can make is to actually load your favicon off of your CDN. Even though this file is not requested on a regular basis and is very small, it can still be beneficial because when the browser goes to grab it, as it will do so from a closer POP.

    To load the favicon off of your CDN you can simply update the snippet in your header. Below is an example on our test domain. We are point to our favicon which resides on our CDN. By doing this you can also take advantage of cache-control and expires headers on the CDN edge servers and not have to worry about them on your origin server.

    <link rel="shortcut icon" href="//cdn.perfmatters.io/favicon.ico" type="image/x-icon" />

    And here is an example of what we are running on the KeyCDN site with a couple variations for icons and the apple touch icon.

    <link rel="shortcut icon" href="//cdn.keycdn.com/favicon.ico">
    <link rel="icon" sizes="16x16 32x32 64x64" href="//cdn.keycdn.com/favicon.ico">
    <link rel="apple-touch-icon" href="//cdn.keycdn.com/apple-touch-icon.png">

    If you are running on WordPress you can automatically copy it to your pull zone with our free WordPress CDN Enabler plugin.

    Summary


    As you can see the process of how to make a favicon is very easy and there are ways to optimize even the smallest of files. It is by no means the most important optimization you could make, but again, everything counts and adds up. And remember, if you add references for other devices, the browser or device won’t fetch it unless it is supported. So feel free to add additional icons to support a wider range of platforms without it hurting your performance.

    Have any other good favicon tricks or references? If so, feel free to share them below.

    Related Articles


    The post How to Make a Favicon Small and Cacheable appeared first on KeyCDN Blog.

    Continue reading...
     
Previous Thread Next Thread
Loading...

.