что это, зачем нужен и как создать

Фавикон (favicon) — маленькая иконка, которая показывается на вкладках браузера рядом с названием веб-страницы, а также в результатах поисковой выдачи Яндекса напротив ссылки на сайт. Кроме того, словом favicon часто называют иконки мобильных приложений, которые отображаются на экране смартфона и планшета. Изображение на фавиконе обычно дублирует логотип, тематику бизнеса или часть названия бренда так, чтобы пользователю было понятно, к какому именно сайту относится это изображение.

Пример полноценного логотипа и фавикона на его основе от дизайнера Mehedi Islam. Источник

Содержание

1. Зачем нужен favicon
2. Правила создания favicon
3. Размер фавикона
4. Форматы фавикона
5. Онлайн-сервисы для создания фавиконки
6. Как добавить фавикон на сайт
7. Распространенные ошибки

Зачем нужен favicon

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

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

С фавиконом бренд запомнят быстрее, поскольку удачно подобранная картинка вызывает ассоциации с ним. Увидев сначала фавиконку, пользователь вспомнит и о бренде. 

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

Фавикон не влияет на оптимизацию сайта для поисковых систем, однако Яндекс обращает внимание на наличие этой иконки. Если ее нет, то владелец сайта получит сообщение об ошибке в сервисе Яндекс.Вебмастер.

Примеры favicon в результатах поисковой выдачи Яндекса

Правила создания favicon

• Чаще всего для фавиконки берут логотип бренда, адаптируя его под маленький размер. Если логотипа нет, можно взять основные (в идеале контрастные) цвета, используемые для оформления веб-ресурса. В этих цветах создают знак, который будет вызывать у потребителя ассоциации с деятельностью компании. Часто это первая буква названия компании.
• Мелкие детали на фавиконке не будут видны, поэтому текст и другие маленькие элементы лучше не использовать.
• Фавиконка в идеале должна отличаться от конкурентных. Например, яркий цвет или запоминающийся символ, связанный с тематикой бренда, поможет выделить сайт.
• Чтобы favicon в разных местах размещения отображался корректно и в хорошем качестве, его лучше создавать в двух вариантах. Для вкладок в браузере и для поисковой выдачи следует сделать фон прозрачным. Во второй версии лучше использовать сплошную заливку фона.
• Не менее важно соблюсти и технические требования. Причем для разных браузеров и поисковых систем они свои. Подробнее с условиями вы сможете ознакомиться в справках конкретного браузера, Яндекса или Google. Всю важную информацию о разрешении и форматах значков мы приводим ниже.

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Размер фавикона

Фавикон измеряется в пикселях. Требования к размерам определяют, исходя из вида устройства и браузера. 

У поисковых систем допустимые размеры и рекомендуемые форматы фавиконок отличаются:

• Яндекс рекомендует формат SVG. Он векторный, для него неактуальны конкретные размеры (так как в векторе нет пикселей), и в нем фавикон будет лучшего качества. Можно применять и другие распространенные форматы: ICO, PNG, JPEG и др. Размеры иконок в них — 120×120, 32×32 или 16×16 px.
• В Google есть возможность добавлять фавикон только в мобильную версию. Здесь другие требования. Разрешен размер, кратный 48 пикселям, например 48×48 или 144×144 px. При изменении масштаба качество картинки такого размера не пострадает.

Android-гаджеты с браузером Chrome допускают фавиконки формата png и размером 192×192 px. Операционная система Safari для Apple предусматривает множество вариантов png-иконки в зависимости от размера ссылки на сайт: от 57×57 до 152×152 и даже 180×180 px. На размер фавиконки также влияет и формат. Например, для SVG-формата точных размеров для картинки нет, она просто должна быть квадратной.

Хотя для разных устройств можно сделать единую иконку в формате ICO, PNG или SVG, для удобства пользователей лучше адаптировать фавикон конкретно под те поисковые системы, браузеры и устройства, на которых сайт или приложение будут использоваться.

Фавиконки в разных цветах вместе с пакетом вспомогательных иконок для сайта от bisma shaukat. Источник

Форматы фавикона

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

Однако совсем отказываться от ICO не стоит. Некоторые старые браузеры, например Internet Explorer версии 10 и ниже, работают только с этим форматом. А если пользователю понадобится сохранить ссылку на сайт на рабочем столе Windows, ICO-файл тоже придет на помощь. Если вы знаете, что юзеры заходят через старые браузеры или сохраняют ссылки на компьютере, — лучше запастись ICO.

Другие разрешенные форматы иконок — SVG, GIF и JPEG — совместимы не со всеми браузерами. Например, формат JPEG в некоторых системах может отображаться некорректно (совсем без картинки или как «битый» файл).

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

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Онлайн-сервисы для создания фавиконки

Если вы пока не владеете Adobe Photoshop и Adobe Illustrator — главными графическими редакторами для создания логотипов и иконок, можно попробовать себя в роли дизайнера фавиконок с помощью доступных онлайн-сервисов.

Favicon.by. В программе можно самому нарисовать иконку для сайта по пикселям или подкорректировать уже имеющуюся. Здесь можно загрузить картинку с компьютера или с сайта и потом отредактировать. Просмотр результата возможен до скачивания. В итоге вы получаете фавикон в формате ICO и размере 16×16 px.

Logaster. В приложении можно сделать логотип и на его основе —  фавикон. Для расширенного функционала придется доплатить.Perfectoweb. Чтобы создать иконку, нужно загрузить картинку, выбрать подходящий размер и скачать готовый фавикон. Доступны все популярные размеры.

Favicon.io. Этот сервис позволяет сделать фавикон из текста, картинки и даже эмодзи. Вы можете сами выбрать цвет иконки или общий фон. В результате получаются фавиконы нескольких размеров в формате ICO и PNG. Можно скачать иконку или вставить ее сразу на сайт путем копирования кода.

Пример работы генератора иконок в сервисе Favicon.io. Стрелкой показан будущий вид фавикона в разных размерах.

Faviconit. В приложение надо загрузить картинку (минимальный размер 310×310 px, вес не более 5 Мб). После обработки изображения можно скачать архивом вместе с кодом для вставки.  

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

Favic-o-matic. Здесь можно генерировать фавиконы сразу в 20 вариантах размера или в стандартных размерах: 16х16, 32х32 px. Принимаются исходники размером от 310×310 px. Готовый пакет скачивается автоматически с генерацией кода для сайта.

Favicon & App Icon Generator. В программе можно делать фавиконки для операционных систем Android и iOS. Картинку можно выбрать из галереи или нарисовать с нуля. Чтобы улучшить результат, конструктор дает возможность настраивать изображения вручную.

Xiconeditor.com. Полноценный пиксельный графический редактор для иконок. Здесь есть все инструменты: кисти, карандаши, ластики и другие. Если у вас есть готовое изображение, можно загрузить его на сайт для редактирования. Готовый фавикон можно предварительно посмотреть так, как его увидят другие пользователи.

Интерфейс сервиса xiconeditor.com с полем для рисования и инструментами

Antifavicon.com. От перечисленных выше программ отличается тем, что фавиконка генерируется из текста, а не из изображений. Чтобы получить картинку, нужно ввести в поле буквы или числа. Можно поменять цвета фона или самого текста. Здесь нет большого выбора инструментов для дизайна, но редактор отлично подойдет, если нужен простой и незатейливый значок.

Дизайнерские favicon от Sanni Joe. Источник

Как добавить фавикон на сайт

Существуют разные способы добавления фавиконки на сайт в зависимости от системы управления сайтом (CMS).

Если сайт без CMS

1. Между тегами <head>…</head> на главной странице нужно вставить часть кода с адресом фавикона и типом передаваемых данных. Укажите путь к месту хранения картинки (url), имя файла и используемый формат. 
2. Если страница редактировалась не на хостинге, нужно загрузить файл этой редактируемой страницы на хостинг, заменив существующий, и затем сохранить.  
3. Поместите изображение в корневой каталог сайта. Он должен быть доступен по прямой ссылке и отдавать ответ сервера «200 OK». Файл может быть загружен через собственную панель управления или через сторонний менеджер файлов. 

Чтобы посмотреть, как будет выглядеть фавикон в браузерах, нужно добавить адрес следующих сервисов к URL сайта:

• http://favicon.yandex.net/favicon/mysite.ru — для Яндекса;
• http://www.google.com/s2/favicons?domain=mysite.ru — для Google.

Если сайт на CMS

В этом случае фрагмент кода также добавляется между <head>-тегами в файл с шаблоном хедера сайта.

В WordPress можно добавить фавиконку через стандартные настройки:

1. Зайти в раздел «Внешний вид» аккаунта администратора CMS и кликнуть по «Настройкам».
2. Затем кликнуть по кнопке с выбором изображения в разделе иконки сайта.
3. Загрузить изображение.
4. Щелкнуть на кнопку публикации, чтобы сохранить изменения.

Если сайт сделан на конструкторе

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

Дизайн логотипа и иконок на фонах различного цвета от Star Wolfy. Источник

Распространенные ошибки

Если фавикон сайта не отображается, это может говорить об одной или нескольких проблемах:

• Индексация фавикона поисковой системой еще не произошла. Обычно этот процесс занимает от двух недель до двух месяцев.
• Недопустимый размер или формат фавикона. В коде иконки должны быть все обязательные атрибуты.
• Код иконки размещен не в том блоке. Корректный блок для размещения фавикона — <head>.
• Индексация иконки в файле robots.txt не разрешена. Если это так, исправьте Disallow («Не разрешать») на Allow («Разрешить»).
• Недопустимое изображение. На картинке не должно быть запрещенных и похожих на них символов.
• Фавикон низкого качества или скопирован. Если вы скопируете иконку с какого-то другого источника или загрузите ее в плохом качестве, поисковая система может проигнорировать ее.
• Браузерное кеширование. Чтобы устранить проблему, почистите кеш браузера и затем обновите страницу. Воспользуйтесь сочетанием клавиш Ctrl + F5, чтобы остаться при этом на странице.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

Другие термины на букву «F»

FigmaFramer

← Все термины

Favicon by RealFaviconGenerator — Плагин для WordPress

• Детали
• Отзывы
• Установка
• Разработка

Поддержка

Generate and setup a favicon for desktop browsers, iPhone/iPad, Android devices, Windows 8 tablets and more. In a matter of seconds, design an icon that looks great on all major platforms.

Favicon is not just a single favicon.ico file dropped in the middle of your site. Nowadays, with so many different platforms and devices, you need a bunch of pictures to get the job done. With RealFaviconGenerator, generate all the icons you need for desktop browsers, iPhone/iPad, Android devices, Windows 8 devices, and more.

iOS devices use a high resolution Apple touch icon to illustrate bookmarks and home screen shortcuts. A first generation iPhone needs a 57×57 picture, whereas a brand new iPad with Retina screen looks for a 152×152 picture. Android Chrome also use these pictures if it finds them. Windows 8 takes another route with a dedicated set of icons and HTML declarations.

Favicon is not only a matter of pictures with different resolutions. The various platforms coms with different UI guidelines. For example, the classic desktop favicons often use transparency. But iOS requires opaque icons. And Windows 8 has its own recommendations.

Save hours of research and image edition with RealFaviconGenerator and its companion plugin. In a matter of seconds, you setup a favicon compatible with:

• Windows (IE, Chrome, Firefox, Opera, Safari)
• Mac (Safari, Chrome, Firefox, Opera, Camino)
• iOS (Safari, Chrome, Coast)
• Android (Chrome, Firefox)
• Surface (IE)
• And more

We take compatibility very seriously. See http://realfavicongenerator.net/favicon_compatibility for the full list.

This plugin relies on RealFaviconGenerator when you create your favicon. Browse its terms of service and privacy policy for additional information.

Localization

• English (en_EN) by Philippe Bernard
• French (fr_FR) by Philippe Bernard
• Swedish (sv_SE) by Linus Wileryd
• Brazilian Portuguese (pt_BR) by Marcelo Volgarini, Criação de Sites
• Dutch (nl_NL) by Axel Vanderhaeghen
• Danish (da_DK) by Alexander Leo-Hansen
• Czech (cs_CZ) by an anonymous translator
• Polish (pl_PL) by Maciej Gryniuk
• Russian (ru_RU) by Natasha Diatko, UStarCash
• Indonesian (id_ID) by Jordan Silaen

• Initial favicon setup screen. You are invited to setup your favicon.
• Select a master picture from the Media Library (optional)
• Once you hit the Generate Favicon button, you are redirected to RealFaviconGenerator, where you can design your favicon: adding a background to your iOS picture, using a saturated version of your master picture for Windows 8…
• When you are done with the favicon editor, you are redirected to the WordPress Dashboard. The favicon is installed automatically. This screen presents you a preview of the favicon you various platforms, so you know how your blog looks like on various platforms.
• You can also trigger RealFaviconGenerator’s favicon checker, to make sure your favicon is correctly setup.

Using The WordPress Dashboard

1. Navigate to the ‘Add New’ in the plugins dashboard
2. Search for ‘Favicon by RealFaviconGenerator’
3. Click ‘Install Now’
4. Activate the plugin on the Plugin dashboard
5. Navigate to the ‘Favicon’ entry in the Appearance menu
6. Select a master picture from the Media Library (optional)
7. Click the ‘Generate Favicon’ button and follow the instructions.

Using FTP

1. Download favicon-by-realfavicongenerator.zip
2. Extract the favicon-by-realfavicongenerator directory to your computer
3. Upload the favicon-by-realfavicongenerator directory to the /wp-content/plugins/ directory
4. Activate the plugin on the Plugin dashboard
5. Navigate to the ‘Favicon’ entry in the Appearance menu
6. Select a master picture from the Media Library (optional)
7. Click the ‘Generate Favicon’ button and follow the instructions.

It doesn’t conform to Google Search Result Icons.. silly plugin

Very cool and handy plugin. Does what is needed very nicely with many settings, still clean tough.

Simple although appears in APPEARANCE as well as settings but upload in done through APPEARANCE only

Perfect

No fuss no problems.

The plugin made adding my favicon as simple and straightforward as I could have hoped for. Awesome!

Посмотреть все 726 отзывов

«Favicon by RealFaviconGenerator» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

• phbernard

«Favicon by RealFaviconGenerator» переведён на 13 языков. Благодарим переводчиков за их работу.

Перевести «Favicon by RealFaviconGenerator» на ваш язык.

Заинтересованы в разработке?

Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.

1.3.25

• Escape favicon HTML
• URL sanitization

1.3.24

• Security audit
• Plugin was tested up to WordPress 5.9.3

1.3.23

• Fix reflected cross-site scripting issue
• Plugin was tested up to WordPress 5.9.2

1.3.22

• Fix inconsistency in previous deploy

1.3.21

• Plugin was tested up to WordPress 5. 8
• Fix XSS security issue, reported by WPSpan.com. See https://wpscan.com/vulnerability/ed9d26be-cc96-4274-a05b-0b7ad9d8cfd9?fbclid=IwAR2aRMXRjbGm9ppoI9tM-OHm26Q0ax4yt0MkcP5sp0-pz9D4eVIEHQwvG1Y

1.3.20

• Fix: media selection works again
• Plugin was tested up to WordPress 5.6

1.3.19

• Plugin was tested up to WordPress 5.5.3

1.3.18

• Remove reference to deprecated function screen_icon
• Plugin was tested up to WordPress 5.4

1.3.17

• Changes to clear security warnings from CodeRisk

1.3.16

• Plugin was tested up to WordPress 5.3.2

1.3.15

• Plugin was tested up to WordPress 5.1

1.3.14

• Plugin was tested up to WordPress 5.0-beta5

1.3.13

• Plugin was tested up to WordPress 4.9.7

1.3.12

Never published, no change

1.3.11

• id/ID translation added, thanks to Jordan Silaen
• Plugin was tested up to WordPress 4. 8.1

1.3.10

• Always access RealFaviconGenerator via HTTPS
• Clarification in local path separators for Windows
• Plugin was tested up to WordPress 4.7.1
• Notice to ask administrator to not deactivate the plugin

1.3.9

• Plugin was tested up to WordPress 4.7

1.3.8

• Plugin was tested up to WordPress 4.6

1.3.7

• Fix: Plugin keywords rephrased (some were not taken into account).

1.3.6

• Fix: the icons path was sometimes wrong when the upload directory was the root directory

1.3.5

• pl/PL translation added, thanks to Maciej Gryniuk
• ru/RU translation added, thanks to Natasha Diatko

1.3.4

• Plugin was tested up to WordPress 4.5

1.3.3

• Deactivate debug logs

1.3.2

• Typos in French translations
• Warning fix for PHP7
• Tested up to WordPress 4. 4.1
• cs/CZ translation added, thanks to an anonymous translator

1.3.1

• Hotfix in previous version.

1.3.0

• The plugin takes advantage of RealFaviconGenerator’s non-interactive API to upgrade the favicon automatically whenever a new version is available.

1.2.15

• Donation link added.
• Plugin now works when access to file system is via FTP (not direct). See https://wordpress.org/support/topic/no-images-created

1.2.14

• Security improvement.
• Warning fix regarding NONCE_ACTION_NAME.
• Useless PHP closing tags removed.
• Error checking added to favicon package unzipping.

1.2.13

• XSS vulnerability fixed, reported by Kacper Szurek

1.2.12

• Performance improvements: favicon update checking is now done in the Admin section (not the Public section), locales are not loaded in the Public section anymore.
• Take advantage of the Rewrite API (when available) to make the files appear to be in the root directory. So http://example.com/favicon.ico works (eg. when requested by Yandex).
• nl/NL translation added, thanks to Axel Vanderhaeghen.

1.2.11

• When the admin’s browser cannot get the picture selected from the Media Library, the UI fails gracefully.
• Favicon package unzipping is more robust.
• Notice to ask users to rank the plugin on WordPress.org.

1.2.10

• Warning fix when used with BuddyPress (bp_setup_current_user). See https://wordpress.org/support/topic/wp_debug-notice-for-bp_setup_current_user.

1.2.9

• When selected from the Media Library, the master picture is now retrieved by WP administrator’s browser to prevent several issues (locally hosted blogs, blogs protected in a way or another, etc.).

1.2.8

• Plugin successfully tested against WordPress 4.1.

1.2.7

• Fix for WordPress sites hosted on Windows.

1.2.6

• The plugin is now compatible with multisite.

1.2.5

• Fix for login page: favicon code was not injected in this particular page.

1.2.4

• Remove debug messages to avoid false positives in error log.

1.2.3

• Update notifications can be dismissed once for all.
• New Settings page to enable/disable update notifications.

1.2.2

• Fix for the 403 issue with HostGator hosting service (https://wordpress.org/support/topic/403-error-when-generating-favicon).

1.2.1

• Fix in plugin removal and update checking.

1.2.0

• The plugin now warns the user when RealFaviconGenerator was updated and the favicon should be generated again.

1.1.1

• Rewrite API usage disabled. Favicon files do not appear to be in the root directory of the blog anymore.

1.1.0

• Run RealFaviconGenerator’s favicon checker from the admin interface.

1.0.7

• Deactivate default Genesis favicon when one is configured in FbRFG.

1.0.6

• Error management improved during favicon install.

1.0.5

• Do not try to rewrite the favicon files URL when .htaccess is not writable.

1.0.4

• Option to not rewrite the favicon files URL, even when this is possible.

1.0.3

• Plugin code syntax changed to fit older versions of PHP.

1.0.2

• Callback URL was too long for some servers. It has been shorten.

1.0.1

• Favicon admin settings are now in the Appearance menu.
• Fix in favicon package download.
• Fix in error management during favicon installation.

1.0

Initial version.

Оценки

Посмотреть все

• 5 звёзд 713
• 4 звезды 5
• 3 звезды 2
• 2 звезды 3
• 1 звезда 4

Войдите, чтобы оставить отзыв.

Участники

• phbernard

Поддержка

Решено проблем за последние 2 месяца:

0 из 1

Перейти в форум поддержки

Пожертвование

Would you like to support the advancement of this plugin?

Пожертвовать на развитие плагина

HTML код фавиконки

Фавикон — это небольшой файл изображения, содержащий один или несколько значков, которые можно использовать для представления веб-сайта, блога или даже отдельной веб-страницы.

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

Если у вашего веб-сайта нет значка фавикона, пользователи обычно увидят обычный значок веб-страницы.

Добавление Favicon на ваш веб-сайт

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

Вот пример кода, который вы можете использовать. Поместите его внутрь элемента (замените местоположение изображения на местоположение используемого изображения):

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

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

Фавиконы могут иметь размер 16×16, 32×32, 48×48 или 64×64 пикселя и 8-битную, 24-битную или 32-битную глубину цвета.

Значки главного экрана Apple iOS

Устройства Apple с операционной системой iOS версии 1.1.3 или более поздней (например, iPod Touch, iPhone и iPad) поддерживают возможность предоставления пользовательского значка, который будет отображаться на главном экране пользователей, когда они используют Функция Web Clip (называется Добавить на главный экран в Mobile Safari).

Некоторые устройства Android также поддерживают эту функцию.

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

iOS добавит закругленные углы и отражающий блеск значку на главном экране iOS.

Если вы предпочитаете без отражающего блеска, используйте следующий код:

html — Необходимо добавить тег ссылки для favicon.ico?

спросил 10 лет, 8 месяцев назад

Изменено 1 год, 4 месяца назад

Просмотрено 193к раз

Существуют ли какие-либо современные браузеры, которые не обнаруживают favicon.ico автоматически? Есть ли смысл добавлять тег ссылки для favicon.ico?

  ico">
 

Я предполагаю, что включать его в документ HTML необходимо, только если вы решите использовать GIF или PNG…

• html
• favicon

5

Чтобы выбрать другое местоположение или тип файла (например, PNG или SVG) для фавикона:
Одной из причин может быть то, что вы хотите, чтобы значок находился в определенном месте, например, в папке с изображениями или в чем-то подобном. Например:

Это другое местоположение может быть даже CDN, как это делает SO с .

Чтобы узнать больше об использовании других типов файлов, таких как PNG, ознакомьтесь с этим вопросом.

Для целей очистки кеша :
Добавить строку запроса к пути для целей очистки кеша:

  ico?v=1.1">
 

Фавиконы очень сильно кэшируются, и это отличный способ обеспечить обновление.

---

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

---

Сноска о rel="icon" :
Как указано в ответе @Semanino, использование rel="shortcut icon" — это старый метод, который требовался в более старых версиях Internet Explorer, но в большинстве случаев можно заменить на более правильную инструкцию rel="icon" . Статья @Semanino основана на правильных ссылках на соответствующую спецификацию, которая показывает значение rel , равное 9.Ярлык 0013 не является допустимым вариантом.

3

Обратите внимание, , что спецификация HTML5 W3C и WhatWG стандартизируют

  ico">
 

Обратите внимание на значение атрибута «rel»!

Значение ярлык для атрибута rel является очень старым расширением для Internet Explorer и устарело .

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

Вы также можете взглянуть на этот замечательный пост: rel=»shortcut icon» считается вредоносным

1

 
<ссылка rel="icon" type="image/png" href="http://example.com/favicon.png" />
<ссылка rel="icon" type="image/gif" href="http://example.com/favicon.gif" />


 

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

демо

показать логотип во вкладке браузера

3

Обновление Октябрь 2020:

Так что если вы на этой странице ломаете голову🤔 почему не работает мой фавикон, то читайте дальше. Я пробовал все (что, как мне казалось, я делал правильно), но фавикон не отображался на вкладках браузера.

Вот однострочный простой код взломщика , который работал безупречно:

Примечания:

1. Поместите изображение в папку ROOT (в одной из моих неудачных попыток я не использовал корневой каталог)
2. Использовать прямую ссылку на фавикон (вместо href=»images/bla123.jpg»).
3. Я поставил этот тег всего под заголовком < > тег в заголовке < >
4. Я сделал фавикон размером 64×64 px и размером 2,16 КБ

Я тестировал его на Firefox, Chrome, Edge и Opera. ОС: Win 10, Mac OSX, ios и Android. Также у меня не было проблем с обналичиванием, все заработало, как только я обновил страницу.

1

Мы можем добавить для всех устройств с размером платформы