Where is the favicon written? Resources for creating favicons


In this article we will talk about favicon. Using this icon is becoming more and more popular and if you want your resource to be modern and optimized for search engines and the Internet in general, then it must have a favicon.

What is a favicon

Favicon(or favicon) is a special icon that is used to display in some browser elements. Each individual web resource has (or should have) its own separate favicon, which, for example, can be seen next to the site address in the title of the browser tab, in search results and in the list of favorite sites. It is precisely because of this use as a symbol for a bookmark that the name of this icon was born - FAVourite ICON, that is, an icon for favorites, since initially the favicon was used only for this.
Currently, a favicon is, firstly, a mini-symbol of a site that increases the recognition of the resource; secondly, its presence has a positive effect on the site’s position in search results.

How to create a favicon

If speak about technical specifications, That standard size for favicon - 16 x 16 pixels; It is also possible to use an image measuring 32 x 32 pixels and very rarely 48 x 48. The original format of this sign was ico, but now latest versions browsers also support displaying favicons in png, gif and jpeg formats. Another type of favicon is gaining popularity - animated (or dynamic). In this case, it will not be a static picture, but a changing file in gif format. When choosing this format, keep in mind that this moment its output is supported only by two browsers: Firefox and Opera, and other browsers will only show the first frame.

An important point when creating a favicon is choosing a sign that will be associated by users with your site. As original image you can use a company logo, a recognizable emblem, a combination of letters, or just any suitable image.

To create a favicon, any graphics program, including Paint: all you need to do is resize the image to 16 x 16 (or 32 x 32) pixels and save in one of the formats listed above.

also in creating a favicon Numerous Internet resources can help you, where you can not only transform the image selected for the favicon, but also draw this icon yourself, and also select an ready file from those proposed.

Resources for creating favicons:

  • http://www.xiconeditor.com/ - you can upload an image and then edit it or draw a favicon from scratch, many settings will allow you to realize any creative desires;
  • http://www.favicon.cc/ - a simpler editor for creating favicons; on this resource you will also find a collection of various icons that can be sorted by tags or name;
  • http://antifavicon.com/ - an editor for those who want to use a favicon in the form of individual letters or words instead of a picture.

In order to get an image in ico format, you just need to save the file with the name favicon.ico - you can immediately assign this extension to the file when saving or rename the file after.

How to upload a favicon to a website

Once you have a favicon.ico file with the image you need, you should proceed to uploading this icon to your site. This is not difficult to do - just upload the file to the root folder of your site using an FTP client, and web browsers that support favicon display will automatically find it.

If you want to place favicon.ico in any other folder, you should write the path to this file inside the container :

It is not necessary to specify the type, but in the future this information will be needed to configure caching.

If you are using CMS Wordpress:
you can do as written above, or use the special plugin Favicon by RealFaviconGenerator. Also take a look at the official Wordpress documentation regarding favicons: https://codex.wordpress.org/Creating_a_Favicon

If you are using CMS Joomla:
you need to upload the file to /joomla/templates/ directory<ваш шаблон>. You can find the official documentation in this section: https://docs.joomla.org/Changing_the_site_favicon

How to optimize favicon

Use caching - write the appropriate line in the .htaccess file:

ExpiresByType image/x-icon "access 1 year"

Don't forget about Nginx: check that the type ico file included in the enumeration in the web server configuration file:

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

How to add a favicon for portable devices

With the development of technology, icons began to be used not only in desktop browsers, but also when displaying information on iOS and Android devices. Typically, these icons are also used as desktop shortcuts. Each of them has its own requirements for a suitable image.

The choice of favicon for an Android device depends on the PPI (pixels per inch) indicator; This is important to consider as it may cause the same image to look different on different screens. various parameters PPI. The general table indicating the density coefficient and the corresponding favicon size is as follows:

As for the format, the images must be in png format.

Unlike Android, the size of icons for iOS devices depends on the availability of Retina and the version operating system. In the table it looks like this:

In order to create a favicon for everyone possible formats and devices, you can use special service: https://realfavicongenerator.net/.

This online generator allows you to edit the icon for each device, while you can view the resulting result in the device interface.

First, you need to choose an image that will form the basis of your favicon. It does not have to be square, but this format is preferable. Otherwise, you can fill the empty edges of the image with some color (for iOS) or leave them transparent (for Android). RealFaviconGenerator also creates icons for other platforms (Windows 8 and 10).

Once you have created the images you need, you just need to download the archive with the resulting images, upload them to the root folder of your site and add the generated HTML code to the container .

After this, check the presence of all the necessary icons by entering the address of your site in the appropriate line on home page RealFaviconGenerator.

Now your site has all the necessary favicons, thanks to which your resource will stand out from the rest, regardless of what device the user accessed it from, and will become well recognizable.

Favicon is short for "favorite icon" (translated from in English). The name comes from the list of bookmarks in Internet Explorer, which is called "Favorites"/"Favorites List". When you add a site to your bookmarks, Explorer (version 5 and higher) contacts the server with a request to see if the resource has a favicon.ico file. If such a file exists, it will be used to provide the icon that appears next to the text bookmark.

Other browsers (eg Mozilla) also have support for favicons. Depending on your search program, this icon may appear in a variety of places other than your bookmarks list (in fact, it may not even appear there). It appears in the browser tab title.

Browser tab icons

Most users tend to have a lot open tabs in the browser window. As the number of tabs increases, the Favicon is hidden to help the user identify the link and quickly switch to the tab that needs to be opened.

In addition, if the user wants to add their favorite site to the desktop on a mobile device, the icon will also be used. Therefore, you always need to decide on the choice of design before installing a favicon. This site icon is displayed as an application icon on the desktop of a tablet or smartphone.

How to create a favicon?

To create a favicon.ico, you simply save a 16x16 PNG file and convert it to a resource icon with png2ico. At your own discretion, you can add various images into the same icon to provide alternative solutions. Most browsers only use the 16x16 format for such an image, but in a different context (for example, when dragging a URL from address bar desktop) a large icon can be displayed in the picture. If the resource icon only contains 16x16 images, it will be scaled to the right size, so technically there is absolutely no need to add alternative solutions. However, it may improve image quality. Before installing a favicon on your site, be sure to look at what the image looks like in different sizes.

Please be aware that for a user with a slow internet connection, a favicon may add a few seconds to the page loading time. This is possible if the image file is too large, so don't overdo it. Adding a 32x32 alternative should be enough to make the image look good even in situations with large icons. Using more options are bonuses performed only at the request of the site developer. Try to keep the number of colors to 16 and create a 16 color icon using png2ico (or even a black and white icon). This will save a smaller file that loads faster.

When creating an image to add to favicon.ico, do not forget that icons can be displayed on different background color. For this reason, it is better to use transparency rather than a solid background. Think carefully about how to install the favicon most competently so that it blends in with any background. It is worth noting that you can install intermediate values, which are measured as percentages. Experts say that the ideal setting is approximately 30-40% background transparency.

You can use your brand logo, resource theme symbol, or favorite image to make your custom site icon. The recommended size for a favicon is at least 512 pixels in width and height. The image should be square, but large rectangular pictures can be used. Many engines will allow you to crop the image when you add it (so you don't have to worry about how to set the favicon to SMF as a large image).

Creating an icon using Photoshop

Experts recommend using, for example, Adobe Photoshop or GIMP. This will create a site icon exactly 512x512 pixels. This way you can maintain the exact proportions of the picture, use transparent images or fill the background of your choice. This picture can be in JPEG or GIF. After this, you need to determine how to install a favicon on the site.

Why do you need to add it to the site?

As already noted, a favicon is a small icon that appears next to the name of a site in the browser. It helps users identify the link, and more frequent visitors to your site will instantly identify that small image. This increases brand awareness and helps build trust among the audience. Thus, a favicon defines the “personality” of your site. Moreover, it also improves the usability and user experience of the website.

How to install a favicon on an html website

To add your new favicon to a web page, you should install it on the server in the same folder where the web page is located (for example, www.example.com/foo/favicon.ico for www.example.com/foo/index. html). This is the data that any browser will first look for to download. If it doesn't find the icon, it will check the directory top level server (www.example.com/favicon.ico for www.example.com on the server). For this reason, if you set it there, you can have a default icon for all pages on your domain. Depending on the browser and configuration, the favicon may not always be displayed, even if it is in one of the above locations and the web page can see it.

In order to register the presence of a favicon in the page code, you can add the following 2 lines in the section :

< link rel="icon" href ="favicon.ico" type= "image/x-icon" >
< link rel="shortcut icon" href ="favicon.ico" typ e="image/x-icon" >

How to Add a Favicon to a WordPress Blog

If you are wondering how to install a favicon in Direct, there is nothing complicated here either. The interface has corresponding menu items that will allow you to select and upload an image.

How to Add a Favicon in WordPress

Beginning with WordPress versions 4.3 you can add a favicon to the site from the admin area. Simply go to View/Settings and select the Site tab.

The Site ID section of the customizer allows you to change the resource name and description. Before exiting the menu, you will always be asked if you really want to display the new data in the header. It also allows you to upload your own icon for the site. Just click on the "Select File" button and upload the image you want to use as a favicon.

Adding a favicon to your blog

Further instructions are as follows. If the image you upload is larger than the recommended size, then WordPress will allow you to crop it. If it meets the recommended parameters, you can simply save the changes. It is worth noting that the instructions on how to install a favicon on a Joomla website look similar.

After that, when you browse the site, you will see your favicon in action. You can also access the site from mobile device, and then select “Download” from the browser menu full version" You will notice that the icon will appear as if it were on a full-fledged computer desktop.

How to Install a Favicon on Old WordPress (4.2 or Below)

Upload your favicon to the root directory of your site. After that, you can simply paste this code into the header.php file the desired topic.

< link rel="icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >

< link rel="shortcut icon" href ="http://www.example. com/favicon.png" type= "image/x-icon" >

Replace wpbeginner.com with your site's URL and you'll be done. If the blog does not have a header.php file or you cannot find it, then use a special plugin. Install and activate it in the site settings. After activating the plugin, go to Settings, find the Insert Headers and Footers option, go to the Insert Code tab in the header section above, and save the settings.

If you don’t want to deal with the intricacies of working with FTP, but are still interested in how to install a favicon, you can also use a special plugin that regulates icon loading at all stages. Such engine additions are available not only for WordPress, but also for others popular systems, including for Joomla.

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.

And where can I download ready-made icons for the ico website. I hope you have already chosen a suitable picture for yourself? If not, then in the next article I will tell you, using online generators. Do not miss. Today we’ll talk about how to install a favicon on a website or replace it if you don’t like it. This procedure is the same for any web resource, but I will show the entire installation process on CMS example WordPress.

When choosing or creating an icon, make sure it is unique and eye-catching. You haven’t forgotten that in Yandex search results the favicon is shown next to your site. An original favicon can increase the number of transitions to the site, which is good news.

How to Install a Favicon on WordPress

When installing icons for a site, three scenarios are possible:

  1. from the WordPress blog admin using the template settings;
  2. normal installation without a plugin;
  3. using a plugin.

Inserting a favicon on the blog from the admin panel

This is the easiest way. Many premium WordPress templates have the ability to set logos and icons. To do this, go to the theme settings, select required file on your computer and click “Download”. Save the changes and admire the result. In my theme you can upload images in png or gif format measuring 16x16.

Installing a favicon on a website without a plugin

Let's say that we already have a ready-made favicon. This can be a picture with any name in GIF, JPEG, PNG or BMP formats. However, let me remind you that it is best if it is an image file in .ICO format with a size of 16x16 pixels favicon.ico. Rename if this is not the case for you.

Adding a Favicon to your website is very easy. You just need to copy it to the root directory of the site via FTP. On WordPress this is the public_html folder (where robots.txt was installed). How to upload files to hosting using FileZilla FTP client, we read.

Basically, you don't have to do anything else. Modern browsers will find the icon themselves if it is located in the root folder of the blog. But we want our icon to be displayed in search results. Therefore, it will be better if you point the path to the favicon.ico file to a special Yandex robot. To do this, in the html code of the blog pages between the tags you need to write the following code:

IN in this example the file is located at the root of the site, and its address is written as a relative link. If you uploaded the picture to another folder, then indicate the full path to it in href attribute. If the picture is not in .ico format, please indicate this in type attribute, replacing x-icon with the desired format.

Many people advise inserting both lines, but I think this is unnecessary and I advise you to write only top line. Let me explain, for Internet Explorer we write the value “shortcut icon”, other browsers understand “icon”, which is already included in this value.

How to code favicon for WordPress:

  • Let's go to the admin panel Appearance” - “Editor“.
  • Open the header.php file.
  • Paste the code before the closing tag .
  • Click “Update file”.

How to change the site icon

If the site already has a favicon installed, but you want to replace it with another, then simply open the root folder of the blog via FTP and change existing file to a new one with the same name and format.

If the picture is located in a different place, then do the following:

  • Open the site page code in the browser (Ctrl+U).
  • We are looking for the line where the favicon address is written.
  • We replace the file at the specified address.

Why is the favicon not showing?

If the favicon is not displayed in the browser after installation or replacement, you need to:

  • restart the browser;
  • update cache;
  • check that the path to the site icon is correct.

The favicon will appear in Yandex search results only after the site is visited special robot. After this, the favicon is converted to PNG format and is added to the Yandex server at http://favicon.yandex.. To see the icon of your site, replace my domain name with yours. It happens that Yandex does not display an icon in the search results for a long time. You need to wait and if the icon does not appear after a month, you can ask technical support.

Easy Favicons – Wordpress plugin for installing favicons

I think that using a plugin to install favicon on WordPress is unnecessary. However, there is such an opportunity for the especially lazy. There are many similar plugins, but I will show you one that I once used. It is called Easy Favicons. You can download it from .

Install and activate the plugin (). Open the settings page in the admin panel.

As you can see above, it is possible to install a favicon in three ways:

  1. use your Gravatar;
  2. indicate the path to the picture;
  3. select an icon for the site from the installed set.

That's it. Now, I hope, it’s clear how to install a favicon on a website. Whatever method you choose, remember that any popular site must have its own recognizable icon. In addition, it can be updated periodically. For example, during some interesting events or holidays. Imagine if under New Year a person in a search will come across your blog with a picture of Santa Claus. This can once again attract the user’s attention and force him to choose your resource.

Well, I wanted it to be shorter, but it turned out as always. How did you install the favicon on your website?

Hi all! In this article, you will learn what a favicon is, what it is for, how to create one, and how to install a favicon on a website. As they say, it’s a small thing, but it’s nice.

What is a favicon and what is it for?

A favicon is an icon of our website, which is visible in the browser tab and is shown in the snippet (in the search results) of some search engines. It's like the logo on ballpoint pen, no one pays attention, but is subconsciously perceived as a badge of honor. For example, a favicon is displayed in Yandex, but not in Google, and for me personally this causes a certain inconvenience.


As you can see, in Yandex it is easier to find a site in the list, focusing on favicons, than in Google, looking at plain text, and there is some variety. Another reason why a site needs a favicon is a possible ranking factor from Yandex. There are hundreds of factors on his list; perhaps the favicon somehow influences the search results. In any case, every respected and decent resource on the Internet should have its own style, its own logo and, as a result, its own insignia as a favicon.

How to create a favicon for a website?

Now that we've figured it out and decided that we need a favicon, we need to create it. A favicon is an image in ICO format. I won’t tell you what this format is. Favicon is also allowed in GIF and PNG format, but not all browsers support favicon in such formats, so we will create an image in the ICO format that is understandable to everyone.

The image must be 16x16 pixels in size. We will create it in Photoshop. You can create a picture in any other graphic editor, it doesn’t matter, because we will still remake the created image into the ICO format, because Photoshop does not support this format.

We create new file size 16x16 and insert the picture there. The picture should be simple and with clear outlines so that it is clear what is shown there in a small form. Save the file in PNG format.

Now we need to convert the image to ICO format. We will do this with the help online service favicon.ru. We go to it and on the main page click on the “Select file” button.

We select the picture we created on the computer, wait a couple of seconds, click the “next” button and see what we got. Here you can correct it a little, if you don’t like something, make some areas transparent and if you are happy with everything, click on the “download favicon” - “download” button.

Minus of this service, what he transparent background Fills it with black. Just in case, here is another service for you http://tools.dynamicdrive.com/favicon/. Everything is simple here too. Select the file, click on the “Create Icon” button and after a couple of seconds click “Download FavIcon”. But you can’t edit here, but the transparent background remains transparent.

You don’t have to create a favicon yourself, but download ready-made pictures. There are many sites on the Internet where there are collections of favicons, you need to find the right one and simply download it.

How to install a favicon on a website?

Now that we have a file, we need to upload it to our website. Just in case, we check that the file name is “favicon.ico”. We go to our server and upload the file to the root of the site. It is not necessary to upload to the root, but in the code we will indicate a link to the root of the site.

Now you need to paste this code.

You need to insert it between tags . I’ll show you the example of everyone’s favorite worpdress. In the file header.php we look for (ctrl+f) tag and immediately after it we insert the code, as shown in the picture below.

In other engines everything is individual, but the meaning is the same, you need to insert it into the site header between the tags . Now you know how to create a favicon and how to add it to your website. On this this article I'll finish. I hope I explained everything clearly and clearly. If you still have any questions, ask them in the comments, I will help as much as I can.


2024 gtavrl.ru.