Создание favicon для сайта 2020

[Zempik]

Если не ошибаюсь, то в Firefox была возможность отображать favicon в формате .gif, то есть с движением.

P.S. о, даже статью нашел про генерируемый favicon — https://habr.com/ru/company/ruvds/blog/464127/

[Dinver]

Есть даже игра в favicon DEFENDER OF THE FAVICON.

[granvi]

"Некоторые браузеры не могут выбрать правильный значок в файле ICO"…
Из-за криворукости разработчиков теапрь налюдо все менять?
Что следующее на очереди?

[Snelsi]

Вместо всей этой горы иконок можно использовать один svg плюс три картинки самых больших размеров. Хорошая статья по ссылке.

[Alekseyz]

Увы, но нет, ios не поддерживает svg.

[Kolonist]

Если бы вы прошли по предложенной комментатором ссылке, или, хотя бы, внимательно прочитали сам комментарий, то не написали бы свой. Ясно же написано: «один svg плюс три картинки».

[Alekseyz]

С чего вы решили что их 3? Там их целая плеяда ios
Остается рядом положить 16 и 32 и весь диапазон покрыт без всяких svg.

[Kolonist]

Иногда есть смысл не просто в масштабировании иконки, а в подготовке разных иконок для разных размеров. Например, самая маленькая иконка во вкладке браузера может быть схематичной, а большая, для экрана запуска на смарте, может быть более детализированной, с градиентами и с большим количеством цветов.

[FODD]

Я забил на это легаси и везде леплю один png 256x256. Проблем ноль. Благо, что не нужно поддерживать всякое легаси вроде ie11 и прочих динозавров не самых актуальных браузеров.
Современные браузеры прекрасно ресайзят единственную иконку так, как им нужно без всяких проблем.

[savostin]

Ну-ка покажите мне иконку, которая «без всяких проблем» ресайзится из 256 на 16…
Обычно (дизайнеры иконок) каждый размер отрисовывают отдельно с разной детализацией.

[FODD]

Например
Взял рандомную картинку с интернета. Такого качества ресайза точно хватит для большинства сайтов. Или я не прав? =)

UPD: С учетом, что большиство фавиконок в 256х256 имеют не так много деталей, как эта картинка, все выглядит еще лучше.

[Denai]

А что на этой фавиконке изображено то? Ресайзится оно может и да, но потом понять картинку без шансов.

[FODD]

Это уже проблема самой иконки как таковой, разве нет? Естественно, Мону Лизу не разглядишь. А вот если компания не хочет тратить много времени на логотип, то можно его прям целиком как фавикон использвовать и даже сэкономить 1 запрос при загрузке.

[zv347]

А что изображено на иконке Хабра, вы можете понять? Фавиконки не нужно «понимать» сами по себе (и на размере 16х16 это, как правило, невозможно), но они хорошо распознаются, если раньше видел большое изображение, и по используемым цветам.
В примере выше иконка теоретически вполне узнаваемая.

[Denai]

Конечно могу. Вы что-то на ней не видите? У всех сайтов, которыми часто пользуюсь, фавиконка читаемая и часто это буква+цвет или простой символ

[extempl]

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

[jack36]

В смысле не приходится использовать не самые актуальные браузеры или IE11? До сих пор находятся чудаки-заказчики, которые требуют корректного отображения в IE8 или чего еще лучше IE6… так же до сих пор у нас используют доптопные браузеры…

[pepelsbey]

Я не знаю, откуда вы скопировали категории, но так не говорят по-русски:

• Classic desktop browsers — Десктопные браузеры
• Android Chrome — Chrome на Android
• iOS Safari Web Clip — Иконка закладки в iOS (PWA)
• Mac OS — macOS
• Windows — Windows

Поправьте, пожалуйста. А то очень машинно звучит и путает.

[HoroSamiK]

спасибо, исправила)

[Temtaime]

512x512 для маленькой иконки в закладках браузера, серьёзно?
А что не 4K сразу?
Вдруг пользователь на своей ретине сделает ярлык на пол рабочего стола?

[VEG]

Кстати, файлы ICO могут внутри себя содержать и иконки в формате PNG. Например, такие оптимизированные иконки можно делать в Color Quantizer (для этого в нём нужно открыть заранее созданную иконку в обычном ICO без PNG) или даже собрать из кучки PNG-файлов при помощи FASM.

Бросил один favicon.ico в корень сайта — и оно работает. И не нужно ничего в мета-теги прописывать. Удобно =)

[ivan386]

А почему кстати ICO устаревший формат? Что в нём не так?

[justhabrauser]

Видимо та же история, что и с айфонами.
Формату минимум 20 лет, в мусорку!

[mSnus]

Достаточно нарисовать одну большую картинку и сунуть в RealFaviconGenerator. При некотором везении он даже нормальный SVG создаст сам, а всё и остальное, все форматы, теги и манифест — отлично делает.

[extempl]

В 2020 уже можно было бы написать про раздельные иконки для тёмных и светлых тем: https://caniuse.com/?search=prefers-color-scheme
https://flaviocopes.com/dark-mode-favicon/

К сожалению, пока стилевое решение в SVG поддерживается не всеми браузерами одинаково, пока для этого нужен небольшой скрипт, который при загрузке (и при смене оной) проверяет выбранную тему и подменяет путь к файлу, как это сделано, например, на гитхабе.

[pragmatik]

Очень похоже на статью 2017 года. В последнем абзаце, как и в указанной статье, представлена ссылка на тот же сайт. Это наводит на мысль, что обе статьи заказные.

[technik]

Давно пользуюсь favicon-generator.org, делает автоматом 95% из того что вы указали.

[mcfev]

А ещё почему-то мало информации о том, что иконки на android без указания свойства «"purpose": "maskable"» будут квадратными вставленными в круг с большими белыми границами, а с указанием красиво растянутся и уже системой округлятся до нужных

[constlapkin]

Целая статья о работе сервиса по генерации фавиконок?