Where is the favicon? How to add a favicon for portable devices


Favicon – the English word favicon, translated as “icon for favorites” (short for FAVorites ICON), the site logo and one of the main parts of the web page, graphic picture with formats of 16x16 or 32x32 pixels (size must be as short as eight). For the favicon, the 16x16 format is used; other sizes will not be displayed by browsers. Displayed in top line browser, close to the site address. If you do not install the icon or do it incorrectly, then in the browser window you will see not the site logo, but the icon of the browser you are using.

Why do you need a favicon?

This drawing is not needed to “decorate” the browser. The presence or absence of a favicon on a web page is taken into account by Yandrex behavioral factor ranking. All favicons are shown by search engines, and the site looks more attractive in search results.

Example: At the user's request, Yandrex offered two or more identical web pages. One of them has a favicon, which attracted him more than the standard text. Thanks to the logo, he switched to viewing a site he liked more. If a reader adds such a site to a bookmark, the favicon will be displayed in a strip, so the person will not forget about such a page and the click-through rate will increase.

What should the favicon be and where should it be located?

For a good website, a favicon must be installed without fail. It is made in ICO format - this extension is supported by all browsers. You can make a picture yourself, using any photograph or image as a basis. You can use a graphic editor, you can choose the appropriate option on any of the many online services. The easiest way is to select a ready-made one by typing in search bar"favicon collection".

Please note: the image must be named favicon.ico. Collections often offer options with the gif extension, so download the picture and process it in special program Snagit – hover over image, click right click on the mouse, open using the Snagit application and save the image as - select the ico extension.

The favicon can be stored in any folder, but search engines and browsers look for logos at this address site/favicon.ico, so in order for the logo to be always accessible, it is recommended to save it in the root directory of the web page.

How to add a favicon to a website?

You can add a favicon to your site in 2 ways:
1. Rename the saved image with ico extension and size 16x16 pixels to favicon.ico.
2. Upload the icon to the main folder domains/your site/public_html/ or to your hosting control panel.

On some sites, to complete the installation of the favicon, you need to enter html code in the header file (header.php), between the tags.

After adding the code to your page, update or completely clear the cache of the browser you are using. If all actions were performed correctly, then after the app, the picture will be visible in the browser.

Don't expect your logo to show up instantly in search results. U search engines for favicons there is special robots who have been updating their database for several months, so the issuance of a favicon for your site in Yandex will begin to appear in at least two weeks, maximum in two months.

Let's start with a definition. A favicon is a small picture (size 16x16 or 32x32). In most cases, this is a small copy of the site’s logo, or the first letter of its name, or the first two letters of the name, or an abbreviation of the name, or a picture that reflects the theme of the site or the essence of the business.

Where are favicons displayed? Very simple:

  1. in browser tabs;
  1. V search results;

  1. in your browser's bookmarks bar.

The favicon performs the following functions:

  • Branding.
  • Makes it easier for the user to identify the site (a picture is always easier to remember than the site address).
  • Gives credibility to the site.

Now let's dwell on what exactly the use of favicons gives.

Brand recognition

From the previous screenshot, you already guessed that the user is much more likely to choose a site with an already familiar favicon, even if it is at the bottom of the TOP 10. It's about the same story with the history of the browser. For example, a user remembers the favicon of your site, but forgot what request they came to you from. What to do? That's right - go look at your browser history and scroll through it until that same favicon catches your eye. On this moment The most recognizable favicons in the world are those of Yandex, Google, Facebook, VKontakte, Odnoklassniki and Telegram. If the site does not have a favicon, then it will not be in the search results, and in the browser history there will be a “blank sheet” instead.

Many users judge sellers (and those who provide services) not only based on the information provided on the site, but also based on how the site is generally designed. And such a little thing as the absence of a favicon can be a good blow to the user’s trust, especially in cases where the user chooses between several online stores (or companies providing services of interest to the user).

Repeat visits

As you already know, people are much more “warmer” about pictures than about text. Now imagine that the visitor is in a hurry somewhere. What is he doing? That's right - bookmark the site so as not to lose it. Then, when the user has free time, he decides to return to the site and... In bookmarks, your site will be found not so much by the title of the article, but by a new/remembered favicon. If there is no favicon, the user may think that the link is broken and will remove it from their bookmarks.

That is why the favicon must be noticeable and recognizable. The most striking examples:

  • the letter G, which is the favicon of the Google search engine;

  • the poisonous red letter Y, which is the favicon of the Yandex search engine;

Saving user time

From the above example, one more conclusion can be drawn - favicons are necessary in order to make it easier for the user to identify a site in history/bookmarks.

What will be discussed in this paragraph applies to both PCs and mobile devices. Often links are stored not as bookmarks in the browser, but as shortcuts on a flash drive in some separate folder. At the same time, each of you knows that the name of the shortcut is not always fully displayed. And here, with the help of favicons, it becomes much easier to find what you need.

Please note that the world of smartphones does not stand still - once a smartphone with a screen of 640x360 pixels was considered a luxury, but today a screen of 1920x1080 pixels (with the same diagonal) will no longer surprise anyone. Only one conclusion can be drawn from this - under different resolution screen, it is necessary to make different favicons (or more precisely - different sizes.

Don't rush to get upset, because... Later we will talk about how this problem is solved.

SEO Benefits

We have already said earlier that if a site has a favicon, then it is also displayed in search results. We also said earlier that pictures are much more attractive to people than text. This leads to the simplest conclusion: on the search engine results page, sites with favicons attract more attention than sites without them. Consequently, click-through rates increase.

Please note in this context we're talking about about Yandex search results, because In Google, favicons are not displayed in search results. This is very important point, because Yandex is the most popular search engine in Russia and it is used by the majority of Russian-speaking users.

Moreover, Yandex even has its own robot, which does nothing but index favicons (by the way, indexing periods range from 1 week to 1 month).

How to check whether your favicon has been indexed or not:

  1. go to Yandex, enter the site address, and then look at the search results. If the favicon is indexed, it will be in the search results;
  2. check the presence of the favicon.ico file through Yandex.Webmaster.

Both methods are simple and do not take more than 15 seconds.

Well, since we talked about Yandex, let’s talk about Google. Here you already guessed that in the search engine Google results favicons are not displayed. Now comes the most interesting part. Google has been getting flack about this for a long time, and from ordinary users. Yes, yes, not from us - SEO people, but from you - from ordinary people, which to search engine optimization sites do not have the slightest relation, who make purchases, browse various sites, etc.

And there is no need to say now that “maybe they are not aware of the problem at all?” - still in the know! First, they openly admitted this mistake. Secondly, they bluntly said that “no, we will not fix this.” Thirdly, it was from their submission for Mozilla FireFox a plugin was released that automatically loaded site favicons into search results. The plugin is called Google Favicon. Fourthly, this was back in 2012. And since then, Google has not added favicons to search results.

Well, a few more words about Google plugin Favicon. Don’t even try to search for it and install it in your FireFox, because... it has not been updated for too long, and therefore is not compatible with latest versions FireFox browser. However, you can find similar plugins.

By the way, in many other search engines ah, favicons are also not added to the search results.

Favicons in PC browsers and smartphones

A second earlier, we already mentioned that favicons are not displayed in the search results of search engines (with the possible exception of Yandex). However, the same cannot be said about browsers, and this applies to both mobile browsers, and browsers for PC.

Now a few words about sizes. To ensure that the favicon is displayed correctly on all devices, it makes sense to use several different sizes (but generally it is either 16x16 or 32x32 pixels). In the vast majority of cases, the .ico graphic format is used for these purposes. Its main advantage is that you can add several pictures of different sizes, different quality and even different content to the same file.

And despite the fact that Google Chrome, Mozilla ForeFox, Opera (starting from version 7) and Apple Safari (starting from version 4) have long had support for favicons in the .png format; preference is still given to the .ico format. It is so important that if two favicons in both formats are uploaded to the same site, preference will be given to the .ico format.

How to make a favicon for a website

Method 1: use one of the special online services, fortunately there are many of them, to put it mildly:

  • FaviconGenerator - allows you to convert images from png, jpeg, jpg, gif into a favicon in the format you need.
  • AntiFavicon is interesting because it allows you to create a favicon with an inscription. Those. Text is entered into the “Top text” and “Bottom tex” fields, and the desired color scheme is set in the “Colors” area.
  • FavIcon from Pics is extremely simple - upload the desired picture into it, and as a result you get a favicon.
  • Iconj - the main feature is that your favicon will be stored on this service for life. Those. You upload an image to the service, convert it into a favicon, and then receive, firstly, the opportunity to download it, and secondly, a download link (if you currently cannot or do not want to download anything).
  • DeGraeve is one of the most powerful favicon generators. You can make a favicon from scratch, or upload a ready-made image, make adjustments, and then download it in .ico format.
  • Generator is almost a complete analogue of the previous one.

etc. We will not continue the list, because... even just a quick transfer without brief description will take up a lot of space.

But what to do when you still want a favicon, but don’t have the time/desire/opportunity to develop something of your own? It’s very simple - there are huge libraries of ready-made solutions. Download any one, in Photoshop (at least in Paint) change the size to 16x16, save c.ico or .png, give the file the name favicon and you’re done! If none of them suits you, it’s okay. The main thing is to remember that it doesn’t take a lot of brains to come up with a favicon. And just a few specific examples.

Obviously, creating such a favicon took 5-10 seconds, no more.

Example 2 - Comp Security blog. Here everything is even simpler, because... There is just a red arrow on the favicon.

Example 3 - blog StoKrat. As you can see, we have only one thing with MegaIndex fundamental difference- their favicon is square, and ours is oval.

Absolutely all three favicons are extremely simple, but at the same time extremely easy to remember, and therefore easily recognizable. Well, as a bonus, you really don’t need any artist skills to create them, because you can draw them yourself in Paint. And that's exactly what we'll do now.

Method 2 - draw yourself according to the “site initials” principle.

Step 1. Open Paint, click on “Resize”. In the window that opens, uncheck “Maintain proportions” and set the size. It doesn’t matter which one, the main thing is that the end result is a square.

Step 2. Select the Fill tool, select the desired color from the palette, and then fill the resulting square.

Step 3. Select the “Inscription” tool and write the “initials” of the site on the favicon. If necessary, you can change both the font itself and its size, and also make the “initials” underlined, italic and/or bold.

In our case, two dollar signs will act as “initials”.

IN in this case It is not at all necessary to save as .png, because the file will still need to be converted to .ico.

Step 5. To convert, we will use the service http://pr-cy.ru/favicon/ - upload the image, process it, download the finished icon.

We upload the downloaded file to the root directory of the site, go to the site and admire it. Everything is working!

Here is an example of a simple, memorable favicon, the creation of which does not require super skills or big brains.

Method 3 - use services that have built-in drawing tools, with the ability to upload images from a PC, edit and reduce them to the desired size.

Three examples will be more than enough (because there are too many of them):

  1. Favicon.ru - in short, with the help of this service you can do everything that was described in method 2.
  2. Favicon-generator.org - allows you to edit icons that have already been created by someone.
  3. Logaster.ru - actually, it is designed to generate logos, but in addition to the logo, it also generates favicons. Keep in mind, the service is paid.

Method 4 - favicon galleries.

The same thing - we won’t list everyone, because... there are very, very many of them.

Thefavicongallery - more than 300 favicons that can be downloaded immediately;

Audit4web - great amount favicons on various topics;

Iconj - more than 3000 favicons.

Method 5 - order from a designer. Expensive, but prestigious and beautiful.

Method 6 - similar to method 2, but using much cooler and more advanced graphic editors(eg Photoshop). This method will take quite a lot of time, but the result will not be as simple as in the second method.

Method 7 - use special plugins for your site. The method is similar to visiting galleries, however, it also has a right to exist. This is especially true for sites on WordPress and Joomla. It is worth noting that for WordPress and Joomla there are very useful plugins that different pages display different favicons.

How to install a favicon on a website

To begin with, it is worth noting that if you used method 7, then this issue should not worry you, because the plugin is just a plugin to relieve the site owner from such tasks.

If we are talking about manual loading favicons, then everything is a little more complicated.

First, the file name should be favicon.ico or favicon.png. This file must be uploaded to the root directory of your site (usually the htdocs or public_htm folder). Then go to your website and see whether the favicon has loaded or not. If not, try clearing your browser cache. If even after cleaning there is no result, it’s okay.

Secondly, on some sites the default location for the favicon is set elsewhere. In this case, go to the site, right-click - select the item “View html code”, or “View page code” (or something similar, in different browsers differently).

The following option for specifying a service hyperlink link cannot be ruled out:

So, we have calculated the path where we need to load the favicon and upload it there. Now this should work 100%. You can download in different ways:

  • through the admin panel of the hosting provider;
  • With using Total Commander via FTP;
  • through file manager the engine itself (if any).

In case of CMS Joomla The favicon, as a rule, lives in the folder with the currently activated design template. The exception is Joomla 1.5 - there the path was written in the index.php file, located in the folder with the same template. Those. in the case of Joomla, you will need to go to /templates/folder_with_design_template_used/favicon.ico and replace the favicon there.

A similar situation happens with WordPress sites, but this is rare:

/wp-content/themes/Folder_with_theme_you_are_using/favicon.ico

However, there is another option - upload the favicon anywhere, and then between the tags write the code indicating the path to the favicon:

In this case, both browsers and search robot Yandex will unmistakably find the favicon, which means that it will not go unnoticed by users.

Which file contains the tags? - directly depends on the engine you use.

For example, in WordPress this is the header.php file, located in the folder with the active theme: wp-content/themes/Folder_with_your_theme. The header.php file can be edited either via FTP or staff editor WordPress, and through the admin panel of the hosting provider.

Installing an animated favicon

There are no fundamental differences between installing a static and an animated favicon, with the exception of two points:

  • The favicon should be in GIF format (this is special format for image animation);
  • between And another code is written:

However, it is worth noting that an animated favicon is not as great as it seems at first glance:

  • firstly, there will be no animations in the search results - Yandex will convert the gif animation into a static png, and you can only pray that Yandex takes the correct frame for these purposes;
  • secondly, the animated favicon will only work in FireFox.

It is for these two reasons that there is no point in bothering with animated favicons yet. If only “for the future.”

conclusions

So, what did we find out?

  1. a favicon can play a big role in identifying a site;
  2. it is the favicon that often allows you to remember the site;
  3. a favicon greatly simplifies the search for a specific site in bookmarks, browser history and in Yandex search results;
  4. you can easily create a favicon “at home on your knee”;
  5. There are a lot of services for creating, editing and selecting ready-made favicons.

The Internet is being rebuilt for mobile networks, browsers are gaining new capabilities - all this has led to the fact that today the concept of favicon has expanded significantly. In this material we will look at all the innovations and advantages that creating and installing an icon for your website provides.

Standard method

Modern browsers They look for the favicon themselves, so sometimes you can even do without html code. It is enough to upload favicon.ico to the root of the site so that it is available at https://yoursite/favicon.ico

But for reliability, you can add such a tag to the site code (between )


This is the traditional method, which is responsible for displaying the icon in the browser tab and in Yandex search results.

Extended favicon

But the capabilities of the site icon are used in many more places today:

favicon generator

Most of it can be done using just one online icon generator - https://realfavicongenerator.net

The minimum acceptable image for upload is 70x70 pixels, but if you want to use it for all possible cases, then upload a size larger than 256x256.

Afterwards, you can see how your favicon will look in iOS, Android and tiled Windows 8, and at the same time change the settings for each case: set an individual image, change the background color, scale the icon.

In the options, leave everything as it is: by default, the generator will create images that will need to be placed exactly in the root of the site (usually on hosting sites the directories /home/, /www/, /public_html/ are called the root of the site).

In the “Compression” tab, you can reduce the weight of the icons (compression occurs in the region of 20-80%, depending on the quality).

Click Generate and get an archive as an output, the contents of which are loaded into the location already mentioned above, and the code that is inserted into site.

After adding them to the site, you can check their functionality using the same service.

Picture on social networks

They work on a similar principle, but the main catch is that if you use a CMS, you can look for plugins that will automatically provide each article with its unique preview image (if there is one). But if there is no CMS, or there is no suitable plugin for it, then you will have to use one placeholder image for all posts.

WordPress and Facebook (using post previews)

If you use the WordPressSEObyYoast plugin, then just go to the “ Social media» → “Facebook” and activate the “Add Open Graph” item.

In all other cases, we do the following:

  1. Open the header.php file of your theme.
  2. The very first tag change to
  3. In the head section we paste the code:

$dom = simplexml_load_string(get_the_post_thumbnail());
$src = $dom->attributes()->src;
echo "content="".$src.""";
?>/>

WordPress and VKontakte

In functions.php add the function:

function vk_meta() (
if (has_post_thumbnail())
{
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(600,600));
$url = $thumb["0"];
echo " " . "\n";
}
}
add_action("wp_head", "vk_meta");

General image for all materials

If such a solution has not been found, or you simply do not like adding previews to site materials, then there is only one way out: make one image for all.

To make social networks pick up the picture, add the following code to the head section:

Accepted formats are .jpg and .png.

Conclusion

Whether you only need a standard favicon or you intend to use its advantages to the maximum, if you already have a ready-made logo, then turning it into an icon for the site is a matter of a couple of minutes. Thanks to online generators for this. As a result, adding a few lines of code and uploading a couple of files is all that is required.

Hello, colleagues, today I hasten to invite you to a lesson, because I have prepared valuable information for you. I myself learned this from professionals, and did not collect, as many do, various information on the Internet.

Therefore, if you are interested in the question “how to add a favicon to your WordPress site?” according to all the rules, sit down and repeat.

I wrote down all the steps in detail.

Favicon- this is a small icon that is displayed in the title of the browser tab and in the search results (with a time delay!) next to the title of your article. If suddenly, after adding an icon to the site, it is not displayed, do not rush to get upset, in this article I will write about the reasons.

We will need help from the favicon-generator.org service. Now we will make a favicon online, but remember that any image from which you want to make a favicon.ico must be square. It can be 375 by 375 pixels, or 410 by 410, or any other size, the most important thing is that the width must be equal to the length.

Let's go to the service and create a favicon. So, once you have passed, we need to do following settings.



Namely, we put a dot in front of “Generate only 16×16 favicon.ico”. After that, click “Browse” and select the file that you prepared. Next, click on the “Great Favicon” button.

Our favicon has been generated. Let's download it, the link is shown in the screenshot, and also copy the code that the service provided us.


After that, go to our file manager, connect to remote server and open the folder with the active theme.

Upload the favicon there and open the header.php file for editing. Further between tags …… paste the generated code. But that is not all. In order for the favicon to be displayed correctly, we need to insert one php function into this path.


Copy this function: and, back in the file header.php, insert this function. Please note that it must be inserted before the quotes and before the slash:
/favicon.ico" type="image/x-ic on">

Now let’s admire the result obtained by first entering the site name in the browser. Our picture appeared next to the site address.

It will take some time for the favicon to be displayed as a search result. You will have to wait until search robots index your site.

Create a favicon in Photoshop

If you know how to draw or know an artist, your favicon can be as original and unique as your imagination allows.

In the first step, create a new layer that is 16 pixels long and wide. A large number of pictures in png format can be found on the Internet, but it’s better to draw your own - unique. Place the found image on top of the created layer, and on the bottom layer you can apply a texture, gradient, or simply fill it with color so that it does not fall out of the overall color scheme of the blog design.


Is it worth putting your photo as an icon?

Would you like to know my opinion on this issue? I’ll tell you that I don’t like this idea. The favicon is so small that your photo looks downright ugly. Again, I repeat, this is my opinion, but for some, such a photograph is an irreplaceable brand effect. You must save the finished image with the ico extension.

What other methods are there?

There is a lot of information and many resources on the Internet that give you the opportunity to make a mini-picture from an image, but you shouldn’t get stuck on this issue for long. We drew a picture, added it to the theme folder, wrote down the path and forgot about it. There is still so much work ahead of us! Blogging is no joke!


While writing this article for you, a letter arrived in my mailbox. Now I will copy it and show it to you. And the content is: “At the moment, how much do you earn from the name of your site?)
and as far as I understand, he’s not the only one with you) So I want a website, but I don’t know which one to create ((I’ve already become familiar with affiliate programs and I’m thinking of starting to create a gaming blog, tell me how to do this so as not to burn out).”

If you have similar questions, I advise you to subscribe to my blog and absorb all the information that I will give. Why do I say with confidence that it is better to study with me?

Firstly, I have experience, even if not always good (bad experience gives more knowledge and helps not to repeat mistakes), secondly, I consider all the information that I provide for you to be the best, because I learn from those who do not the first year of blogging, those who have really achieved high levels of both traffic and profit from the blog.

Pay attention to my article on compiling, or better (if you are at the very beginning of your journey) about. Even if you have a blog about games, no one forbids you to register with spa affiliate programs. I have a ready-made list of such affiliate programs on this one.
I gave you all the most important things on the topic, and now, according to tradition, an anecdote for mood and optimism! .

Joke.
— What favicon did you choose for your blog?
- Cockroach!
-Are you crazy or something? It will scare away visitors!
- What, on the contrary, are you attracting! They haven't seen them for so long!

ICO format and other graphic icon formats. Installing a favicon on a website with support for iOS, Android and other devices, as well as new HTML5 products. Step-by-step instructions, from simple to complex, accessible and clear, for novice webmasters.

You've probably already heard something about the format ICO and an icon for the site favicon, but nothing stands still and something new is constantly appearing. I decided to write this article in order not only to summarize things known to everyone, but also to supplement them with new items.

So you will learn about some secrets of the ICO format, problems with Internet Explorer and their elimination, and new favicon graphic formats (transparent and animated), HTML5 standards and icons for mobile devices for iOS and Android, and much more.

  • ICO format
  • File favicon.ico
  • BugFix for Internet Explorer
  • Favicon in HTML5
    • Favicon for Apple
    • Favicon for Android
  • favicon.ico file address

ICO format

Let me start with the fact that the format ICO(Windows icon) was developed by Microsoft for file icons. It is similar to the format CUR(Windows cursors) and is closest to BMP. The only difference is in the headings, as well as the presence of a mask, which allows you to create transparency in the drawings. However alpha channel (translucency) for 32-bit icons appeared only in Windows XP.

File favicon.ico

File idea favicon.ico (picture 16x16 pixels) also belongs to Microsoft, which they implemented for bookmarks in Internet Explorer 5. Hence the name fav- short for favorite - favorites, and icon - icon. At the moment, this format is supported by all popular browsers, but the main thing is in the details. Conditionally generalized version Installing a favicon on a website looks like this:

Please note that in the above example two relations are used: shortcut (from English. label) and icon (from English. icon). The trick is that shortcat is redundant here and was left only for older versions of Internet Explorer, but it must come before icon .

image/vnd.microsoft.icon vs image/x-icon?

It is also interesting that in 2003 the format ICO was registered Simon Butcher(Simon Butcher) in IANA and its MIME type became image/vnd.microsoft.icon. The problem is that older versions of Internet Explorer can't interpret it correctly, so it's better to use the old image/x-icon .

BugFix for Internet Explorer

Don’t forget that for Internet Explorer you can use HTML crutches based on comments, for example:



Other graphic formats favicon

However, now the integration of other graphic formats is actively gaining momentum: PNG, GIF, JPEG, APNG and SVG. The situation is best with static formats PNG And GIF, they are supported by all new versions of popular browsers. Animated APNG only works in Firefox (since version 3.0) and Opera (starting from version 9.5), and here is the animated one GIF Only IE and Safari don't understand. JPEG Only Internet Explorer does not support.

I will give several correct examples of inserting favicons in appropriate formats onto a website:





I draw your attention to the fact that for APNG uses the video/png MIME type, and for GIF (even animated)- image/gif. Also interesting here is the MIME type for SVG format, this is image/svg+xml .

Favicon in HTML5

Now, regarding the favicon format HTML5, read more. The interesting thing here is the sizes attribute, which sets the size of the icons for visual display in the format:

(width1) x (height1) [(widthN) x (heightN)] | any

In other words, you can list the corresponding sizes separated by spaces or specify the value any (for all). The HTML5 documentation gives this example:





Favicon.ico for mobile browsers

The problem is that the sizes attribute is not currently supported by any of the popular browsers. The situation is somewhat different with mobile browsers.

Favicon for Apple




If the sizes attribute is not specified, the default value is used 57x57.

It is also noteworthy that how favicon.ico serves as an automatically recognized icon for the site, without indicating a connection, the following names will be recognized automatically:

  • apple-touch-icon-57×57.png
  • apple-touch-icon-72×72.png
  • apple-touch-icon-114×114.png
  • apple-touch-icon-144×144.png

If you want iOS not to add any effects, use the precomposed keyword, for example:




There is also a set of automatically recognized names here:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-72×72-precomposed.png
  • apple-touch-icon-114×114-precomposed.png
  • apple-touch-icon-144×144-precomposed.png

Favicon for Android

Browsers based Android inherited the Apple format. Essentially, it will be enough to specify something like the following:


favicon.ico file address

You probably noticed that in some examples a relative rather than a favicon is used? This is not accidental, because In addition to HTTP, HTTPS is now gaining momentum. To avoid problems, it is easier not to specify the protocol in an absolute address, for example:

or use a relative path.

How to install a favicon icon on a website?

Well, now let's try to form a generalized version of inserting a favicon website, I got it like this:







I will try to clarify the proposed design. At the beginning there is a favicon for Internet Explorer, which will respond to shortcut. Further, the optimal one will be static PNG icon with transparency, and icon animation I gave GIF format. We will create icons of standard size for mobile devices 57x57 pixels, one without effects, and the other with its own effects (precomposed - will disable browser effects). In order to avoid problems with HTTP and HTTPS, I specified relative path, starting from the site root (/ - at the beginning of the address), but for IE it's probably better to use an absolute path.

That's all I have. I hope that the article was useful to you. If you can make any corrections, additions, clarifications, etc. - write. Thank you for your attention. Good luck!


2024 gtavrl.ru.