Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны.
Перевод статьи "Disabling My Favicon: How and Why"
Привет Хабр! Недавно в недельной подборке я увидел эту статейку на английском языке и решил ее перевести так как она показалась мне довольно интересной. Далее перевод.
И так начнем: на моем сайте нет фавикона, и, скорее всего, его никогда не будет.
Нельзя с полной уверенностью сказать, почему я пришел к такому решению, но, учитывая тот момент, что у меня нет логотипа — и я действительно не хочу его иметь — то и создание значка для сайта мне показалось излишним.
Но есть проблемка, фавикон нельзя просто не задать, поскольку большинство веб-браузеров все равно попытаются его запросить. А это в свою очередь означает, что при каждой загрузке страницы будет повторный запрос файла favicon.ico, который определится как Not Found.
Не знаю как вас, а меня это раздражает.
Итак, что же нам делать?
Самый простой способ решить эту проблему это сделать прозрачную фавиконку, но это не решает мою проблему так как я хочу избавиться от лишнего запроса а не просто получить успешный ответ при запросе.
Попытка первая
Хотя пропуск тега icon и не приводит к желаемому результату, я решил поэкспериментировать со значениями, которые он дает. Моей первой попыткой было использовать простой хэш:
<link rel="shortcut icon" href="#" />
В целом, хоть это и помогло устранить ответ 404 Not Found в запросе, но затем я столкнулся с другой проблемой - повторно запрошена вся страница. Это объясняется тем, что # в конечном итоге интерпретируется браузером как https://flower.codes/#, как практически и любой другой символ, с которым вы, возможно, захотите поэкспериментировать (пробелы, вопросительные знаки и т. д.).
Итог этого решения: не подходит.
Попытка вторая
И так, мы не можем просто пропустить фавикон и не можем использовать произвольный символ... Что же тогда делать?
Немного покопавшись, я наткнулся на концепцию, с которой большинство веб-разработчиков довольно хорошо знакомы: Data URLs.
Для непосвященных: URI данных позволяют встраивать файлы непосредственно в HTML, а не выполнять внешний запрос. Если максимально упростить, они обычно состоят из определения типа загружаемого файла (например, text/html или text/plain) и содержимого файла.
Это означает, что вместо загрузки внешнего файла вы можете включить его в строку следующим образом:
data:text/html,<script>alert('hi');</script>
Однако для наших целей мы можем определить Data URL, который фактически является пустым, просто опустив как тип контента, так и само содержимое:
<link rel="shortcut icon" href="data:," />
Итог этого решения: подходит.
Хорошо, но... Зачем?
Как и ожидалось, это решило мою проблему. Включив содержимое напрямую и оставив его пустым, мы можем устранить повторный запрос, не вызывая никаких ошибок в консоли.
Но зачем мне все эти проблемы?
Хотите верьте, хотите нет, но мне на самом деле нравятся фавиконки. Я думаю, что они значительно упрощают организацию вкладок и закладок. Но во всемирной паутине, плотно заполненной ими, отказ от одного на моем собственном сайте казался маленьким способом выделиться (а пройти лишнюю милю, чтобы сделать это «правильным» способом – это просто вишенка на торте).
Если вдруг кому интересно то я веду телеграм канал по фронтенду где выкладываю интересные статьи на разные темы а так же сам периодически пишу шорт-риды которые могут быть вам полезны.
