Должен ли favicon иметь прозрачный фон?
Прозрачный фон подходит favicon для вкладки браузера, позволяя знаку чисто ложиться на светлый или тёмный интерфейс. Но iOS игнорирует прозрачность на apple-touch-icon и накладывает его на чёрный, так что прозрачная иконка домашнего экрана может стать фигурой, парящей на чёрном квадрате. Используйте прозрачность для favicon вкладки и сплошной фон для apple-touch-icon и других размеров домашнего экрана.
Прозрачно там, где помогает, сплошно там, где нет
Для favicon вкладки прозрачность — преимущество: знак подстраивается под любой цвет интерфейса браузера, светлый или тёмный. Это единственная поверхность, где прозрачный фон действительно помогает.
Иконки домашнего экрана — противоположность. iOS сбрасывает альфа-канал и накладывает apple-touch-icon на чёрный, а маскируемые иконки Android хотят фон во весь кадр, чтобы обрезать под форму. На обеих прозрачный исходник выглядит неправильно.
Частые вопросы о прозрачности favicon
Должен ли мой favicon иметь прозрачный фон?
Для вкладки браузера — да. Он подстраивается под светлый и тёмный интерфейс. Для apple-touch-icon и других размеров домашнего экрана — нет. Используйте сплошной фон.
Почему моя иконка домашнего экрана iOS на чёрном квадрате?
Потому что iOS игнорирует прозрачность и накладывает apple-touch-icon на чёрный. Переэкспортируйте эту иконку с заливкой сплошным фоном.
Нужен ли фон маскируемым иконкам?
Да. Маскируемые иконки обрезаются лаунчером под форму, так что им нужен фон во весь кадр со знаком, удерживаемым внутри безопасной зоны.