قالب وردپرس درنا توس
Home / Tips and Tricks / Fancy Icons (Favicons) set for your website – CloudSavvy IT

Fancy Icons (Favicons) set for your website – CloudSavvy IT


Favicons are the little icons you see on browser tabs. They are usually just simple ICO files, but in recent years they have become an icon for your website, with many competing formats and types.

How do you use a favicon?

Most browsers support multiple different types of favicons. Most of the time, your browser will automatically pull favicons in the likely locations without you even saying it, but you can also manually add them to your website.

If you are not the exact size or format, most browsers will use the highest resolution image they can support and scale favicons up or down. You don't really need to include 20 different favicon files for each & # 39; official & # 39; icon resolution, except for a few high resolutions besides the standard. But if you need to add them all, you can refer to this cheat sheet for more information.

Once you have an image you want to use as an icon, you can manually create favicons in any photo editor. For the sake of common sense, you probably want to use a favicon generator to do it automatically. This generates a number of files that you want to link in the tags and in the section of your website's HTML.

If you don't manage your own web server (eg if you've managed hosting with a service like SquareSpace), you should contact your provider for the settings related to the favicon files. Usually they will handle it for you and you just need to provide the files.

Common Favicon Tags

The original favicons are favicon.ico files. The minimum size is 16 × 16, but ICO files can contain several different resolutions. Usually favicon.ico is a set of 16 × 16, 32 × 32 and 48 × 48 icons, all bundled together. You can create this icon from any PNG using online favicon generators.

 CNN favicon. "Width =" 350 "height =" 100 "src =" / pagespeed_static / 1.JiBnMqyl6S.gif "onload =" page speed. lazyLoadImages.loadIfVisibleAndMaybeBeacon (this); "onerror =" this.onerror = null; pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this);

You can add your favicon by adding a link to the faviconico. , usually placed in the root (top directory) of your web server, next to your index.html and other files.

You don't really always need the tag, since most browsers will automatically check for the file, but it's good to include. This is by far the most common type of favicon and is supported almost everywhere that supports favicons.

If your favicon doesn't work, it's probably because the file is not in the right place. Verify that http://www.yourwebsite.com/favicon.ico is accessible and that it is displayed correctly in your browser. If you uploaded the file manually, it may not have the correct permissions, which you can correct from a command line with:

  sudo chmod + r favicon.ico 

Allowing it to be read by your web server. [19659003] PNG Favicons

Most newer browsers support higher resolution PNG favicons for use in areas other than the tab bar, such as the new Chrome tab page or the Android desktop. You'll probably want these so that your icon doesn't look gritty when blown up.

 PNG Favicons. "Width =" 350 "height =" 140 "src =" / pagespeed_static / 1.JiBnMqyl6S.gif "onload =" pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this); "onerror =" this.onerror = null; pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this);

You can use this in addition to the fav] file, since the browser chooses the higher resolution.



The favicon generator also generates a android-chrome-512x512.png file, but this is checked automatically and doesn't need a tag. Chrome on Android uses the Apple Touch icon to fall back on when it is missing. If you want to include it, you can include any size PNG icon by resizing and referring to another file:


It's not such a problem to get more links add, since most browsers will only request the favicon they need.

Apple Touch Icon

This is the icon used when your webpage is added to an iOS user's home screen from Safari and for several other places in the iOS user interface. With Retina screens, having a high-resolution icon makes a big difference.

 Apple Touch icons. "Width =" 351 "height =" 150 "src =" / pagespeed_static / 1.JiBnMqyl6S.gif "onload =" pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this); "onerror =" this.onerror = null; pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this);

Its exact size has changed a lot with different versions of iOS, but it will always change to a square, with a current width of 180px for Retina iPhones. You can add an iOS icon with a apple-touch-icon link, like so:


iOS will automatically resize higher resolution icons, but you can have multiple icons in different formats to save a bit of bandwidth in the same way as PNG icons.

Most browsers will automatically check for /apple-touch-icon.png so you may not even need the tag. Since this icon is quite common, it is also used as a backup for many browsers if you don't specify a high-resolution PNG icon.

Safari and Touch Bar Icon

Safari has the ability to use monochrome icons for the macOS Touch Bar. This isn't entirely necessary, and Safari will still use regular favorites if it isn't there, but it will look a little better if your icon has a colored background.

 pinned tab focus touchbar "width =" 350 "height =" 150 "src =" / pagespeed_static / 1.JiBnMqyl6S.gif "onload =" pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this); "onerror =" this.onerror = null; pagespeed.lazyLoadImages.loadIfbeisAndMon

You can create these automatically with the favicon generator, and you need to add the


to your growing list of links. Safari does not automatically check these.

Windows 10 Metro Tiles

When someone pin your site to their Start menu or desktop, your site's icon is displayed.

 CNN favicon pinned in Windows 10. "width =" 350 "height =" 150 "src =" / pagespeed_static / 1.JiBnMqyl6S.gif "onload =" pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon (this); "onerror =" this.onerror = null; pagespeed.lazyLoadImages .loadIfVisibleAndMaybeBeacon (this);

This should fall back to other favicons if you don't have it, like Safari it is not entirely necessary. But to look better when pinned to the Start menu, you need a few meta tags for configuration:



Basically just define the color of the background tile and the color of the theme. The rest of the configuration is placed in an XML file:


 # 000000 


Which seems a bit redundant for just one file link. You still need to put the mstile-150x150.png file in the root of your web server for it to work properly.

Dealing with hosting files in the root of your web server

If you really don't want to show files hosted in the root of your server, you can always redirect /favicon.ico to another location. For example, in nginx you could do:

  location = /favicon.ico {
root / new / images / path;

Which nginx would search in / new / images / path for your favorites. This has no effect on the client, so you still want to link to /favicon.ico as if everything were the same.

Source link