{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот самый простейший способ сделать иконку:","type":"unstyled","key":"bfvg0"},{"data":{"image":{"id":"67a8de8d8fb6af7e472237b2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Иконка на вкладке","type":"atomic:image","key":"b7uto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот симпатичный, на мой взгляд, домик на вкладе слева вверху я нарисовал лично в редакторе Paint (даже не в Paint 3D), как файл формата PNG размером 16x16, и сохранил в корневом каталоге. В тексте HTML в разделе добавил строку:","type":"unstyled","key":"bm861"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":54}],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"avs0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На самом деле всё немного сложнее, но всё-равно не стоит сильно заморачиваться.","type":"unstyled","key":"1r7u3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Немного истории:","type":"unstyled","key":"fmb38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первоначально браузеры, начиная с Microsoft Internet Explorer 5, начали автоматически (даже без всяких строк в ) поддерживать иконки в виде файла с конкретным названием и форматом, размещённого в корневом каталоге сайта:","type":"unstyled","key":"272t1"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":44,"offset":13}],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"favicon.ico (здесь справочная информация на русском языке).","type":"unstyled","key":"fvrq0"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":12,"offset":10}],"inlineStyleRanges":[],"text":"Этот файл формата .ICO может содержать несколько изображений разных размеров, но как минимум одно изображение, обычно 16x16 – оно самое универсальное и маленькое - не требовало времени на загрузку.","type":"unstyled","key":"nqm9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Напротив, фирма Apple в своём браузере Safari (компьютеры Mac, смартфоны IPhone) поддерживала иконки автоматически но другим способом, через файл формата .PNG, также размещённого в корневом каталоге (размер иконки сначала был 60×60 пикселей):","type":"unstyled","key":"1ku1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"apple-touch-icon.png","type":"unstyled","key":"fvr4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"В дальнейшем, поддержка иконок расширялась как по типу форматов файлов, из размеру в пикселях, разнообразию мест, где изображаются иконки. Примеры таких мест - вкладка, адресная строка, закладка, иконка на рабочем столе и т.д. Причем разные браузеры изображают иконки разного разного размера в разных местах (кто в лес, кто по дрова).","type":"unstyled","key":"5sdmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":21,"style":"BOLD"},{"length":3,"offset":64,"style":"BOLD"}],"text":"Одно хорошо – сейчас все распространённые браузеры поддерживают все распространённые форматы изображения (кроме анимированных, их поддерживают не все):","type":"unstyled","key":"2hbfh"},{"data":{"image":{"id":"67a8df818fb6af7e47240196"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6jbti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8e4on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следовательно, мы можем взять любую картинку или фото, которые нам нравятся, с помощью простейших графических редакторов наделать картинок разного размера, и указать в тексте HTML в разделе , какие картинки использовать в каком случае (т.е. для разных размеров иконки, если какой-либо браузер будет их искать). И, по-прежднему, надо указать иконки для Safari отдельно.","type":"unstyled","key":"8727a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":97,"style":"BOLD"}],"text":"Все разнообразные форматы и размеры иконок теперь можно описать в тексте HTML страницы в разделе .","type":"unstyled","key":"218b4"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":24,"offset":36}],"inlineStyleRanges":[],"text":"Например, сама статья в руководстве W3Schools \"HTML Favicon\"","type":"unstyled","key":"i8k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"имеет следующий код, относящийся к иконкам, и говорящий сам за себя:","type":"unstyled","key":"9bbpv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f11ni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"drtdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"799pc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ebuao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eh4ig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примечания.","type":"unstyled","key":"qocu"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":23,"offset":145}],"inlineStyleRanges":[{"length":5,"offset":41,"style":"BOLD"},{"length":12,"offset":59,"style":"BOLD"}],"text":"1. Для того, чтобы получить файл формата .ico (в частности, favicon.ico), можно воспользоваться конвертерами, их много в сети. Я рекомендую сайт https://www.favicon.cc/","type":"unstyled","key":"7aerh"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":10,"offset":3}],"inlineStyleRanges":[],"text":"2. Формат svg – этот формат нужен в данном случае для браузера Safari, чтобы задний фон иконки был зелёным (rel=\"mask-icon\") - я полагаю, совпадать с цветом рабочего стола. Этот формат – векторный (может растягиваться и сжиматься без потери качества), поэтому файла одного размера (24x24) достаточно для определения прозрачности всех иконок.","type":"unstyled","key":"307j4"},{"data":{"image":{"id":"67a8dfeaaf4e040378dc4e72"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цвет рабочего стола","type":"atomic:image","key":"25b2u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер Safari, как обычно, выделяется среди других браузеров своими особенными ключами описания иконок и требованиями к ним, сложными и на все случаи жизни. Но для начала можно обойтись хотя бы двумя строчками из примера выше.","type":"unstyled","key":"7090m"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":29,"offset":33},{"key":7,"length":12,"offset":148}],"inlineStyleRanges":[{"length":7,"offset":199,"style":"BOLD"}],"text":"И наконец, последний писк моды - cпецификация Web App Manifest – описывать всё, относящееся к внешнему виду сайта, в т.ч. иконки, в отдельном файле формата JSON, и указывать ссылку на него в разделе .","type":"unstyled","key":"eg4j4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Например, для страницы выше используются оба способа, и строка определения манифеста имеет вид:","type":"unstyled","key":"20bpe"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":17,"offset":27}],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9ejoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А сам файл манифеста очень простой (добавляются две большие иконки для особых случаев):","type":"unstyled","key":"aphb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"unstyled","key":"deaf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"name\": \"W3Schools\",","type":"unstyled","key":"53iu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"short_name\": \"W3Schools\",","type":"unstyled","key":"dq4si"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"icons\": [","type":"unstyled","key":"f9n66"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"unstyled","key":"aotut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"src\": \"/android-chrome-192x192.png\",","type":"unstyled","key":"1kh96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"sizes\": \"192x192\",","type":"unstyled","key":"f0j9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"type\": \"image/png\"","type":"unstyled","key":"1apcb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"},","type":"unstyled","key":"a1094"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{","type":"unstyled","key":"68jv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"src\": \"/android-chrome-512x512.png\",","type":"unstyled","key":"6jkdj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"sizes\": \"512x512\",","type":"unstyled","key":"74geq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"type\": \"image/png\"","type":"unstyled","key":"a00cp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"ft1mk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"],","type":"unstyled","key":"eqv3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"theme_color\": \"#ffffff\",","type":"unstyled","key":"eg7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"background_color\": \"#ffffff\",","type":"unstyled","key":"3diff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\"display\": \"standalone\"","type":"unstyled","key":"cvqb9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"6dl65"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":108,"offset":0,"style":"BOLD"}],"text":"Как видите, иконки – это не просто, а очень просто. Если всё же появились вопросы – пожалуйста, обращайтесь.","type":"unstyled","key":"elk52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"-----","type":"unstyled","key":"fn2dg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Донаты.","type":"header-two","key":"e2d0p"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":21,"offset":51}],"inlineStyleRanges":[],"text":"Вы можете поблагодарить и поощрить автора денежным подарком через Юmoney на кошелёк 4100117793355888.","type":"unstyled","key":"a289f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"8pY4LttS9sd1EMkh0CFk"}],"entityMap":{"0":{"data":{"url":"http://starina.h1n.ru/Water/favicon.png"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://xn--h1ajim.xn--p1ai/Favicon"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://xn--h1ajim.xn--p1ai/ICO_(%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%82_%D1%84%D0%B0%D0%B9%D0%BB%D0%B0)"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://www.w3schools.com/html/html_favicon.asp"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://www.favicon.cc/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://xn--h1ajim.xn--p1ai/SVG"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://www.w3.org/TR/appmanifest/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://xn--h1ajim.xn--p1ai/JSON"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"https://www.w3schools.com/site.webmanifest"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"url":"https://yoomoney.ru/to/4100117793355888"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}