见微知著，细节上雕花SVG生成矢量格式网站图标（Favico

　　Favicon是favoritesicon的缩写，也被称为websiteicon（站点图标）、pageicon（页面图标）或者urlicon（URL图标）。Favicon是与某个站点或网页相关联的图标，网站设计者可以多种方式建立这种图标，几乎所有浏览器都支持此功能，浏览器可以将favicon显示于浏览器的地址栏中，也可置于书签列表的网站名前，还可以放在标签式浏览界面中的页标题前：
　　我们定义一个favicon的方法是将一个名为favicon。ico的文件置于Web服务器的根目录下，IE的收藏夹（即书签）可以自动显示该文件。后来出现了一种更为灵活的方法，即使用HTML来为任何一个网页指示其图标所存储的位置：linkreliconhreffavicon。icotypeimagexicon
　　大多数情况下使用ICO格式，现代浏览器也支持PNG（便携式网络图片）格式，和GIF（图形交换格式）动画图像格式：linkreliconhreffavicon。pngtypeimagepng
　　现如今，我们可以使用另外一种矢量格式来创建favicon了，那就是SVG。SVG格式favicon
　　SVG能够在不损失质量的情况下放大和缩小，并且尺寸上比以往任何图片格式都小，它们还可以嵌入CSS，甚至嵌入动画和媒体查询。这意味着如果在浏览器应用程序或书签栏中使用SVG图标，由于SVG内部提供的深色偏好样式，用户有可能获取与站点主题相关的（浅色或深色）图标。
　　首先在站点根目录建立favicon。svg文件：svgxmlnshttp：www。w3。org2000svgwidth400height344viewBox00400344svg
　　接下来，添加svg路径path：svgxmlnshttp：www。w3。org2000svgwidth400height344viewBox00400344pathdM108。7314。224c5。0972。04413。3024。44818。2325。342C74。05912。5482032。9922036。228c03。08525。5216。11757。48829。35722。8989。483222。1269。483245。0240C354。4852。34538039。31338036。228c03。25354。09623。68770。66326。6915。021。91113。7923。42919。4935。59613。0644。967168。6274。724181。113。283M848。043c01。9171。7454。5633。8785。8822。1331。31812。36618。07422。74137。23610。37419。16120。69336。0722。93137。5754。7693。20711。4。0388。7834。197。9891。63。29112。2149。5123。587C88。81877。22589。09777。7225461。96823。55648。302843。593848。043M344。00262。66c16。4987。70130。53914。54431。20215。2071。3811。38122。34646。43427。151。4551。7291。8279。0397。17316。24320C363。34796。495371。94182。85375。24179c3。2993。854。77473。27671。4970。075。43。483128。40316。251。47415。76537。9982。66m37。60616。215c30。72150。03231。31460。1913。0351。963l19。4225。651。18829。206c1。5137。1452。73841。27817。5817。107M2。52173C1。19577。95。08592。215。055104。699L0127。398l20。746。08c28。878。46329。2746。838。32633。606C9。32661。7676。34158。7462。52173m110。14610。683C114。72989。379195。183156200156c4。817085。27166。62187。33372。317C288。1281。51252。3278020080s88。121。5187。3333。683m30。30326。46C66。423139。14565。22314474144c3。3061。864s1。99344。4284c6。93401。7179。94935。6546853。73883。47579。385120。05582。199117。2413。6823。6813。198168。384。501170。671。6921。04524。6424。975518。732C115。566154。08391。3149。35388147。33c4。1762。562。3523。06861。67145。7247。64875。40210。53978。3127。6292。8042。80453。99656。06270。69166。2833。2862。0129。6085。58519。25723。138m178。1168。755c47。05840。07244。17941。76545。5226。7618。3521。39710。176。88961。6713。32。02327。66。7355410。47159。5768。4353。482。33954。8496。88l1。1684。610。8776。43c5。9823。53710。1947。1149。3597。948。835。83520。55335。1347。52976。21157。79888。0261。07393。74654。80995。8346。6672。2225。5998。8581。4268。8588。81407。4696。3126。92332。49316。21729。49715。11429。63658。5977。391M10。316139。489c1。3712。219。9397。2915。13411。2734。1963。98115。48616。39825。08927。593C92。117238。484140。91292144。153292c3。177028。7653。24540。04166。7555。3186。3732。44249。30140。78764。5584。7818。7411。3813。4723。2516。6679。1172。45518。9815。38621。9216。5142。9391。1286。467。2367。8381。983m352。9393。821C346。065149。445320175。954320187。302c04。45131。76749。86437。51953。6372。4651。6163。1132。9661。4431。672。0333。5519。98811。60722。12133。43650。366。5924。00497。71895。93330。44635。00729。88438。8733。89726。817fillruleevenoddsvg
　　随后，在网站头部标签中，修改icon声明：linkreliconhreffavicon。svgtypeimagesvgxml
　　随后就可以在标签页中观察到svg格式的favicon了：
　　这里需要注意的是，两种不同的favicon声明方式并不是非此即彼，它们可以共存：linkreliconhreffavicon。pngtypeimagepnglinkreliconhreffavicon。svgtypeimagesvgxml
　　以Chrome为例子，浏览器会优先选择svg格式的图标进行展示，如果声明了png的favicon，那么png格式的图标也会被下载：
　　所以，如果出于性能层面考虑，可以只写一种声明，用来节约系统资源。SVG样式
　　有的时候，在页面对比度层面，我们可以为svg图标设置前景色或者背景色来突出favicon：svgxmlnshttp：www。w3。org2000svgwidth400height344viewBox00400344stylebackgroundcolor：dededepathstylefill：231f20；stroke：none；dM108。7314。224c5。0972。04413。3024。44818。2325。342C74。05912。5482032。9922036。228c03。08525。5216。11757。48829。35722。8989。483222。1269。483245。0240C354。4852。34538039。31338036。228c03。25354。09623。68770。66326。6915。021。91113。7923。42919。4935。59613。0644。967168。6274。724181。113。283M848。043c01。9171。7454。5633。8785。8822。1331。31812。36618。07422。74137。23610。37419。16120。69336。0722。93137。5754。7693。20711。4。0388。7834。197。9891。63。29112。2149。5123。587C88。81877。22589。09777。7225461。96823。55648。302843。593848。043M344。00262。66c16。4987。70130。53914。54431。20215。2071。3811。38122。34646。43427。151。4551。7291。8279。0397。17316。24320C363。34796。495371。94182。85375。24179c3。2993。854。77473。27671。4970。075。43。483128。40316。251。47415。76537。9982。66m37。60616。215c30。72150。03231。31460。1913。0351。963l19。4225。651。18829。206c1。5137。1452。73841。27817。5817。107M2。52173C1。19577。95。08592。215。055104。699L0127。398l20。746。08c28。878。46329。2746。838。32633。606C9。32661。7676。34158。7462。52173m110。14610。683C114。72989。379195。183156200156c4。817085。27166。62187。33372。317C288。1281。51252。3278020080s88。121。5187。3333。683m30。30326。46C66。423139。14565。22314474144c3。3061。864s1。99344。4284c6。93401。7179。94935。6546853。73883。47579。385120。05582。199117。2413。6823。6813。198168。384。501170。671。6921。04524。6424。975518。732C115。566154。08391。3149。35388147。33c4。1762。562。3523。06861。67145。7247。64875。40210。53978。3127。6292。8042。80453。99656。06270。69166。2833。2862。0129。6085。58519。25723。138m178。1168。755c47。05840。07244。17941。76545。5226。7618。3521。39710。176。88961。6713。32。02327。66。7355410。47159。5768。4353。482。33954。8496。88l1。1684。610。8776。43c5。9823。53710。1947。1149。3597。948。835。83520。55335。1347。52976。21157。79888。0261。07393。74654。80995。8346。6672。2225。5998。8581。4268。8588。81407。4696。3126。92332。49316。21729。49715。11429。63658。5977。391M10。316139。489c1。3712。219。9397。2915。13411。2734。1963。98115。48616。39825。08927。593C92。117238。484140。91292144。153292c3。177028。7653。24540。04166。7555。3186。3732。44249。30140。78764。5584。7818。7411。3813。4723。2516。6679。1172。45518。9815。38621。9216。5142。9391。1286。467。2367。8381。983m352。9393。821C346。065149。445320175。954320187。302c04。45131。76749。86437。51953。6372。4651。6163。1132。9661。4431。672。0333。5519。98811。60722。12133。43650。366。5924。00497。71895。93330。44635。00729。88438。8733。89726。817fillruleevenoddsvg
　　也可以通过设置svg的viewBox属性来等比例缩小或者放大图标：svgxmlnshttp：www。w3。org2000svgwidth400height344viewBox100425369stylebackgroundcolor：dededepathstylefill：231f20；stroke：none；dM108。7314。224c5。0972。04413。3024。44818。2325。342C74。05912。5482032。9922036。228c03。08525。5216。11757。48829。35722。8989。483222。1269。483245。0240C354。4852。34538039。31338036。228c03。25354。09623。68770。66326。6915。021。91113。7923。42919。4935。59613。0644。967168。6274。724181。113。283M848。043c01。9171。7454。5633。8785。8822。1331。31812。36618。07422。74137。23610。37419。16120。69336。0722。93137。5754。7693。20711。4。0388。7834。197。9891。63。29112。2149。5123。587C88。81877。22589。09777。7225461。96823。55648。302843。593848。043M344。00262。66c16。4987。70130。53914。54431。20215。2071。3811。38122。34646。43427。151。4551。7291。8279。0397。17316。24320C363。34796。495371。94182。85375。24179c3。2993。854。77473。27671。4970。075。43。483128。40316。251。47415。76537。9982。66m37。60616。215c30。72150。03231。31460。1913。0351。963l19。4225。651。18829。206c1。5137。1452。73841。27817。5817。107M2。52173C1。19577。95。08592。215。055104。699L0127。398l20。746。08c28。878。46329。2746。838。32633。606C9。32661。7676。34158。7462。52173m110。14610。683C114。72989。379195。183156200156c4。817085。27166。62187。33372。317C288。1281。51252。3278020080s88。121。5187。3333。683m30。30326。46C66。423139。14565。22314474144c3。3061。864s1。99344。4284c6。93401。7179。94935。6546853。73883。47579。385120。05582。199117。2413。6823。6813。198168。384。501170。671。6921。04524。6424。975518。732C115。566154。08391。3149。35388147。33c4。1762。562。3523。06861。67145。7247。64875。40210。53978。3127。6292。8042。80453。99656。06270。69166。2833。2862。0129。6085。58519。25723。138m178。1168。755c47。05840。07244。17941。76545。5226。7618。3521。39710。176。88961。6713。32。02327。66。7355410。47159。5768。4353。482。33954。8496。88l1。1684。610。8776。43c5。9823。53710。1947。1149。3597。948。835。83520。55335。1347。52976。21157。79888。0261。07393。74654。80995。8346。6672。2225。5998。8581。4268。8588。81407。4696。3126。92332。49316。21729。49715。11429。63658。5977。391M10。316139。489c1。3712。219。9397。2915。13411。2734。1963。98115。48616。39825。08927。593C92。117238。484140。91292144。153292c3。177028。7653。24540。04166。7555。3186。3732。44249。30140。78764。5584。7818。7411。3813。4723。2516。6679。1172。45518。9815。38621。9216。5142。9391。1286。467。2367。8381。983m352。9393。821C346。065149。445320175。954320187。302c04。45131。76749。86437。51953。6372。4651。6163。1132。9661。4431。672。0333。5519。98811。60722。12133。43650。366。5924。00497。71895。93330。44635。00729。88438。8733。89726。817fillruleevenoddsvg
　　不仅仅支持内嵌，我们也可以将样式进行外联操作：svgidsvgxmlnshttp：www。w3。org2000svgwidth400height344viewBox100425369stylepath｛fill：231f20；stroke：none；｝svg｛backgroundcolor：dedede｝stylepathidpathdM108。7314。224c5。0972。04413。3024。44818。2325。342C74。05912。5482032。9922036。228c03。08525。5216。11757。48829。35722。8989。483222。1269。483245。0240C354。4852。34538039。31338036。228c03。25354。09623。68770。66326。6915。021。91113。7923。42919。4935。59613。0644。967168。6274。724181。113。283M848。043c01。9171。7454。5633。8785。8822。1331。31812。36618。07422。74137。23610。37419。16120。69336。0722。93137。5754。7693。20711。4。0388。7834。197。9891。63。29112。2149。5123。587C88。81877。22589。09777。7225461。96823。55648。302843。593848。043M344。00262。66c16。4987。70130。53914。54431。20215。2071。3811。38122。34646。43427。151。4551。7291。8279。0397。17316。24320C363。34796。495371。94182。85375。24179c3。2993。854。77473。27671。4970。075。43。483128。40316。251。47415。76537。9982。66m37。60616。215c30。72150。03231。31460。1913。0351。963l19。4225。651。18829。206c1。5137。1452。73841。27817。5817。107M2。52173C1。19577。95。08592。215。055104。699L0127。398l20。746。08c28。878。46329。2746。838。32633。606C9。32661。7676。34158。7462。52173m110。14610。683C114。72989。379195。183156200156c4。817085。27166。62187。33372。317C288。1281。51252。3278020080s88。121。5187。3333。683m30。30326。46C66。423139。14565。22314474144c3。3061。864s1。99344。4284c6。93401。7179。94935。6546853。73883。47579。385120。05582。199117。2413。6823。6813。198168。384。501170。671。6921。04524。6424。975518。732C115。566154。08391。3149。35388147。33c4。1762。562。3523。06861。67145。7247。64875。40210。53978。3127。6292。8042。80453。99656。06270。69166。2833。2862。0129。6085。58519。25723。138m178。1168。755c47。05840。07244。17941。76545。5226。7618。3521。39710。176。88961。6713。32。02327。66。7355410。47159。5768。4353。482。33954。8496。88l1。1684。610。8776。43c5。9823。53710。1947。1149。3597。948。835。83520。55335。1347。52976。21157。79888。0261。07393。74654。80995。8346。6672。2225。5998。8581。4268。8588。81407。4696。3126。92332。49316。21729。49715。11429。63658。5977。391M10。316139。489c1。3712。219。9397。2915。13411。2734。1963。98115。48616。39825。08927。593C92。117238。484140。91292144。153292c3。177028。7653。24540。04166。7555。3186。3732。44249。30140。78764。5584。7818。7411。3813。4723。2516。6679。1172。45518。9815。38621。9216。5142。9391。1286。467。2367。8381。983m352。9393。821C346。065149。445320175。954320187。302c04。45131。76749。86437。51953。6372。4651。6163。1132。9661。4431。672。0333。5519。98811。60722。12133。43650。366。5924。00497。71895。93330。44635。00729。88438。8733。89726。817fillruleevenoddsvg暗黑模式
　　通过在样式中添加媒体查询，我们可以为svg的图标添加暗黑模式，首先创建好光明模式：svgidsvgxmlnshttp：www。w3。org2000svgwidth400height344viewBox100425369stylepath｛fill：231f20；stroke：none；｝svg｛backgroundcolor：dedede｝stylepathidpathdM108。7314。224c5。0972。04413。3024。44818。2325。342C74。05912。5482032。9922036。228c03。08525。5216。11757。48829。35722。8989。483222。1269。483245。0240C354。4852。34538039。31338036。228c03。25354。09623。68770。66326。6915。021。91113。7923。42919。4935。59613。0644。967168。6274。724181。113。283M848。043c01。9171。7454。5633。8785。8822。1331。31812。36618。07422。74137。23610。37419。16120。69336。0722。93137。5754。7693。20711。4。0388。7834。197。9891。63。29112。2149。5123。587C88。81877。22589。09777。7225461。96823。55648。302843。593848。043M344。00262。66c16。4987。70130。53914。54431。20215。2071。3811。38122。34646。43427。151。4551。7291。8279。0397。17316。24320C363。34796。495371。94182。85375。24179c3。2993。854。77473。27671。4970。075。43。483128。40316。251。47415。76537。9982。66m37。60616。215c30。72150。03231。31460。1913。0351。963l19。4225。651。18829。206c1。5137。1452。73841。27817。5817。107M2。52173C1。19577。95。08592。215。055104。699L0127。398l20。746。08c28。878。46329。2746。838。32633。606C9。32661。7676。34158。7462。52173m110。14610。683C114。72989。379195。183156200156c4。817085。27166。62187。33372。317C288。1281。51252。3278020080s88。121。5187。3333。683m30。30326。46C66。423139。14565。22314474144c3。3061。864s1。99344。4284c6。93401。7179。94935。6546853。73883。47579。385120。05582。199117。2413。6823。6813。198168。384。501170。671。6921。04524。6424。975518。732C115。566154。08391。3149。35388147。33c4。1762。562。3523。06861。67145。7247。64875。40210。53978。3127。6292。8042。80453。99656。06270。69166。2833。2862。0129。6085。58519。25723。138m178。1168。755c47。05840。07244。17941。76545。5226。7618。3521。39710。176。88961。6713。32。02327。66。7355410。47159。5768。4353。482。33954。8496。88l1。1684。610。8776。43c5。9823。53710。1947。1149。3597。948。835。83520。55335。1347。52976。21157。79888。0261。07393。74654。80995。8346。6672。2225。5998。8581。4268。8588。81407。4696。3126。92332。49316。21729。49715。11429。63658。5977。391M10。316139。489c1。3712。219。9397。2915。13411。2734。1963。98115。48616。39825。08927。593C92。117238。484140。91292144。153292c3。177028。7653。24540。04166。7555。3186。3732。44249。30140。78764。5584。7818。7411。3813。4723。2516。6679。1172。45518。9815。38621。9216。5142。9391。1286。467。2367。8381。983m352。9393。821C346。065149。445320175。954320187。302c04。45131。76749。86437。51953。6372。4651。6163。1132。9661。4431。672。0333。5519。98811。60722。12133。43650。366。5924。00497。71895。93330。44635。00729。88438。8733。89726。817fillruleevenoddsvg
　　这里，背景色为白色，前景色为黑色：
　　随后添加暗黑模式：svgidsvgxmlnshttp：www。w3。org2000svgwidth400height344viewBox100425369stylepath｛fill：231f20；stroke：none；｝svg｛backgroundcolor：dedede｝media（preferscolorscheme：dark）｛path｛fill：dedede；stroke：none；｝svg｛backgroundcolor：231f20｝｝stylepathidpathdM108。7314。224c5。0972。04413。3024。44818。2325。342C74。05912。5482032。9922036。228c03。08525。5216。11757。48829。35722。8989。483222。1269。483245。0240C354。4852。34538039。31338036。228c03。25354。09623。68770。66326。6915。021。91113。7923。42919。4935。59613。0644。967168。6274。724181。113。283M848。043c01。9171。7454。5633。8785。8822。1331。31812。36618。07422。74137。23610。37419。16120。69336。0722。93137。5754。7693。20711。4。0388。7834。197。9891。63。29112。2149。5123。587C88。81877。22589。09777。7225461。96823。55648。302843。593848。043M344。00262。66c16。4987。70130。53914。54431。20215。2071。3811。38122。34646。43427。151。4551。7291。8279。0397。17316。24320C363。34796。495371。94182。85375。24179c3。2993。854。77473。27671。4970。075。43。483128。40316。251。47415。76537。9982。66m37。60616。215c30。72150。03231。31460。1913。0351。963l19。4225。651。18829。206c1。5137。1452。73841。27817。5817。107M2。52173C1。19577。95。08592。215。055104。699L0127。398l20。746。08c28。878。46329。2746。838。32633。606C9。32661。7676。34158。7462。52173m110。14610。683C114。72989。379195。183156200156c4。817085。27166。62187。33372。317C288。1281。51252。3278020080s88。121。5187。3333。683m30。30326。46C66。423139。14565。22314474144c3。3061。864s1。99344。4284c6。93401。7179。94935。6546853。73883。47579。385120。05582。199117。2413。6823。6813。198168。384。501170。671。6921。04524。6424。975518。732C115。566154。08391。3149。35388147。33c4。1762。562。3523。06861。67145。7247。64875。40210。53978。3127。6292。8042。80453。99656。06270。69166。2833。2862。0129。6085。58519。25723。138m178。1168。755c47。05840。07244。17941。76545。5226。7618。3521。39710。176。88961。6713。32。02327。66。7355410。47159。5768。4353。482。33954。8496。88l1。1684。610。8776。43c5。9823。53710。1947。1149。3597。948。835。83520。55335。1347。52976。21157。79888。0261。07393。74654。80995。8346。6672。2225。5998。8581。4268。8588。81407。4696。3126。92332。49316。21729。49715。11429。63658。5977。391M10。316139。489c1。3712。219。9397。2915。13411。2734。1963。98115。48616。39825。08927。593C92。117238。484140。91292144。153292c3。177028。7653。24540。04166。7555。3186。3732。44249。30140。78764。5584。7818。7411。3813。4723。2516。6679。1172。45518。9815。38621。9216。5142。9391。1286。467。2367。8381。983m352。9393。821C346。065149。445320175。954320187。302c04。45131。76749。86437。51953。6372。4651。6163。1132。9661。4431。672。0333。5519。98811。60722。12133。43650。366。5924。00497。71895。93330。44635。00729。88438。8733。89726。817fillruleevenoddsvg
　　颜色正好相反，背景色为黑色，前景色为白色，动态切换效果是这样的：
　　这细节，也是没谁了。Safari
　　没错，又是Safari，来看看svg格式的Favicon支持列表：
　　SVGFaviconsonIEisfullysupportedonNoneoftheversions，partiallysupportedonNoneoftheversions，andnotsupportedon5。511IEversions。
　　SVGFaviconsonEdgeisfullysupportedon8099，partiallysupportedonNoneoftheversions，andnotsupportedon1279Edgeversions。
　　SVGFaviconsonFirefoxisfullysupportedon41100，partiallysupportedon440，andnotsupportedon23Firefoxversions。
　　SVGFaviconsonChromeisfullysupportedon80103，partiallysupportedonNoneoftheversions，andnotsupportedon479Chromeversions。
　　SVGFaviconsonSafariisfullysupportedonNoneoftheversions，partiallysupportedonNoneoftheversions，andnotsupportedon3。215。4Safariversions。
　　SVGFaviconsonOperaisfullysupportedon4483，partiallysupportedonNoneoftheversions，andnotsupportedon9。566Operaversions。
　　SVGFaviconsonSafarioniOSisfullysupportedonNoneoftheversions，partiallysupportedonNoneoftheversions，andnotsupportedon3。215。4SafarioniOSversions。
　　SVGFaviconsonAndroidBrowserisfullysupportedonNoneoftheversions，partiallysupportedonNoneoftheversions，andnotsupportedon2。399AndroidBrowserversions。
　　SVGFaviconsonOperaMobileisfullysupportedonNoneoftheversions，partiallysupportedonNoneoftheversions，andnotsupportedon1064OperaMobileversions。
　　SVGFaviconsonChromeforAndroidisfullysupportedon97100，partiallysupportedonNoneoftheversions，andnotsupportedonbelow97ChromeforAndroidversions。
　　SVGFaviconsonFirefoxforAndroidisfullysupportedonNoneoftheversions，partiallysupportedonNoneoftheversions，andnotsupportedon9598FirefoxforAndroidversions。
　　SVGFaviconsonSamsungInternetisfullysupportedon1316，partiallysupportedonNoneoftheversions，andnotsupportedon412SamsungInternetversions。
　　连三星浏览器都支持了，然而，只有Safari不支持，不愧是苹果生态圈，可谓独领风骚，无出其右。
　　尝试苹果独有的maskicon的声明方式另辟蹊径：linkrelmaskiconhreffavicon。svgcolor990000
　　但这样的声明方式只支持单色的svg文件，同时也无法使用媒体查询的特性来控制图标颜色模式，所以，很明显，maskicon是鸡肋，味同嚼蜡，蜡要沿着嘴角流下来了。
　　事实上，就算是苹果官网apple。com，也并没有使用maskicon，就算坐等Safari支持原生svgfavicon，苹果最快也要每六个月左右才更新一次Safari，那时候，黄花菜都凉了。
　　除此之外，在Safari中调试svg的favicon也是令人痛苦的，需要走下面的流程：
　　1、退出Safari。
　　2、进入LibrarySafariFaviconCache目录
　　3、删除所有文件
　　4、进入LibrarySafariTouchIconsCache目录，重复第三步
　　5、进入LibrarySafariTemplateIcons目录，重复第三步
　　6、清空废纸篓
　　7、再次打开Safari
　　才能查看Safari下最新的Favicon效果。结语
　　鹌鹑嗉里寻豌豆，鹭鸶腿上劈精肉，于细枝末节处雕花，见微知著，对着favicon一番把玩之后，favicon。ico文件最好留着别删，因为也许还会有人在用IE访问您的站点也未可知，最后，代码开源于https：github。comzcxey2911svgwebsitelogo，聊博诸君一晒。