О favicon и не только
Форматы favicon
Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.
Favicon.ico
Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:
<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.
Favicon.png
Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:
<link href="/favicon.png" rel="icon" type="image/png" />
Favicon.svg
Формат SVG — новый открытый формат векторной графики.
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
Отслеживать поддержку SVG браузерами можно здесь.
Favicon – устройства, ОС, технологии
С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:
<link href="/favicon-32x32.png" rel="icon" type="image/png" /> <link href="/favicon-16x16.png" rel="icon" type="image/png" />
Для favicon.svg можно сделать так:
<link href="/favicon.svg" rel="icon" type="image/svg+xml" />
Так как формат SVG векторный и может масштабироваться, то даём указание использовать изображение для любых размеров.
Windows
Начиная с версии Windows 8.1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл browserconfig.xml следующего содержания:
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#da532c</TileColor> </tile> </msapplication> </browserconfig>
Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода:
<meta name="msapplication-config" content="browserconfig.xml" />
Mac OS и Safari
Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:
<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />
Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.
Apple (iOS)
Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Можно обойтись без девяти строк кода и ограничиться тремя, хотя файлы всех девяти размеров лучше загрузить на сайт. Используется одна хитрость: если иконка не соответствует рекомендуемому размеру устройства, то используется иконка большего размера. Подключаем изображение размером 180×180 следующим образом:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Затем добавим строку кода из предыдущего примера:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />
А ещё можно указать заголовок:
<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />
Android
К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:
{ "name": "Aitishnik.RU", "icons": [ { "src": "android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "android-chrome-256x256.png", "sizes": "256x256", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ffffff", "start_url": "http://www.aitishnik.ru", "display": "standalone" }
Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:
name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.
icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.
theme_color – передаёт цветовое значение строки состояния.
background_color – фоновый цвет для иконки на домашнем экране.
display – режим отображения веб-приложения.
Файл manifest.json подключается в заголовке сайта следующим кодом:
<link rel="manifest" href="/manifest.json" />
Заключение
У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.
Вот и всё. Удачи в сайтостроении!
Об авторе:
Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.
Ещё о сайтостроении
-
Основы юзабилити
Высокая конверсия, или отношение численности посетителей сайта к фактическим покупателям, зависит от многих факторов.
Веб проект может иметь идеальный дизайн, но не давать нужного уровня конверсии. Почему? Часто причиной становятся…
Зачем вебмастеру VPN?
Повсеместная доступность Интернета привела к тому, что пользоваться им стало небезопасно. Мошенники превратили сеть в стабильный источник дохода. Они взламывают сайты, блоги, электронную почту, кошельки и все, что под руку попадет….
Что лучше хостинг или VPS
Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…
Landing page: сам себе режиссер
Уже невозможно представить жизнь без интернета, он коснулся всех сфер нашей жизнедеятельности, бизнес тому не исключение. И для увеличения своей прибыли в условиях жесткой конкуренции у вас должна быть эффективно работающая landing page….
Основная цель выделенного сервера
Выделенный сервер – это название говорит само за себя, покупая эту услугу у провайдера, вы фактически получаете в свое пользование конкретный сервер. Виртуальный хостинг — это абсолютная противоположность понятию “выделенного”, в данном…
Сайт.
С чего начать?
Эта статья написана для тех, кому нужен интернет-сайт, но не представляющих с чего начать. Это краткое введение в мир web-сайтов, призванное помочь новичку сориентироваться в этом мире и принять правильные решения. Информация может быть…
Favicon (иконка сайта) | SEO-портал
Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.
Зачем нужна иконка Favicon для сайта?
Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.
Иконка сайта в браузере
Главное назначение иконок Иконка сайта во вкладках браузера Все современные интернет-обозреватели отображают иконку сайта во вкладках: Обратите внимание на вкладки вашего браузера, в котором открыта данная страница: если их много, то на мгновение представьте их без favicon. Согласитесь, без них пользоваться вкладками стало бы явно неудобно: при большом количестве вкладок в окне браузера ориентироваться в них позволяют только иконки Favicon. Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в Иконка сайта перед адресной строкой браузера Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки: Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования. Кроме того, наличие и качество исполнения фавиконки могут облегчать работу пользователей со страницами сайта в браузере, способствовать узнаваемости сайта, тем самым косвенно влияя на внутренние поведенческие факторы. Из всего вышесказанного следует, что сниппета, Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы. Фавиконка сайта отображается напротив заголовков сниппетов: Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование. У Яндекса существует отдельный поисковой робот, индексирующий файлы favicon в формате ICO и в других форматах. Обновление фавиконок в выдаче Яндекса – явление достаточно редкое, занимающее около месяца. Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер: Фавиконки добавляются в индексную базу и отображаются в поисковой выдаче в виде изображений в формате Например: http://favicon.yandex.net/favicon/https://seoportal.net Если фавиконка проиндексирована, то она отобразится на странице в формате PNG. Если иконка сайта не проиндексирована, и (или) в Яндекс. Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP. Чтобы избежать проблем с отображением иконки сайта Favicon в интерфейсе браузеров и сниппетах поисковой выдачи Яндекса, необходимо, чтобы файл иконки соответствовал определённым требованиям. Для фавиконок существуют требования: Теперь детально рассмотрим перечисленные требования к файлу фавиконки. Традиционно файл иконки сайта принято называть Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico». В Справке Google сказано, что геометрический размер фавиконки должен быть кратным 48 и составлять не меньше 48×48 px. Во вкладках, закладках и перед адресной строкой браузеров, а также в сниппетах поисковой выдачи значок Favicon отображается в размере 16×16 пикселей, поэтому делать картинку более 48×48 px не имеет смысла. Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует. Традиционным форматом Favicon является Как отмечалось ранее, если пиктограмма сайта будет создана не в формате Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами. Как правило, на сайтах применяется одна фавиконка, которую следует размещать в корневом каталоге сайта. Однако никто не запрещает использовать разные фавиконки для отдельных страниц сайта. В таком случае файлы иконок можно размещать в разных каталогах сайта, или в одном каталоге под разными именами, и обязательно подключать Favicon в HTML-коде соответствующих страниц. Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта. Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям: В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде. Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса. Иконка сайта должна быть уникальной, привлекательной и запоминающейся, поэтому к её созданию необходимо подойти серьезно, с учётом всех возможностей: Не следует пренебрегать уникальностью Favicon. Если вам очень понравилась иконка другого сайта, вы можете видоизменить её, поменяв цвет, добавив эффекты прозрачности или анимацию. Если есть сложности с выбором, то рассмотрите универсальные варианты, например иконки с изображением стрелки или другой четкой фигуры: Иконка сайта должна быть четкой и контрастной, но не слишком резкой. Не используйте Favicon с размытым нечетким изображением или со слишком резким выделением пикселей: Исходное изображение Некоторые браузеры могут отображать анимацию фавиконок с расширениями Статичная иконка Анимированная иконка Создать анимированный Favicon можно с помощью графических редакторов или специализированных онлайн-сервисов. Браузеры, не поддерживающие анимированные иконки для сайта, будут отображать только первый кадр Favicon, поэтому не следует опасаться, что иконка не будет отображаться совсем. При создании анимированного Favicon руководствуйтесь следующими правилами: Прозрачный и полупрозрачный фон фавиконок становится заметен в неактивных вкладках браузера, а в остальных случаях (в активных вкладках, закладках и даже в сниппетах Яндекса) фавиконка отображается на белом или светло-сером фоне: Можно заметить, что все крупные популярные сайты (в том числе Яндекс и Google) используют фавиконки с прозрачным фоном вместо белого. Непрозрачный белый фон практически не применяется, т. к. слишком выделяется на сером фоне неактивных вкладок браузера. При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами: Существует несколько способов создания фавиконок в формате ICO и в других форматах: с помощью онлайн-генераторов, узконаправленных программ или графических редакторов. Мы рассмотрим процесс создания в онлайн-генераторе и в программе Photoshop. В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google). Favicon.cc является простым в применении и освоении узконаправленным веб-сервисом, предоставляющим необходимый функционал по части генерации фавиконок. Favicon.cc позволяет: К условным недостаткам генератора можно отнести: Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям: Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн: Функционал favicon.cc позволяет конвертировать изображения из форматов Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки: Если вы хорошо знакомы с функционалом Adobe Photoshop, то ни что не мешает вам сделать качественную иконку для сайта с помощью этой программы. Графический редактор Adobe Photoshop не нуждается в представлении. Но как сделать иконку для сайта в «фотошопе»? Достаточно просто, если вы уже знакомы с интерфейсом программы, и достаточно сложно, если вы не имеете практики работы в Photoshop. Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon: Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок. Но можно сохранять иконку в формате BMP и заменять расширение на ICO. Но можно создавать анимационные фавиконки в формате GIF. Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015. Нарисуем иконку для сайта в программе Adobe Photoshop CC: Стандартный функционал Photoshop не позволяет сохранять файлы в формате Если у вас есть готовое изображение (например, полноразмерный логотип), вы можете сделать из него фавиконку с помощью Photoshop: Для создания анимированной пиктограммы сайта в формате Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами Рассмотрим примеры указания на иконку сайта в HTML-коде. Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу: В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов. Для подключения фавиконки в формате, отличном от По возможности применяйте иконки в формате Для подключения фавиконки, размещенной не в корневом каталоге сайта, правильно указывайте путь к файлу в атрибуте Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками. Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам. Для подключения иконки сайта, имеющей название, отличное от Во избежание возможных проблем с отображением используйте фавиконки с именем Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64. Что такое фавикон (favicon)? Термин “favicons” является сложением слов “favorite icon”; это основная иконка веб-сайта. Почему стоит использовать генератор фавикон? Вместо того, чтобы вручную менять размер своего логотипа для фавикона, вы можете воспользоваться нашим генератором, который сразу же даст вам иконку нужного размера в формате PNG. Фавикон очень важен для продвижения вашего бренда, и с нашим онлайн генератором фавикон у вас будет идеально масштабированная иконка, которая станет идентификатором вашего веб-сайта. Как загрузить фавикон на свой веб-сайт? Если вы хотите вручную вставить код своей иконки, нужно будет загрузить на сайт этот файл. Чтобы проверить, правильно ли завершился процесс, введите строку http://websitename.com/favicon.png в веб-браузер. Вам нужно будет добавить этот HTML-код для загрузки фавикона в хедер страниц и на главную страницу индексов вашего веб-сайта: <link rel=”shortcut icon” href=”http://example.com/favicon.png” /> Если вы используете кэширование веб-сайта, вам нужно будет почистить кэш веб-сайта, чтобы иконка фавикон стала видимой. Будет ли фавикон отображаться во всех веб-браузерах? Простой ответ на этот вопрос – да. Более старые браузеры типа Internet Explorer работали с форматом файлов ICO, но теперь все браузеры поддерживают файлы PNG, включая Firefox, Chrome и Safari. Проект в разработке; может кардинально измениться в любой момент. Значок — это графический
изображение (значок), связанное с определенной веб-страницей и / или веб-
сайт. Чтобы добавить значок на свой веб-сайт, вам понадобится как изображение, так и
для указания того, что изображение будет использоваться в качестве значка. Этот
документ объясняет метод, предпочитаемый W3C для указания
значок. Существует еще один распространенный метод, который проиллюстрирован ниже.
с объяснением того, почему этот метод несовместим с некоторыми
принципы веб-архитектуры. Оба метода применимы только к HTML и
XHTML, одно из обсуждаемых ограничений
ниже. В этом документе не обсуждается подробно, как создать значок.
изображение.Однако формат изображения, который вы выбрали, должен быть 16×16.
пикселей или 32×32 пикселя, используя 8-битные или 24-битные цвета. В
формат изображения должен быть одним из PNG (
Стандарт W3C), GIF или ICO. Первый подход к указанию значка — использовать XHTML 1.0 выглядит очень похоже: Второй метод указания значка основан на использовании
предопределенный URI для идентификации изображения: «/ favicon», относящийся к
корень сервера.Этот метод работает, потому что некоторые браузеры были
запрограммирован на поиск значков с использованием этого URI. Такой подход
несовместимы с некоторыми принципами веб-архитектуры и в настоящее время
обсуждается группой технической архитектуры W3C
(TAG) как их сайт проблемы Data-36.
Подводя итог проблемы: веб-архитектура разрешает администраторам сайтов
для управления своим пространством URI (для данного доменного имени), как они видят
поместиться. Соглашения, которые не представляют собой согласия сообщества и которые
уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут
привести к конфликту (так как нет общеизвестного списка этих
предопределенные URI).Одно практическое соображение иллюстрирует проблему:
у многих пользователей есть веб-сайты, хотя у них нет собственных
доменное имя. Эти пользователи не могут указывать значки, используя второй
метод, если они не могут писать в корень сервера. Однако они могут использовать
метод один для указания значка, поскольку он более гибкий и не
запретить менеджеру сайта использовать один значок в одном месте
на сайте. Есть несколько других хорошо известных посягательств на пространство URI,
в том числе «robots.txt «и расположение конфиденциальной информации P3P.
политика. Группа технической архитектуры изучает альтернативы
которые не вторгаются в пространство URI без лицензии. Грубо говоря, профиль — это определение набора
термины. В методе 1 выше мы используем атрибут Мы определили профиль, который вы можете свободно использовать для своих сайтов. Есть несколько ограничений для описанных выше подходов,
включая предпочтительный метод (поэтому TAG продолжает работать
по вопросу): Следующие участники QA Interest Group и сотрудники W3C имеют
внесли значительный вклад в содержание этого документа:
Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и
Оливье Теро (W3C).
Используйте это руководство, если у вас есть значок в формате PNG. PNG
отформатированный значок заканчивается на.PNG расширение файла Если у тебя есть
использование значка в формате ICO
этот учебник
вместо.
Хотя это и не обязательно, мы рекомендуем вам назвать свой PNG
отформатированный значок
Хотя это и не обязательно, мы рекомендуем вам загрузить свой значок в
основной или корневой каталог вашего сайта.Файл должен быть
доступный на
Вам нужно будет сообщить веб-браузеру, где находится ваш значок.
Это требует размещения
После того, как вы загрузили значок, вы сможете проверить
эта установка работала при просмотре значка на вкладке
браузер. Добавьте свою веб-страницу в закладки, чтобы убедиться, что значок
также отображается на панели закладок.
Скорее всего, ваш значок неправильно назван или был
установлен в неправильный каталог. Убедитесь, что ваш значок
доступный на
Веб-браузеры кешируют значок и иногда отображают старую
версии. Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено
318к раз
Помимо того факта, что PNG является более распространенным форматом изображений, есть ли какие-либо технические причины для предпочтения favicon.png против favicon.ico? Я поддерживаю современные браузеры, которые поддерживают избранные значки PNG.
13.6k1616 золотых знаков8383 серебряных знака128128 бронзовых знаков
Создан 27 авг.
2,151 11 золотой знак1120 серебряных знаков192192 бронзовых знака
Ответ заменен (и превратился в вики сообщества) из-за многочисленных обновлений и заметок от других в этой ветке: Не стесняйтесь обращаться к другим ответам здесь для получения более подробной информации. Все современные браузеры (протестированные с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать значок И вам не обязательно выбирать PNG только для альфа-прозрачности. Файлы ICO прекрасно поддерживают альфа-прозрачность (т.е. 32-битный цвет), хотя вряд ли какие-либо инструменты позволяют их создавать. Я регулярно использую FavIcon Generator от Dynamic Drive для создания значка Существует также бесплатный плагин Photoshop, который может их создавать.
Создан 28 авг.
2,100 золотых знаков5959 серебряных знаков7171 бронзовый знак
.Файлы png хороши, но файлы .ico также обеспечивают прозрачность альфа-канала, плюс они обеспечивают обратную совместимость. Посмотрите, какой тип StackOverflow использует, например (обратите внимание, что он прозрачный): Apple-itouch предназначена для пользователей iphone, которые создают ярлыки для веб-сайтов.
48.6k5353 золотых знака363363 серебряных знака539539 бронзовых знаков
Создан 30 авг.
Теоретическое преимущество *.ico — это контейнеры, которые могут содержать более одного значка. Например, вы можете сохранить изображение с альфа-каналом и 16-цветную версию для устаревших систем или добавить значки 32×32 и 48×48 (которые будут отображаться, например, при перетаскивании ссылки на проводник Windows). Однако эта хорошая идея имеет тенденцию противоречить реализациям браузера.
Создан 18 ноя.
1,955 11 золотой знак 22 серебряных знака 33 бронзовых знака
PNG имеет 2 преимущества: он имеет меньший размер и более широко используется и поддерживается (за исключением значков).Как упоминалось перед ICO, значки могут иметь несколько размеров, что полезно для настольных приложений, но не слишком много для веб-сайтов.
Я бы порекомендовал вам поместить favicon.ico в корень вашего приложения. Для создания файлов Png и Icon я бы порекомендовал GIMP.
Создан 02 ноя.
3,83011 золотых знаков1313 серебряных знаков2525 бронзовых знаков
Некоторые социальные инструменты, такие как Google+, используют простой метод получения значка для внешних ссылок,
http: // ваш.domainname.com/favicon.ico Поскольку они не осуществляют предварительную загрузку содержимого HTML, тег
9,6331111 золотых знаков4343 серебряных знака5959 бронзовых знаков
Создан 18 июн.
72399 серебряных знаков1616 бронзовых знаков
ICO может быть , а — png. Точнее, вы можете хранить один или несколько png внутри этого минимального формата контейнера вместо обычного растрового изображения + альфа, которое у всех прочно ассоциируется с ico. устарела, она появилась в Windows Vista (2007) и хорошо поддерживается браузерами, хотя и не обязательно программным обеспечением для редактирования значков. Любой допустимый png (весь, включая заголовок) может предшествовать 6-байтовому заголовку ico и 16-байтовому каталогу изображений.
Создан 22 фев.
7,39844 золотых знака3333 серебряных знака2525 бронзовых знаков
Для чего стоит, делаю так: А я по-прежнему держу favicon.ico в корне.
Создан 26 мая.
54877 серебряных знаков1616 бронзовых знаков
В любом случае избегайте PNG, если вам нужна надежная совместимость с IE6.
Создан 27 авг.
12.9k55 золотых знаков3131 серебряный знак4242 бронзовых знака
Ваша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь с тем, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie
Настроить параметры
Android гибок в отношении дизайна иконок.Однако он автоматически округляет значки, что может быть плохой новостью, если вашему значку нужны квадратные углы.
Кроме того, убедитесь, что ваш значок всегда будет выделяться, независимо от фона. Воспользуйтесь приведенными ниже вариантами, чтобы подобрать наиболее подходящий.
Без изменений, сохраните эталонное изображение как есть.
Добавьте сплошной простой фон, чтобы заполнить прозрачные области.
Добавьте поля и простой фон.
Фоновый цвет
Совет: вы можете выбрать цвет прямо из предварительного просмотра.
Размер поля (для значка 96×96)
Примените небольшую тень, как в официальных приложениях Google (Gmail, Play Store, YouTube …).
Имя приложения
Цвет темы
Начиная с Android Lollipop, вы можете настроить цвет панели задач в переключателе.
Android Chrome M39 представляет собой манифест, который помогает вам уточнить поведение ссылки «Добавить на главный экран».
Браузер. В этом режиме, когда пользователь щелкает ссылку, Android Chrome ведет себя так, как если бы страница была открыта, как любой обычный веб-сайт.
Автономный. В этом режиме Android Chrome придает открываемой странице немного более «родной» стиль.В частности, он позволяет указать начальный URL-адрес и ориентацию экрана. Он также удаляет панель навигации и
дает вашему веб-сайту отдельную вкладку в переключателе задач.
Начальный URL
Обычно ваша домашняя страница. Используйте это поле, чтобы переопределить URL-адрес страницы, отмеченной закладкой.
Не указано. Android Chrome будет вести себя как обычно, когда пользователь поворачивает свое устройство.
Установить книжную ориентацию экрана.
Установить альбомную ориентацию экрана.
Android Chrome 39 и выше
Создавайте только рекомендуемые значки с высоким разрешением
Создайте все задокументированные значки
Android Chrome 38 и более ранние версии
Объявите значок в HTML-коде
Если вы этого не сделаете, Chrome использует значок Apple Touch.
Если ваше основное изображение не подходит для Android, вы можете отправить изображение, разработанное специально для Android.
Выберите картинку для Android Chrome
Веб-сайт
9 марта 2021 г. 2мин чтения Вы можете встретить термин favicon, когда речь идет о веб-дизайне и разработке.Но что это такое? Что ж, в этой статье мы ответим на ваш вопрос и покажем, как добавить значок на свой сайт. Давайте начнем! Проще говоря, значок — это логотип вашего веб-сайта, который появляется рядом с мета-заголовком на вкладке вашего браузера. Другими словами, вместо того, чтобы показывать пустой значок документа в браузере, на вашем веб-сайте будет отображаться значок вашего официального веб-сайта. Большинство веб-сайтов обычно используют свой логотип в качестве значка.Если на вашем веб-сайте нет логотипа, вы можете просто создать его с помощью бесплатного конструктора логотипов. Таким образом, ваши посетители легко заметят ваш веб-сайт, когда они открывают множество вкладок в одном окне браузера. К тому же ваш сайт будет выглядеть более профессионально. Выберите один из двух способов ниже, чтобы добавить значок на свой веб-сайт! Самый простой способ добавить значок на свой сайт — загрузить его как .png или .ico из Файлового менеджера вашего хостинга . Для этого выполните следующие действия: Если у вас уже есть файл .png, , используйте его. Однако конвертируйте изображение в формат .ico с помощью ConvertICo.com, если вам когда-нибудь понадобится. Большинство браузеров автоматически обнаруживают файл favicon.png и favicon.ico , расположенный в каталоге вашего веб-сайта, как значок вашего веб-сайта. Так что кодировать не нужно. Кроме того, если у вас есть изображение, отличное от формата .png или .ico (jpg, BMP, gif и т. Д.), Вы также можете использовать его в качестве значка своего веб-сайта. Однако вам необходимо изменить файл header.php в папке с используемой в данный момент темой. Для этого выполните следующие действия в hPanel. Вы можете сохранить исходное имя изображения или переименовать его в favicon . Рекомендуется переименовать значок, чтобы отличать его от других изображений. Измените части / jpg и /favicon.jpg в соответствии с форматом и названием изображения, которое вы собираетесь использовать. Если вы не видите новый значок, очистите кеш браузера и перезапустите его. Как видите, наличие значка на вашем сайте имеет решающее значение. Это не только делает ваш сайт заметным на вкладках браузера, но и придает ему профессиональный вид. Вы можете добавить его автоматически, загрузив изображение .png или .ico с именем favicon в папку public_html . В качестве альтернативы вы можете загрузить обычное изображение (jpg, BMP, gif и т. Д.) И изменить файл header.php в папке с используемой в данный момент темой. Было ли это руководство полезным? Оставьте комментарий ниже! Значок favicon — это небольшой файл изображения, содержащий один или несколько значков, которые можно использовать для представления веб-сайта, блога или даже отдельной веб-страницы. Favicons обычно появляются в таких местах, как вкладка браузера, адресная строка, история браузера, панель закладок и т. Д. Favicons — отличный способ отличить ваш сайт от других, особенно когда у пользователей открыто много вкладок или они ищут через свой браузер. история или панель закладок. Фавиконы помогают сделать ваш бренд более заметным, поскольку пользователи научатся связывать цвета, шрифты и т. Д. Фавикона с вашим брендом, когда они будут использовать ваш веб-сайт. Если у вас нет значка для вашего веб-сайта, пользователи обычно видят обычный значок веб-страницы. Сначала вам нужно загрузить значок на свой сервер. Вы можете назвать его как угодно и разместить где угодно, но если вы назовете его Вот пример кода, который вы можете использовать. Поместите его в элемент Обратите внимание, что если вы используете этот код, вы можете назвать значок как угодно. Кроме того, хотя в этом примере используется расширение Favicons может иметь размер 16×16, 32×32, 48×48 или 64×64 пикселей, а также 8-битную, 24-битную или 32-битную глубину цвета. с операционной системой iOS версии 1.1.3 или более поздней (например, iPod Touch, iPhone и iPad) поддерживают возможность предоставления пользовательского значка, который будет отображаться на главном экране пользователей, когда они используют Web. Функция клипа (называется Добавить на главный экран в Mobile Safari). Некоторые устройства Android также поддерживают эту функцию. Чтобы предоставить значок для этой цели, загрузите значок на сервер, затем добавьте следующий код с HTML-кодом веб-сайта внутри элемента iOS добавит закругленные углы и отражающий блеск значку на главном экране iOS. Если вы предпочитаете без отражающего блеска, используйте следующий код: Самый простой способ настроить значок (при условии, что изображение веб-размера уже создано), если использовать следующий код и поместить его в тег Настройка значка может быть очень простой задачей, если вы освоите его. Самый простой и быстрый способ указан выше, но что, если вы хотите иметь разные размеры значков для разных устройств и браузеров? Чтобы добавить разные размеры к ссылке favicon, вы можете просто добавить атрибут Основной способ установить значок — использовать ICO-файл. Хотя все современные браузеры могут читать формат png, он в основном используется для более старых версий IE. В Интернете можно найти множество генераторов favicon. Иконка сайта в закладках браузера
Значение иконки сайта в SEO
Иконка сайта и ПС Яндекс
Favicon в сниппетах Яндекса
Предупреждение об отсутствии файла
Проверка наличия Favicon в индексе
PNG
. Проверить наличие иконки сайта в индексе Яндекса можно по ссылке:http://favicon.yandex.net/favicon/[абсолютный URL-адрес]
Проверка Favicon на соответствие требованиям
Вебмастере присутствует указанное выше предупреждение об её отсутствии на сайте, то проверьте файл на соответствие требованиям.
Требования к иконке сайта
Название файла
favicon
, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico
(именно в формате ICO
), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico
, или иметь расширение, отличное от ICO
, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.Геометрический размер
Формат файла
ICO
, однако современные браузеры могут отображать фавиконки и в других форматах:ICO
, то в HTML-коде необходимо явно указывать путь к файлу, иначе браузер (а также робот Яндекса) не сможет определить иконку для отображения.Размещение на сайте
HTML-код иконки для сайта
favicon
,ICO
,Какой должна быть иконка сайта?
Привлекательность
ICO
и GIF
. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.JPG
, позволяют использовать эффекты прозрачности и полупрозрачности. При необходимости следует этим пользоваться.
Уникальность
Контрастность
Анимация в Favicon
ico
и gif
:Эффект прозрачности
Как сделать Favicon для сайта?
Онлайн-генератор favicon.cc
Возможности сервиса
ICO
,ICO
.Создание новой фавиконки онлайн
Создание Favicon в онлайн-генераторе
Создание анимированной фавиконки
Онлайн-конвертер Favicon
JPG
, JPEG
, GIF
, PNG
, BMP
, ICO
, CUR
в формат ICO
с преобразованием их размера:
Онлайн-конвертер favicon. cc
Готовые бесплатные фавиконки
Создание Favicon в Photoshop
Особенности программы
Рисование Favicon
Рисование Favicon в Photoshop CTRL
+ +
и CTRL
+ -
),CTRL
+ '
), ..),
Сохранение фавиконки
ICO
. Для этого можно воспользоваться простым трюком смены формата BMP
на ICO
:
Смена формата Favicon с BMP на ICO favicon
, а в поле «Тип файла» из выпадающего списка выбираем BMP
и сохраняем,ICO
.Создание Favicon из изображения
Изменение размера и настройка четкости фавиконки C
),ALT
+ CTRL
+ I
),ALT
+ CTRL
+ C
),ALT
+ CTRL
+ I
): ALT
+ S
), или в другом веб-формате (клавиши ALT
+ CTRL
+ SHIFT
+ S
).Создание анимированной Favicon
GIF
:
ALT
+ CTRL
+ SHIFT
+ S
): GIF
,Как установить Favicon на сайт?
favicon.ico
в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.HTML-код для Favicon
rel
, type
и href
, размещаемый в разделе head:<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
Атрибут Значение Пояснение rel icon Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны. shortcut icon type image/x-icon Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата ICO
.image/vnd.microsoft.icon image/gif Для фавиконок в формате GIF. image/jpeg Для фавиконок в формате JPEG. image/png Для фавиконок в формате PNG. image/bmp Для фавиконок в формате BMP. image/svg Для фавиконок в формате SVG. image/apng Для Favicon формата APNG
.
href [относительный URL] Например: /favicon.ico [абсолютный URL] Например: http://site.net/favicon.ico [Код base64] Например: data:image/x-icon;base64,AAABAA… Примеры подключения
HTML-тег для favicon.ico
<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->
HTML-тег для Favicon других форматов
ICO
, указывайте соответствующий MIME-тип фавиконки в атрибуте type
. Например:<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">
ICO
, чтобы избежать возможных проблем с их отображением.HTML-тег для Favicon вне корневого каталога
href
. Например:
<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">
HTML-тег для фавиконок с нестандартным названием
favicon
, не забудьте указать это в атрибуте href
. Например:<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">
favicon
.HTML-тег для фавиконок в base64
href
тега link код Base64:<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">
БЕСПЛАТНЫЙ генератор иконок для сайтов — выберите иконку из галереи или воспользуйтесь своей
Обычно это очень маленькая по размеру иконка (16×16 или 32×32), которая отображается рядом с URL-адресом вашего веб-сайта во вкладках и закладках веб-браузера. Благодаря этой иконке пользователям проще узнать ваш веб-сайт, если они открывают его из закладок.
Как добавить значок на свой сайт
Статус этого документа
Многие недавние пользовательские агенты (например, графические браузеры и
программы чтения новостей) отображают их как визуальное напоминание о веб-сайте
идентичность в адресной строке или во вкладках. Википедия включает
статья о
favicons [FAVICON-WIKIPEDIA].
Метод 1 (предпочтительный): использование значения атрибута
rel
определяется в профиле
rel
значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно
ниже.В этом примере HTML 4.01 значок, идентифицированный через URI
http://example.com/myicon.png
как значок:
profile = "http://www.w3.org/2005/10/profile" >
[…]
[…]
w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
profile = "http://www.w3.org/2005/10/profile" >
[…]
[…]
Метод 2 (не рекомендуется): размещение значка по заранее определенному URI
Использование профилей для определения терминов, таких как «значок»
В идеале профиль включает в себя как машиночитаемую информацию
и удобочитаемую информацию. В HTML 4.01 и XHTML 1.0 несколько
атрибуты, такие как атрибут
rel
, не имеют предопределенного набора
значения.Вместо этого автор может предоставить значения в соответствии с потребностями и
затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы
рекомендуют авторам использовать значение «icon» и профиль, который
объясняет, что «когда мы говорим« значок », мы имеем в виду« это значок »». rel
с
СВЯЗЬ
элемент и выберите профиль с атрибутом profile
на элементе HEAD. Ограничения
отн.
. Для получения дополнительной информации об использовании профилей
в HTML и XHTML см. GRDDL
[GRDDL]. Список литературы
Коннолли, редакторы, материалы, представленные командой W3C, 16 мая
2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия
доступно по адресу http://www.w3.org/TeamSubmission/grddl/.
Благодарности
Руководств — favicon.io
Шаг 1. Назовите свой Favicon
favicon.png
. Если вы хотите использовать собственное имя, тогда
перейдите к этому расширенному руководству.
Шаг 2. Загрузите свой Favicon
yourwebsite.com/favicon.ico
. Если вы хотите использовать
пользовательское местоположение, затем перейдите к этому расширенному руководству.
Шаг 3. Ссылка на ваш Favicon
ссылка
тег внутри тега head
вашего
Веб-сайт. Пример тега ссылки показан ниже.Ты сможешь
необходимо заменить значение атрибута href
с местоположением вашего значка в формате PNG.
<ссылка rel = "icon"
href = "http://www.yourwebsite.com/favicon.png">
Шаг 4. Тестирование
Шаг 5. Отладка
Почему не отображается мой значок?
yourwebsite.com/favicon.ico
Почему не отображается последняя версия?
Вам может потребоваться очистить кеш, если кажется, что ваш
значок не обновляется. Это заставит браузер отображать
последняя версия вашего значка.
favicon.png vs favicon.ico — почему я должен использовать PNG вместо ICO?
favicon.png vs favicon.ico — почему я должен использовать PNG вместо ICO? — Переполнение стека
IE6)
.ico
, если вы не указали ярлык через
. Поэтому, если вы не указываете его явно, лучше всегда иметь файл favicon.ico
, чтобы избежать 404. Yahoo! предлагает сделать его маленьким и кешируемым. .ico
файлы с альфа-прозрачностью. Это единственный известный мне онлайн-инструмент, который может это сделать.
Если у вас есть доступ к заголовку страниц вашего веб-сайта, используйте тег, чтобы указать на файл png.
Таким образом, старый браузер будет отображать файл favicon.ico, а новый — png.
не будет работать. В этом случае вы можете использовать правило mod_rewrite или просто поместить файл в местоположение по умолчанию.
GIMP имеет встроенную поддержку. Просто экспортируйте как ico и отметьте «Сжатый (PNG)».
Не тот ответ, который вы ищете? Посмотрите другие вопросы с метками png favicon ico или задайте свой вопрос.
Stack Overflow лучше всего работает с включенным JavaScript
Favicon Generator для идеальных иконок во всех браузерах
Современные версии
Устаревшие версии
Посвященная картина
Руководство для новичков по добавлению значка на свой веб-сайт
Что такое Favicon и почему он важен?
Как добавить значок на свой сайт?
Разрешить браузерам автоматически создавать значок
Загрузите обычное изображение и отредактируйте файл header.php своей темы
Заключение
HTML Код значка
Добавление значка на ваш веб-сайт
favicon.ico
и поместите в корневой каталог веб-сайта, большинство браузеров автоматически отобразят его. Сказав это, вы также можете добавить HTML-код на свой веб-сайт, чтобы браузеры знали, какой значок использовать.
(замените местоположение изображения на местоположение изображения, которое будет использоваться):
.ico
, вы можете использовать другие форматы изображений, например .png
. .gif,
, .jpeg,
и даже анимированные GIF-файлы. Однако формат .ico
уже довольно давно получил широкое распространение в браузерах и является распространенным форматом при использовании значков. Значки главного экрана Apple iOS
Устройства Apple
(замените местоположение изображения на местоположение изображения, которое будет использоваться ).
Как настроить фавикон
# Короткий ответ
.
# Длинный ответ
#PNG Размеры
sizes
к тегу ссылки.Типичные размеры значков в большинстве браузеров: 16x16
, 32x32
и выше. Для некоторых других браузеров, таких как Google Tv и Chrome на Android, рекомендуемые размеры: 96x96
и 192x192
соответственно. Пример этих размеров будет выглядеть так.
# тип файла ico