Файл фавикона не найден

Обновлено: 03.07.2024

Вы когда-нибудь сталкивались со знаменитой ошибкой "Favicon не найден" при проверке журналов ошибок 404 вашего веб-сайта? Получение этой ошибки, даже если у вас есть изображение фавикона, раздражает, не так ли? В этом посте объясняется, как навсегда избавиться от этой ошибки в журналах.

Я перестал пытаться понять, почему некоторые современные веб-браузеры запрашивают ресурсы, которые давно не упоминались на веб-странице, например, Firefox неукоснительно ищет значок избранного сайта (favicon.ico) в корневой папке вашего веб-сайта или браузеры iOS. ищу почти десяток разных иконок apple touch (apple-touch-icon-. ) разного размера, как будто инет рухнет, если их не найти. Вместо того, чтобы желать, чтобы веб-браузеры вели себя так, как я хотел, как веб-мастер, я решил играть в игру по ее правилам и искал способы избавиться от досадных ошибок такого рода, даже если это означало непродуктивную дополнительную работу.

но такой файл не существует, это создаст ошибку 404, которая будет отправлена обратно в браузер (он не будет отображаться пользователю в окне браузера, так как это не то же самое, что ошибка страницы не найдена или ошибка сервера не найдена), а также занесены в журналы доступа к веб-сайту следующим образом:

"GET /favicon.ico HTTP/1.1" 404

Этот журнал ошибок также будет отображаться в вашем файле статистики трафика (например, AWStats), где перечислены ошибки 404.

Почему возникает ошибка «Favicon.ico не найден», хотя на моем веб-сайте есть изображение Favicon?

Чтобы ответить на этот вопрос, нам нужно понять, как работают некоторые веб-браузеры.

Ошибка 404, генерируемая для якобы существующего, но не существующего файла, вполне понятна, на самом деле это то, что должно произойти (и что происходит), чтобы дать администратору веб-сайта подсказку для исправления таких ошибок. . Например, если вы забыли загрузить изображение, на которое есть ссылка с одной из ваших страниц, загрузка этой страницы вызовет (и должна) ошибку 404 для этого изображения. Следовательно, когда вы увидите эту ошибку в журнале, вы можете загрузить изображение.

То, что я объяснил выше, является естественным и ожидаемым поведением веб-браузера; однако некоторые браузеры создают запросы ресурсов (GET), даже если они не связаны или не упоминаются на вашей веб-странице. Чтобы пояснить это, давайте предположим, что вы создали фавикон для своего веб-сайта, назвали его icon.jpg и загрузили в следующее место с помощью бесплатного программного обеспечения FTP или через файловый менеджер вашего хостинга:

СОВЕТ. Вы также можете обратиться к нашему более подробному руководству о том, как добавить значок избранного сайта на свой веб-сайт.

Теперь, несмотря на то, что некоторые браузеры учитывают ваш выбор имени и местоположения для значка фавиконки (вы должны иметь возможность называть его как угодно и размещать в любом месте, верно?) и без проблем находят его в указанном вами месте. , некоторые другие браузеры, такие как Firefox, непостижимым образом настаивают на поиске значка favicon, который называется favicon.ico и находится в корневом каталоге вашего сайта.

Если он не может найти этот файл там, это приведет к созданию и регистрации ошибки 404. Для некоторых веб-мастеров это может быть мелочью, незначительной вещью, но для меня и, я уверен, для вас тоже, поскольку вы читаете этот пост, это неприемлемо, потому что 1) браузер делает запрос на несуществующий файл, который не связан с со страницы, 2) вызывает генерацию и регистрацию ошибки 404, которая отвлекает вас при проверке журналов, 3) потребляет пропускную способность, захватывая файл 404, поскольку не может найти значок значка.

По вышеуказанным причинам я решил раз и навсегда избавиться от этой ошибки и придумал следующее решение.

Решение ошибки 404 Фавикон не найден

Решение не самое эффективное, но достаточно простое, и оно поможет вам никогда больше не увидеть ошибку 404 для несуществующего favicon.ico в ваших журналах.

Вот шаги:

ШАГ 1. Создайте файл .ico и назовите его favicon.ico.

Вы можете использовать одну из бесплатных онлайн-программ для графического дизайна и инструментов преобразования изображений, которые помогут вам при создании значков избранного. Размер файла фавикона может быть любым от 16x16 пикселей и выше; большие изображения будут лучше смотреться на мобильных телефонах и планшетах, если ваш сайт добавлен в закладки как приложение. Также не забудьте оптимизировать файл для экономии трафика. Нерекомендуемый совет: если вам не нужен значок значка, просто создайте пустой текстовый файл размером 0 байт и сохраните его как favicon.ico.

ШАГ 2. Когда значок фавикона будет готов, загрузите его в корневой каталог вашего веб-сайта. В корневом каталоге находится индексный файл (index.html, index.php и т. д.).

ШАГ 3. Откройте веб-браузер и убедитесь, что ваш значок доступен, введя его URL-адрес (просто замените домен в приведенном выше URL-адресе) в адресную строку и откройте его.

Если вы можете просматривать свою фавиконку, это означает, что она готова для посетителей и браузеров. Отныне вы не будете получать ошибки 404 для изображения фавикона.

Я загрузил среду IDE Netbeans для кодирования в HTML. Я новичок в этом. Когда я запускаю свой код, хром открывается, и все работает нормально. Я получаю какую-то ошибку в выводе - журнал браузера.

Как это исправить?

Читаю это через семь лет в будущем. каждый раз, когда у меня возникает эта проблема, решение отличается от предыдущего раза. То, что я получаю в FF, не является ошибкой один раз, но все последующие перезагрузки показывают ошибку. Решение от element11 решило эту проблему (на этот раз).

20 ответов 20

У меня тоже была эта ошибка в течение некоторого времени. Это может быть какая-то ошибка netbeans, связанная с коннектором netbeans. Я не могу найти упоминания о favicon.ico ни в своем коде, ни в настройках проекта.

Мне удалось исправить это, поместив следующую строку в раздел заголовка моего html-файла

В настоящее время я использую это в своей тестовой среде, но я бы удалил его для любой производственной среды.

Для меня это произошло сейчас, когда я находился в каталоге моего веб-сайта. Но он указывал на корневой каталог в поисках favicon.ico. Я использую Chrome.

Это решение может быть неправильным, так как я пробовал его, и оно не работает. Ошибка по-прежнему возникает.

Принятый ответ мне не помог, мне пришлось добавить значение в атрибут href:

Да, это устраняет ошибку в Chrome при размещении моей HTML-страницы на AWS S3. Без него я получаю ошибку 403 для favicon.ico, несмотря на то, что в коде не было ссылки на фавикон.

Принятый ответ мне не помог, поэтому я нашел это решение.

Это может быть связано с HTML-версией, так как решение, набравшее наибольшее количество голосов, гласит:

Если вам нужно проверить документ на HTML5, используйте вместо этого:

Теперь ошибки нет, и я вижу свой фавикон:

@Петя Костова, спасибо за ссылку! Очень полезно. Просто чтобы добавить еще одну ссылку, в этой статье объясняется, что такое значок для Chrome/Firefox/и т. д., а ярлык для IE, просто для всех (таких как я), кому интересно, зачем вам нужны оба.

favicon.ico — это значок веб-сайта в строке заголовка вашего веб-сайта. Netbeans не удалось найти файл favicon.ico в папке вашего веб-сайта

если вы этого не хотите, вы можете удалить строку, похожую на эту, в разделе заголовка

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

Для меня ответ тоже не сработал, но этот работает нормально:

Вы можете предоставить собственное изображение и указать ссылку на него в голове, например:

Кроме того, следите за тем, чтобы ваше местоположение href не было ошибочным. Учебный пример:

Моя индексная страница находилась во временной подпапке с названием LAYOUTS. Чтобы получить доступ к файлу favicon.jpg из папки IMAGES, родственной папке LAYOUTS, мне пришлось указать путь в своем href следующим образом

Двойные точки необходимы для навигации по папкам «вверх», затем косая черта + строка изображений переносит вас в папку с изображениями (выполняя «прыжок» по ветке дерева) и, наконец, вы можете сослаться на свой файл, написав favicon-32x32. jpg.

Это объяснение полезно для тех, кто начинает с нуля, и было бы полезно увидеть его пару раз, так как я бы забыл, что у меня есть определенные файлы *.php вне папки LAYOUTS, для которых нужны разные ссылки на дерево. мои ссылки в разделе HEAD на каждой странице.

Фавиконки упрощают пользователям идентификацию вашего сайта, когда у них открыто много вкладок в веб-браузере. Фавиконы обычно отображаются непосредственно перед URL-адресом в браузере. Вы также можете видеть значки на закладках, результаты автозаполнения Google и историю поиска. Вот места, где фавиконы могут отображаться в разных браузерах.

Favicon можно определить как значки, которые используются как часть фирменного стиля сайта. Фавикон может быть логотипом бренда, символом или набором символов, частью логотипа или даже общим изображением, представляющим тип бизнеса или отрасли, в которой работает бренд.

В этой статье мы рассмотрим, почему не отображаются значки избранного, и как решить эти проблемы.

Как правильно установить фавиконы

Вам нужно правильно установить свой значок, если вы хотите, чтобы он правильно отображался. Сначала создайте фавикон. Для этого можно использовать множество генераторов фавиконок. Затем добавьте его на свой сайт. Вот как установить его на главные страницы вашего сайта:

Загрузите файл favicon.ico в нужный каталог на вашем сайте.
Вставьте этот код в раздел:

Подробнее о том, как добавлять значки избранного, читайте в этой статье. Вы также можете прочитать о правилах Google для фавиконов здесь.

Распространенные причины, по которым ваш фавикон не отображается

Проверьте, правильно ли отображается ваш значок, с помощью нашего инструмента аудита:

Вот распространенные причины, по которым ваш значок не отображается, и способы их устранения:

Синтаксические ошибки

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

В приведенном выше коде есть 1 простая синтаксическая ошибка:

Ваш браузер кэшировал ваш сайт как сайт без фавикона

Когда вы добавляете значок значка на свой сайт, он может не отображаться, поскольку ваш браузер «сохранил» ваш сайт как сайт без значка значка. Вам необходимо очистить кеш в вашем браузере или использовать другой браузер.

Неверный путь к файлу

Вы должны убедиться, что путь к файлу вашего фавикона указан правильно. Если у вас есть значок в папке с изображениями, убедитесь, что путь к файлу указан как /images/favicon.ico в зависимости от того, как вы назвали свой значок.

Если ваш CSS и значок являются родственными в том смысле, что они находятся на «одном уровне», убедитесь, что у вас нет косой черты перед именем файла фавикона, так как ваш href должен быть следующим:

Браузер не отображает фавиконы, если они локальные

В таких браузерах, как Chrome и Safari, значки избранного не отображаются, если они являются локальными (не загружены на сервер). Chrome, например, может отображать значок только в том случае, если он находится в папке загрузок.

Ссылка для создания значка сайта находится не в том месте

Важно разместить ссылку для добавления вашего фавикона в нужное место. Он должен быть размещен в разделе заголовка вашей веб-страницы, а не где-либо еще. Хотя, если он будет помещен в тело, он может работать в некоторых браузерах, другие браузеры, такие как Chrome, не загрузят его.

Имя файла вашего фавикона по-прежнему используется по умолчанию

Иногда причина, по которой ваш значок не отображается, заключается в том, что вы не изменили имя файла. Простое исправление для этого состоит в том, чтобы переименовать файл фавикона по умолчанию, «favicon.ico»

А теперь давайте сосредоточимся на том, почему значки избранного не отображаются в Chrome, WordPress, Shopify, Wix и Squarespace:

Причины, по которым Favicon не отображается в Chrome

Вот почему ваш значок может не отображаться в Chrome:

Неверный размер значка

Мы упомянули, что у Google есть определенные рекомендации, которым необходимо следовать при добавлении значков избранного на ваш сайт. Одно из них заключается в том, что размер значка должен быть кратен 48 и не может быть 16×16. Если размер вашего значка 16 x 16, он не будет отображаться.

Системы управления контентом (CMS) также имеют определенные рекомендуемые размеры. WordPress рекомендует 512 x 512 и Squarespace 300 x 300. Эти CMS могут изменять размер фавикона в соответствии с различными сценариями. Например, для закладок требуется больший размер, а для мобильных устройств может потребоваться меньший размер.

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

Наличие файла favicon в корневом каталоге, но без добавления ссылки, которая его «импортирует»

Тот факт, что файл значка находится в корневом каталоге, не означает, что он будет загружаться автоматически при загрузке вашего веб-сайта. Убедитесь, что у вас есть эти ссылки в шапке:

Это то, что импортирует фавикон на ваш сайт.

Причины, по которым Favicon не отображается конкретно в Shopify

Вот причины, по которым ваш значок может не отображаться в Shopify:

Ссылка для импорта фавикона находится в неправильном месте

Там, где вы размещаете ссылку, важно. Убедитесь, что именно в разделе, а не .

Причины, по которым Favicon не отображается конкретно в WordPress

Вот причины, по которым ваш значок может не отображаться в WordPress:

В Customizer значок сайта предназначен для фавиконки AMP

Если вы используете Customizer для загрузки пользовательского значка favicon, он может не работать, поскольку он предназначен для страниц, использующих AMP. Чтобы решить эту проблему, вам нужно сначала удалить значок, который вы загрузили с помощью Customizer.Затем вам нужно установить плагин под названием «Favicon by RealFavicon Generator». Этот плагин позволяет вам загружать изображение, которое вы предпочитаете использовать в качестве фавикона. Он должен быть в формате png или jpg. Плагин поможет вам преобразовать его в .ico.

Может быть плагин, добавляющий элементы тела в ваш

Вы должны убедиться, что у вас нет подключаемого модуля, который создает элементы тела в вашем разделе. Просмотрите раздел заголовка и, если вы видите код, относящийся к разделу тела, проверьте плагины, которые вы установили при добавлении фавикона на сайт WordPress. Идите вперед и деактивируйте или даже удалите его.

Вы не указали тип изображения, если это не .ico

Если ваш значок имеет формат .jpg, вам необходимо отредактировать ссылку, которую вы используете для загрузки значка, чтобы включить тип следующим образом:

Вам также необходимо добавить файл .ico в корень сайта.

Причины, по которым Favicon не отображается конкретно на Squarespace

Вот почему ваш значок может не отображаться в Squarespace:

Кэшированная версия еще не признана недействительной

В коде шаблона в этом разделе в качестве имени файла всегда используется favicon.ico. Это кешированная версия. Чтобы сделать его недействительным, измените имя файла.

Вы все еще находитесь в CMS

Если вы все еще вошли в свою CMS, она может по-прежнему отображать значок Squarespace по умолчанию. Вам нужно выйти из CMS, чтобы увидеть свой собственный значок.

Заключение

Фавиконки помогают обеспечить единообразие бренда. Они делают ваш сайт легко идентифицируемым, когда пользователь должен сразу идентифицировать несколько сайтов, например, когда открыто много вкладок. Они отлично подходят для повторных посетителей и клиентов. Когда пользователь добавляет ваш сайт в закладки, его можно легко идентифицировать по значкам фавиконов.

Внедрение значков фавиконов не всегда может проходить гладко, и мы рассмотрели распространенные причины, по которым значки фавиконов не отображаются. Мы даже изучили проблемы, которые могут возникнуть при использовании определенных систем управления контентом — CMS, таких как WordPress, Shopify или SquareSpace. Как вы могли заметить, большинство проблем достаточно просты, и вы можете их исправить. Однако не стесняйтесь обращаться за профессиональной помощью, когда это необходимо.

Джей Кан

Рассматриваем SEO под микроскопом. Я экспериментатор, исследователь, записываю каждый шаг на пути к первому месту в рейтинге. Я здесь, чтобы помогать, проверять, объяснять, подвергать перекрестным исследованиям чудеса поисковой системы.

Читайте также: