ico website development

2022.03.23

Add a small icon for your website,Show both professional and beautiful。

ico website development

Small icons displayed in the upper left corner of the website are generallyicoFormatted picture,InHTMLUse the code to set upicoSmall picture for the website。

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

Design software design icon is generallypng、jpgThis format,buticoIcon is different frompng、jpgThis kind of common picture format,Need simple conversion。

Although some browser supports website iconspngpicture,But recommendedicoFormatted picture,Better compatibility,It is best to place it under the root of the website.

HavepngHow to turn into a small icon in the formaticoFormat icon?

Trypng2icoThis small software,It supportsWindows、MacOS、LinuxPlatform willpngFormatted image transfericoFormatted picture。

Download address of this small software
https://www.winterdrache.de/freeware/png2ico/

WindowsUsers need to download this small software to the official website

MacOSUsers can go directly to the command line(Prerequisites need to be installed firstbrew):

brew install png2ico

LinuxUsers need to download the source code to compile themselves。

This software does not supportGUIGraphical operation,Need to run it through the command line。

(ico website development)

Steps for usage:

Prepare twopngpicture:logo16x16.png(16PixelX16Pixel)andlogo32x32.png(32PixelX32Pixel),Then run through the command line

(ico website development)png2ico favicon.ico logo16x16.png logo32x32.png

The above command can put these twopngThe picture is included in onefavicon.icoIn the file,This is laterfavicon.icoYou can place it in the website,Use a small label as a website.。

You can also only onepngPicture is placedicoIn the file:

png2ico favicon.ico logo32x32.png

This is goodfavicon.icoIcon and place it correctly in the root directory,Go to the correct reference through the code,Refreshing the browser, you can see the beautiful website mini label.。

If there is no small icon after refreshing,May be caused by browser caching,Need to clean up the browser cache,Or change your browser to try


Is this small tutorial useful??I feel useful to favorites,Go forward,Always forget to pay attention to us「Fargrass school」,Continuous tutorial release。

返回列表
更多新闻资讯