[{"data":1,"prerenderedAt":11},["ShallowReactive",2],{"guide:ru:blog\u002Ffavicon-sizes-which-ones-you-need":-1,"article-ru-favicon-sizes-which-ones-you-need":3},{"slug":4,"title":5,"description":6,"date":7,"keyword":8,"tool":9,"html":10},"favicon-sizes-which-ones-you-need","Размеры фавиконок: Какие вам действительно нужны в 2025 году","Простое руководство по размерам фавиконок: 16x16, 32x32, 180x180, 192 и 512, какие из них используют современные браузеры и HTML-код для вставки.","2026-10-12","favicon size","favicon-generator","\u003Cp>Если искать "favicon size", то вы получите множество противоречивых чисел: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Большинство таких списков были написаны десять лет назад и никогда не обновлялись. На практике современному сайту нужно примерно четыре файла, и вы можете создать все их за один раз с помощью \u003Ca href=\"\u002Fru\u002Ffavicon-generator\">генератора фавиконок\u003C\u002Fa> — он работает полностью в вашем браузере, так что ваш логотип никогда не покидает вашу машину.\u003C\u002Fp>\n\u003Cp>Вот для чего нужен каждый размер, и что вы можете безопасно пропустить.\u003C\u002Fp>\n\u003Ch2>Размеры, которые по-прежнему важны\u003C\u002Fh2>\n\u003Ch3>16x16 и 32x32 — вкладки браузера и закладки\u003C\u002Fh3>\n\u003Cp>Это классическая фавиконка. 16x16 — это то, что вы видите в переполненной полосе вкладок; 32x32 используется на экранах с высоким DPI, на панели закладок и в некоторых интерфейсах адресной строки. Оба обычно упакованы в один файл \u003Ccode>favicon.ico\u003C\u002Fcode>, который может содержать несколько разрешений одновременно. Windows также извлекает 48x48 из того же \u003Ccode>.ico\u003C\u002Fcode> для ярлыков рабочего стола, поэтому включение его почти ничего не стоит.\u003C\u002Fp>\n\u003Ch3>180x180 — Apple touch icon\u003C\u002Fh3>\n\u003Cp>Когда кто-то нажимает "Добавить на экран" на iPhone или iPad, Safari ищет \u003Ccode>apple-touch-icon.png\u003C\u002Fcode> размером 180x180. Если его там нет, iOS делает снимок экрана вашей страницы и использует его вместо этого, что выглядит ужасно. Этот один PNG покрывает все текущие устройства iOS, потому что система масштабирует его по мере необходимости.\u003C\u002Fp>\n\u003Ch3>192x192 и 512x512 — Android и PWA\u003C\u002Fh3>\n\u003Cp>Android Chrome и устанавливаемые веб-приложения читают значки из вашего \u003Ccode>site.webmanifest\u003C\u002Fcode>. 192 — это значок на главном экране; 512 используется для экрана-заставки и списков приложений. Если вы когда-либо захотите, чтобы ваш сайт был устанавливаемым, вам нужны оба.\u003C\u002Fp>\n\u003Ch3>SVG — опционально, но полезно\u003C\u002Fh3>\n\u003Cp>Firefox и Chrome оба поддерживают фавиконку SVG, которая остается четкой при любом размере и может реагировать на темный режим с помощью медиа-запроса внутри файла. Это бонус, а не замена — Safari и более старые браузеры по-прежнему хотят растровые версии.\u003C\u002Fp>\n\u003Ch2>Что вы можете пропустить\u003C\u002Fh2>\n\u003Cp>64x64, 96x96, 128x128, весь набор плиток Windows и дюжину устаревших файлов в стиле \u003Ccode>apple-touch-icon-76x76\u003C\u002Fcode>. Они были нужны для устройств, которых давно уже нет. Доставка двадцати файлов значков раздувает ваш репозиторий и ничего измеримого не дает.\u003C\u002Fp>\n\u003Ch2>HTML код\u003C\u002Fh2>\n\u003Cp>Поместите файлы в корень вашего сайта и добавьте это в \u003Ccode><head>\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-html\"><link rel="icon" href="\u002Ffavicon.ico" sizes="any">\n<link rel="icon" href="\u002Ficon.svg" type="image\u002Fsvg+xml">\n<link rel="apple-touch-icon" href="\u002Fapple-touch-icon.png">\n<link rel="manifest" href="\u002Fsite.webmanifest">\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>И в манифесте:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">"icons": [\n  { "src": "\u002Ficon-192.png", "type": "image\u002Fpng", "sizes": "192x192" },\n  { "src": "\u002Ficon-512.png", "type": "image\u002Fpng", "sizes": "512x512" }\n]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Дизайн для 16 пикселей\u003C\u002Fh2>\n\u003Cp>Сложная часть — не экспорт, а то, что полный логотип превращается в кашу при размере 16x16. Несколько вещей, которые помогают:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Используйте фрагмент, а не весь логотип.\u003C\u002Fstrong> Одну букву, один глиф, одну форму. Логотипы-словесные выражения нечитаемы при размере вкладки.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Начните с квадрата.\u003C\u002Fstrong> Если ваш исходный логотип широкий, \u003Ca href=\"\u002Fru\u002Fcrop-image\">обрежьте его до квадрата\u003C\u002Fa> в первую очередь, чтобы генератор не добавлял письмо-боксинг с пустым пространством.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Держите контраст высоким.\u003C\u002Fstrong> Тонкие линии исчезают. Сплошные формы выживают.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Решите о фоне.\u003C\u002Fstrong> Прозрачный PNG адаптируется к светлому и темному окрашиванию браузера; если ваш знак темный, рассмотрите возможность дать ему вместо этого плитку с заплатой цвета. Вы можете \u003Ca href=\"\u002Fru\u002Fremove-background\">удалить фон\u003C\u002Fa> из снимка логотипа за секунды, если у вас есть только плоский JPG.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Помните о безопасной области.\u003C\u002Fstrong> Android маскирует значки в круги и скругленные квадраты, поэтому оставьте примерно 10% отступа вокруг края вашей работы размером 512.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Если вы подбираете фон фавиконки к цвету бренда вашего сайта, \u003Ca href=\"\u002Fru\u002Fcolor-picker\">инструмент выбора цвета изображения\u003C\u002Fa> вытащит точный хекс из существующего снимка экрана — это также удобно для мета-тега \u003Ccode>theme-color\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2>Создайте весь набор за один раз\u003C\u002Fh2>\n\u003Cp>Ничего не загружайте: просто перетащите квадратный PNG или SVG в \u003Ca href=\"\u002Fru\u002Ffavicon-generator\">бесплатный браузерный генератор фавиконок\u003C\u002Fa> и он создаст \u003Ccode>.ico\u003C\u002Fcode>, Apple touch icon и 192\u002F512 PNG локально в вашей вкладке. Ничего не отправляется на сервер, нет необходимости в регистрации, и никакая копия вашего неопубликованного логотипа не оказывается в чьем-то другом хранилище.\u003C\u002Fp>\n\u003Cp>Затем уменьшите масштаб браузера, посмотрите на вкладку и задайте единственный важный вопрос: можете ли вы понять, что это?\u003C\u002Fp>\n",1791831532133]