Ответ 1
Существует несколько способов создания значка. Лучший способ для вас зависит от различных факторов:
- Время, затрачиваемое на выполнение этой задачи. Для многих людей это "как можно быстрее".
- Усилия, которые вы готовы сделать. Например, рисование значка 16x16 вручную для улучшения результатов.
- Конкретные ограничения, такие как поддержка определенного браузера с нечетными спецификациями.
Первый метод: используйте генератор favicon
Если вы хотите сделать работу хорошо и быстро, вы можете использовать генератор favicon. Это создает фотографии и HTML-код для всех основных настольных и мобильных браузеров. Полное раскрытие: я автор этого сайта.
Преимущества такого решения: он быстро и все соображения совместимости уже были адресованы вам.
Второй способ: создать favicon.ico(только для настольных браузеров)
Как вы можете предположить, вы можете создать файл favicon.ico, который содержит изображения 16x16 и 32x32 (обратите внимание, что Microsoft рекомендует 16x16, 32x32 и 48x48).
Затем объявите его в своем HTML-коде:
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
Этот метод будет работать со всеми настольными браузерами, старыми и новыми. Но большинство мобильных браузеров будут игнорировать значок.
О вашем предположении размещения файла favicon.ico в корне и не объявляя его: остерегайтесь, хотя эта техника работает в большинстве браузеров, она не на 100% надежна. Например, Windows Safari не может найти его (предоставлено: этот браузер как-то устарел в Windows, но вы понимаете). Этот метод полезен в сочетании с значками PNG (для современных браузеров).
Третий метод: создайте значок favicon.ico, значок PNG и значок Apple Touch (все браузеры)
В вашем вопросе вы не упоминаете мобильные браузеры. Большинство из них будут игнорировать файл favicon.ico. Хотя ваш сайт может быть посвящен настольным браузерам, возможно, вы не хотите вообще игнорировать мобильные браузеры.
Вы можете добиться хорошей совместимости с:
-
favicon.ico, см. выше. - Значок 192x192 PNG для Android Chrome
- Значок Apple Touch 180x180 (для iPhone 6 Plus, другое устройство будет масштабировать его по мере необходимости).
Объявите их с помощью
<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">
Это не полная история, но в большинстве случаев это достаточно хорошо.