Вчера на работе разработчик обратился ко мне с проблемой. Разговор шел примерно так:
Дев: Привет, Альваро! У нас проблема.
Я: Что не так?
Дев: Фавиконка на сайте неправильная. Это не наш корпоративный логотип.
Я: Что????
Дев: показывает экран
Я: .....
Я не мог поверить своим глазам: это был наш сайт, название было правильным, только фавиконка отображалась на вкладке не с логотипом компании, а с буквами «Алв» (от Альваро? ) Я обновлял и снова обновлял страницу, думая, что может это какой-то прикол. Но это было не так.
Примечание. Я удалил скриншоты названия и логотипа сайта, чтобы избежать проблем. Внизу статьи есть небольшой пример, воспроизводящий проблему.
Это озадачило меня. Фавиконка работала по-разному в зависимости от браузера. Chrome и Safari показывали правильный значок (с корпоративным логотипом), а Firefox показывал совершенно другой логотип (с буквами). И мы еще раз проверили, что файл тот же, а не старая кэшированная версия. Это был точно такой же файл... но он был другим.
К счастью для нас, потребовалось всего несколько минут, чтобы понять, что происходит (и решить проблему). Но я должен признать, что это одна из самых странных проблем, которые я видел в последнее время.
Мы скачали файл favicon.ico и открыли его в графическом редакторе, после чего увидели основную причину проблемы:
В файле .ico было несколько слоев. Верхний слой отображался в Chrome и Safari, а нижний слой отображался в Firefox.
Мы даже провели тест, чтобы убедиться, что это так. Мы поменяли порядок слоев, сохранили файл... и фавиконка изменилась во всех браузерах! Теперь у Chrome была фавиконка Alv (верхний слой), а у Firefox — корпоративный логотип (нижний слой).
Браузер игнорировал прозрачность. Проблема заключается не в наложении слоев, а в файле .ico, который содержит несколько слоев, а браузер выбирает один (и только один). Как предположил Брамус в Твиттере.
Выяснив причину ошибки, сделал решение простым: удалить слой из файла .ico и сохранить. Проблема (и загадка) решена.
Но почему буквы «Алв»? Сначала мы тестировали фиктивную иконку. Когда мы получили корпоративный логотип, мы поместили его в слой поверх графического редактора и скрыли тестовый слой. Но даже когда слой был скрыт, он все равно экспортировался как часть значка при сохранении!
Я не знаю, можно ли считать поведение Firefox ошибкой или особенностью. Но это превратилось в интересную головоломку.
Воспроизведение
Создайте такой HTML-файл на своем компьютере (вам даже не нужно содержимое):
<!doctype html>
<html>
<head>
<title>Favicon test</title>
<link rel="icon" href="./favicon.ico" />
</head>
<body>
<h1>favicon test</h1>
<p>The favicon has two layers and it is displayed differently by the browsers.</p>
</body>
</html>Затем создайте файл favicon.ico с двумя слоями. Я использовал GIMP для создания файла, добавив два слоя 64x64, как показано ниже:
Примечание. Если у вас нет графического редактора, вы можете загрузить версию favicon.ico с моего веб-сайта.
Затем сохраните его как .ico и поместите в ту же папку, что и файл HTML. Вот и все. Откройте страницу в Chrome, и вкладка будет выглядеть так:
В Firefox вкладка будет выглядеть иначе:
Вы можете добавить к значку больше слоев, но результат всегда будет один и тот же: Chrome и Safari выберут верхний для отображения в качестве фавиконки, а Firefox выберет последний.
