Какие файлы фавикона нужны сайту и какие у них размеры

Сайту нужен небольшой набор файлов иконок, и большинство решений касается размеров. Положите favicon.ico с изображениями 16, 32 и 48 пикселей в корень сайта для вкладок браузера и Windows. Добавьте иконку Apple touch 180 px для экранов «Домой» на iPhone и iPad, а также PNG-иконки 192 и 512 px, перечисленные в манифесте веб-приложения. Генератор фавикона создаёт все они из одного логотипа и пишет строки HTML, которые можно вставить на страницы.

Файлы и их размеры

ZIP, который скачивает генератор, содержит все семь файлов. Файл favicon.ico собран из трёх PNG-изображений размером 16, 32 и 48 пикселей, которые хранятся внутри одного файла. Каждая иконка — тот же логотип, нарисованный меньше. Генератор работает с 512-пиксельной версией вашего изображения и делает каждый размер из неё.

Строки HTML

Генератор выводит четыре строки для секции head ваших страниц:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Первая строка ведёт к favicon.ico и указывает размер 48 на 48. Вторая задаёт PNG на 32 пикселя. Третья называет иконку Apple touch, а четвёртая ведёт к манифесту, где перечислены иконки 192 и 512 px. PNG на 16 пикселей есть в ZIP, но в этих строках его нет. Браузеры также сами ищут /favicon.ico, поэтому файл будет найден, даже если первой строки нет. Пути оставьте как есть, если ваши файлы не лежат в другом месте.

Почему маленьким размерам нужны простые формы

На иконке 16 на 16 пикселей всего 256 точек. У иконки 48 пикселей их 2 304, а у исходника 512 пикселей — 262 144. Большая часть деталей логотипа теряется уже при 16 пикселях, поэтому тонкая линия или мелкое слово превращаются в размытое пятно. Используйте простой знак или одну-две буквы с сильным контрастом.

Режим букв принимает один или два символа и рисует их крупно по центру иконки, уменьшая, если они слишком широкие. Доступны формы Square, Rounded и Circle. Предпросмотр показывает результаты на 16, 32, 48, 180 и 512 пикселей рядом, а также вкладки светлой и тёмной темы, так что вы можете оценить мелкие размеры до загрузки. Предпросмотр обновляется при смене формы, полей или фона, поэтому можно сначала попробовать каждую настройку.

Поля, фон и иконка Apple

Поля имеют три варианта: No padding, Small и Large. Small оставляет по 10 процентов иконки пустыми с каждой стороны, а Large — по 20 процентов. В режиме изображения No padding обрезает картинку до центрального квадрата, поэтому края широкого логотипа теряются. Варианты с полями вписывают всё изображение в квадрат целиком.

Варианты фона: Transparent, White и Custom; по умолчанию выбран Transparent. Иконка Apple touch всегда непрозрачна. В режиме изображения её прозрачные области заполняются выбранным фоном, а если фон Transparent, то белым. В режиме букв они заполняются цветом фона для буквы. Прозрачные области иконки Apple touch могут показываться чёрными на iPhone и iPad, поэтому генератор их заполняет. Остальные размеры сохраняют выбранную вами прозрачность. Почему прозрачный PNG становится чёрным объясняет причину.

Фавикон квадратный, поэтому широкому логотипу сначала нужна квадратная рамка. Создание квадратного фото вписывает всё изображение в кадр 1:1 с размытой, белой, чёрной или своей рамкой, так что ничего не обрезается. Изменить размер изображения задаёт точные пиксели. Если включить Keep proportions и заполнить обе стороны, картинка впишется в рамку без искажений. Пропорции фото рассказывает о распространённых форматах.

Изменения, которые появляются не сразу

Браузеры хранят фавиконы в кеше. Изменённый файл по тому же адресу может ещё некоторое время показывать старую иконку, поэтому обычного обновления страницы часто недостаточно. Откройте адрес иконки напрямую, чтобы убедиться, что новый файл есть на сервере, затем обновите страницу с обходом кеша. Если старая иконка всё ещё видна, дайте новому файлу другое имя и измените ссылку так, чтобы она вела на него.

Как сделать это в fixmint

1. Выберите Image и перетащите логотип в поле или выберите Letter и введите одну или две буквы.
2. Установите Padding в значение None, Small или Large, а Background — в Transparent, White или Custom colour.
3. Проверьте иконки 16, 32 и 48 px на вкладках светлой и тёмной темы, а также предпросмотр 180 и 512 px.
4. Нажмите Download ZIP, чтобы скачать все семь файлов, или Download favicon.ico, чтобы скачать только этот файл.
5. Нажмите Copy HTML и вставьте строки из раздела HTML for your head в head каждой страницы.

Особые случаи

• Ваше изображение остаётся на вашем устройстве. Генератор создаёт иконки в браузере, ничего не загружается на сервер.
• Две буквы. Принимаются два символа; они рисуются мельче, чтобы поместиться оба, поэтому на 16 пикселях их труднее прочитать, чем одну букву.
• Имена файлов. Сохраняйте имена, которые используются в HTML, потому что ссылки ведут на них.
• Нечитаемые файлы. Если изображение не получается превратить в иконки, генератор показывает сообщение «Could not make the icons from this input. Try another image.» и очищает результаты. Попробуйте другой файл или сохраните изображение заново в распространённом формате.