Create and Integrate Favicon

Create and Integrate Favicon

In this tutorial, we’ll explain how to create and integrate a favicon. With tips on formats, sizes, HTML code, and implementation with Photoshop, Illustrator, and Co.

What is a Favicon?

Create and Integrate Favicon

favicon is a small icon that appears in the address bar of the browser or open tabs. This icon also appears in the Favorites menu or the bookmark bar in front of the corresponding entry. Favicons can thus contribute to the recognition value of the website. They also provide space for logos, signets, and other designs to attract more attention.

Origin and history of the Favicon

Incidentally, the Favicon was created during the “browser fight” in 1999. The largest manufacturers at the time came up with more and more features for their browsers Netscape Navigator and Microsoft Internet Explorer to stand out from the competition.

Bharat Shyam, who was a developer at Microsoft at the time, was very active in tinkering with new functions. Shyam considers the inventor of the Favicon. In March 1999, Bharat made it possible for Internet Explorer to place a 16 x 16 px icon in front of the address bar to better distinguish websites from each other. The file with the name only had to be in the root directory to be recognized by Internet Explorer 5. In December, the World Wide Web Consortium favicon in the recommendations for HTML 4.01.

Include Favicon in HTML

Classic Method

Much time has passed since the invention of Bharat Shyam. An “all-in-one solution,” for example, in the form of a single SVG file, would be desirable – but it does not exist. What remains, however, is. Browsers such as Chrome, Firefox, Safari, IE, etc still support the original file.

So the classic method for desktop browsers is as follows:

<link rel="shortcut icon" href="/favicon.ico">

We insert this line in the corresponding website. The <head> MIME-Type type=”image/x-icon” can be supplemented for the sake of form.

Include Favicon in HTML

Basically, the .ico format is just a container in which multiple images can be stored. In this way, we can contain multiple sizes such as 16 x 16 or 32 x 32 px at the same time. For a sharp display, it is recommended to create the file in 32 x 32 pixels.

PNG Format

Modern browsers can reduce the size to the standard format of 16 x 16 px, but sometimes have problems choosing the appropriate format in the container. To work around this, you can also create the favicon in PNG format.

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Touch Icon

Touch Icon

However, Safari on iOS requires a touch icon. If you want to create and integrate a favicon for this, you need a PNG graphic in the format 180 x 180 px.

It should also be noted that the corners of the corresponding symbol are automatically rounded off as soon as the symbol appears on the home screen.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

For pinned tabs, iOS also has the option of integrating and displaying a created favicon. For this purpose, we can use a scalable SVG file with an aspect ratio of 1:1. The syntax is as follows:

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff">

Devices running Android/Chrome also assume a larger favicon. The file to be created should be 192 x 192 px in size and saved as a PNG file. Since Android Web App Manifest integration is carried out via a small detour:

<link rel="manifest" href="/icons/site.webmanifest">

You should create the contents of this file separately and then contain the links to the corresponding favicons:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#fff",
    "background_color": "#fff",
    "display": "standalone"
}

Theme color & Background Color

You can experiment with colors to underlay the surfaces, for example. Transparency in the corresponding PNG files is also supported.theme_color background_color

theme_color used as a separate meta tag to specify the background color of the icon on the home screen (useful for transparent PNG graphics):

<meta name="theme-color" content="#fff">

There’s also a special feature of the latest Internet Explorer and Microsoft Edge. The favicons can be integrated via an XML file. Thus, a targeted appearance for Metro UI Set. So if you prefer to have more influence on tile representation and the like, you can do the following:

<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-config" content="/IEconfig.xml">

Microsoft describes how the content of the XML file can be designed in terms of content in detailed Documentation on browser configuration.

The complete code for integrating favicons, with which you can be “on the safe side”.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#fff">
<meta name="msapplication-TileColor" content="#fff">
<meta name="msapplication-config" content="/IEconfig.xml">
<meta name="theme-color" content="#fff">

These lines already cover many contingencies in advance. Depending on your needs and orientation, one or the other integration can of course be dispensed with.

Create favicons with Photoshop

Of course, you can also use Photoshop to create .ico files, which can then be used as favicons. However, since image editing cannot store files in .ico format, there is a remedy in the form of a plugin. This has been on the hump for a few years, but can also be used with a trick for current Photoshop CC versions.

Install Photoshop plugin for .ico files

  • Download the ICO (Windows Icon) plugin from the website telegraphics.com.au/sw/.
  • Create a new folder named File Formats.
  • Copy the plugin file (starting with “ICOFormat”) to this folder.
  • Copy the folder to Photoshop’s plugin folder (under “Programs -> Adobe -> Adobe Photoshop 2020 -> Plug-ins” or “Applications -> Adobe Photoshop 2020/Adobe Photoshop 2020.app/Contents/Required/Plug-Ins”).
  • The plugin is now installed.

Create ico file for Favicon with Photoshop

Since favicons are square, it is a good place to create the largest possible format to be included in HTML. This file can be shrunk for the other icons to be created as part of the Favicon integration. For example, this can be 16 x 16, 32 x 32, 64 x 64 (desktop) or 512 x 512 pixels (Android).

  • Create a new file
  • Choose width and height according to the maximum icon size
  • Be sure to adhere to the square format
  • Color Mode: RGB
  • Resolution: 72 px
  • Use “Save As” as . ICO file or . Save PNG File

If necessary, you can also create a new layer and convert it to a smart object using the Layers window. Then you can treat the contents of this layer similarly to a group and scale it to a certain extent or use it beyond the margin.

Create a favicon with Illustrator

Create a favicon with Illustrator

Creating favicons in Illustrator is similar to the process in Photoshop. However, there is no .ico extension available in the software. The detour via a Favicon Generator or converter does not stay out of this if a standard .ico file is to be included.

  • Create a new file in square
  • Select RGB mode
  • Set raster effects to Screen (72ppi)
  • Set square format
  • Save as in PNG-8 or SVG format (for Favicon Generator) if necessary

Favicon generators and converters

Also helpful are so-called Favicon generators as well as corresponding converters, with which Favicon files can be created and generated automatically. Here’s an overview of some common tools.

Real Favicon Generator

With this Favicon Generator, you can create favorite icons for many types of browsers and platforms. For example, it is sufficient to upload an image in the PNG, JPG, or SVG image. The generator then automatically creates the appropriate files to include on the website. For best results, use a format of 260 x 260 px. Also helpful is the preview, which shows how the icons come over on the different systems.

IONOS Favicon Generator

The IONOS Favicon Generator offers both options in one tool. This means that you can not only draw your own favicons online. It is also possible to generate a whole range of symbols via image upload. The tool delivers 22 Favicon files in different sizes at the touch of a button.

favicon.io

favicon.io

The Favicon generators on favicon.io offer various ways to create a favicon. PNG to ICO converts PNG files into icons. “TEXT to ICO”, as the name suggests, creates favicons from the text.

Arinjay Shekhar Favicons

Arinjay Shekhar also has graphic favicons. There are 40 stylish favicons to download from the website. Among them are letters from A to Z, digits as well as some other symbols in PNG and PSD format. The download is available under the Creative Commons Attribution 4.0 International License under the “Pay-What-You-Want” principle.

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.