How to set favicon
How to set favicon
How to Add a Favicon to your Site
Status of this Document
Draft in development; may change radically at any time.
To add a favicon to your Web site, you’ll need both an image and a method for specifying that the image is to be used as a favicon. This document explains the method preferred by W3C for specifying the favicon. There is another common method that is illustrated below, with an explanation of why that method is inconsistent with some principles of Web architecture. Both methods only apply to HTML and XHTML, one of the limitations discussed below.
This document does not discuss in detail how to create a favicon image. However, the format for the image you have chosen must be 16×16 pixels or 32×32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG (a W3C standard), GIF, or ICO.
Method 1 (Preferred): Use of a rel attribute value defined in a profile
The first approach for specifying a favicon is to use the rel attribute value «icon» and to define what the value means via a profile; profiles are discussed in more detail below. In this HTML 4.01 example, the favicon identified via the URI http://example.com/myicon.png as being a favicon:
The XHTML 1.0 version looks very similar:
Method 2 (Discouraged): Putting the favicon at a predefined URI
A second method for specifying a favicon relies on using a predefined URI to identify the image: «/favicon», which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI. This approach is inconsistent with some principles of Web architecture and is being discussed by W3C’s Technical Architecture Group (TAG) as their issue siteData-36. To summarize the issue: The Web architecture authorizes site managers to manage their URI space (for a given domain name) as they see fit. Conventions that do not represent community agreement and that reduce the options available to a site manager do not scale and may lead to conflict (since there is no well-known list of these predefined URIs). One practical consideration illustrates the problem: many users have Web sites even though they do not have their own domain name. These users cannot specify favicons using the second method if they cannot write to the server root. However, they can use method one to specify a favicon since it is more flexible and does not constrain the site manager to use a single favicon at a single place on the site.
There are a few other well-known encroachments on URI space, including the «robots.txt» file and the location of a P3P privacy policy. The Technical Architecture Group is exploring alternatives that do not impinge on URI space without license.
Use of Profiles to Define Terms Such as «icon»
Loosely speaking, a profile is a definition of set of terms. Ideally, a profile includes both machine-readable information and human-readable information. In HTML 4.01 and XHTML 1.0, a few attributes such as the rel attribute do not have a predefined set of values. Instead, the author can provide values according to need, and then use a profile to explain what the values mean. In our case, we have recommend that authors use the value «icon» and a profile that explains that «when we say icon, we mean ‘this is a favicon.'»
In Method 1 above, we use the rel attribute with the LINK element and choose a profile with the profile attribute on the HEAD element.
We defined a profile which you can freely use for your own sites.
Limitations
There are several limitations to the approaches described above, including the preferred method (which is why the TAG continues to work on the question):
References
Acknowledgements
The following QA Interest Group participants and W3C staff have contributed significantly to the content of this document: Dominique Hazaël-Massieux (W3C), Chris Lilley (W3C), and Olivier Théreaux (W3C).
How to set-up a favicon?
I am trying to do a very simple preliminary exercise to setting up a website which is creating a favicon.
This is the code I am using:
12 Answers 12
Trending sort
Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.
It falls back to sorting by highest score if no posts are trending.
Switch to Trending sort
With the introduction of (i|android|windows)phones, things have changed, and to get a correct and complete solution that works on any device is really time-consuming.
You can have a peek at https://realfavicongenerator.net/favicon_compatibility or http://caniuse.com/#search=favicon to get an idea on the best way to get something that works on any device.
You should have a look at http://realfavicongenerator.net/ to automate a large part of this work, and probably at https://github.com/audreyr/favicon-cheat-sheet to understand how it works (even if this latter resource hasn’t been updated in a loooong time).
One complete solution requires to add to you header the following (with the corresponding pictures and files, of course) :
In June 2016, RealFaviconGenerator claimed that the following 5 lines of code were supporting as many devices as the previous 18 lines:
I use this on my site and it works great.
There is a very simple method to set a favicon, which had been around for a long time AFAIK. Place the favicon.ico file in the default location. i.e
Below given some information about fav Icon
What Is FavIcon? FavIcon is nothing but small image which appears top left along with the application address bar title.Standard size specification for favicon.ico is 16 by 16 pixel. Please see below attached figure.
Some browser expect one (rel=»icon») Some other browser expect other rel=»shortcut icon»
Используйте фавиконки правильно
Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.
Фавиконка при установке веб-приложения 
Фавиконка на вкладке в браузере
Подключение
Чтобы иконка начала отображаться, на вкладке нужно подключить файл с графическим отображением иконки. Для правильного подключения иконки нужно использовать обязательные требования браузера и минимальный набор фавиконок, который мы сейчас подробно рассмотрим.
Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.
Обязательная фавиконка
Для подключения нужно добавить в :
Обратите внимание на две детали: размер и расположение.
Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.
Дополнительные необходимые фавиконки
Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:
Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:
Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.
Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:
Для устройств Apple
Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.
Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:
Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.
Манифест
Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.
Чтобы добавить фавиконки с помощью манифеста, нужно подключить манифест, а в манифесте указать все иконки и их размеры, которые мы хотим подключить на сайт.
Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.
Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:
Осталось добавить фавиконки по шаблону:
Если иконок несколько, то их нужно добавить через запятую:
Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.
src — путь до иконки;
type — тип иконки;
sizes — размер иконки.
Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:
Откуда брать фавиконки и как их приготовить
Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.
Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:
Не добавлять фавиконки в проект.
Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.
Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.
При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.
Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.
Итоговый способ подключения фавиконки:
manifest.webmanifest
Таким способом мы будем поддерживать самые старые браузеры и самые новые.
Ничего страшного, что список одной фавиконки получился столь длинным — 4 пункта. Во-первых, браузер загружает фавиконку асинхронно. Во-вторых, он сначала посмотрит на весь список фавиконок и загрузит только одну — самую подходящую.
Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.
Creating a favicon [closed]
This question does not appear to be about programming within the scope defined in the help center.
How can I create a favicon for my website?
10 Answers 10
Trending sort
Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.
It falls back to sorting by highest score if no posts are trending.
Switch to Trending sort
Searching about favicons, I discovered I needed more than 10 kinds of files to work in all browsers and devices 🙁
I got pissed and created my own favicon generator, that creates all these files and the correct HTML header for each one of them: faviconit.com
Hope you enjoy it.
If you already have a logo image that you want to transform into a favicon, then you can convert it using http://www.favicomatic.com/. It creates crisp favicons, and I haven’t had to edit them after creating them. It will generate favicons at 16×16 and 32×32 and to quote them: «Every damn size, sir!». The site also supports/preserves transparency present in some pngs. Also, their site looks cool and is easy to use.
For example here is a stackoverflow logo: 
Here are some of the generated favicons:
They also generate the needed html:
I looked at the first 20 or so google results, and this was by far the best.
GIMP is a good program for that. Just save the image as PNG, then add
on the section of your page.
You create a icon file that’s 16×16 or 32×32 or 64×64. Name it favicon.ico and place it in the root of your website public folder.
One of the best online favicon tools is FaviconGenerator.com. Fast, modern design, no fluff.
I use the open source Paint.net program along with the Icon plugin.
When creating a favicon, you want to take the following factors into account:
As usual, you can create all these assets manually. Unless you have very, very specific needs and a budget, this is definitely not the way to go.
The right way for most people is to use a favicon generator that lets you decide of the look of all the icons and takes care of all the details. The only one which does this is Real Favicon Generator. Full disclosure: I am the author of this site.
How to set favicon
Иконка веб-сайта — важная деталь вашего сайта. Однако зачастую о пресловутой favicon мы задумываемся в самый последний момент и вставляем строчку link тега всего с одним вариантом иконки. Иногда считаем достаточным положить файл favicon в корень сайта, ведь современный браузер в силах самостоятельно найти и подключить вашу иконку. А иногда забываем о favicon вовсе.
В свою очередь favicon не так прост как кажется и имеет не один вариант подключения, отображения и параметров. И если с десктопными браузерами все просто, то для смартфонов иконка может содержать массу различных параметров и размеров. А ведь существуют и совсем экзотические варианты вроде Google TV и т.д. Давайте попробуем разобраться какие вообще бывают варианты favicon.
Favicon для десктопа
Favicon для Android
Когда речь касается мобильных устройств, встает важный вопрос разрешения экрана. Как известно, все современный смартфоны имеют параметр плотности пикселей на дюйм — PPI, а это значит иконка одного и того разрешения будет выглядеть по разному на экранах с различной плотностью. Поэтому браузеры под андроид используют целый ряд различных разрешений для иконки:
Favicon для мобильных устройств Apple
Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:
Прочие favicon
Существуют также иные нестандартные объявления для иконок, например
И как настроить и подключить все это многообразие?
Логично предположить, что для подключения всего этого многообразия favicon потребовалось бы немало усилий. На что возникает резонный вопрос: существует ли инструмент для автоматизации этого процесса? И конечно же он существует. Для тех, кто в своей front-end разработке использует таск-менеджеры такие как Grunt или Gulp, существуют специальные плагины (о них вкратце в конце статьи). Мы же воспользуемся онлайн решением, которое позволит удобно настроить все параметры и сразу увидеть результат.
RealFaviconGenerator.net
Онлайн-генератор позволяет на основе всего одной вашей картинки (желательный размер исходника не менее 260×260) создать иконку для вашего сайта для всех типов браузеров и устройств.
После загрузки иконки мы увидим страничку, где сможем очень подробно настроить нашу иконку под каждую платформу и сразу же увидеть результат.
На вкладке настройки под iOS мы можем указать цвет фона для иконки, а так же указать размер отступов внутри области иконки. Вкладка Dedicated picture позволяет загрузить другой вариант иконки для конкретного типа устройства (аналогично для Android, Windows и Mac OS)
Под андроид настройки немного поинтересней. Можно как и в версии iOS указать цвет фона и отступы, также есть вариант прозрачного фона с фирменной тенью всех стандартных иконок этой ОС. Есть возможность указать конкретное имя приложения. Во вкладке Options мы можем указать URL, на который будет вести наше приложение.
Для закрепленных вкладок в Safari 9 под Mac OS X El Capitan используется новый вариант с svg иконками.
С плиточной системой Windows все немного сложнее. Тут указание цвета фона строго обязательно, а цвет логотипа в большинстве случаев лучше выбрать белый.
Конечные глобальные настройки можно произвести в последнем окне опций. Здесь можно указать свой путь до каталога, где будут лежать все файлы для наших сгенерированных favicon, выбрать степень сжатия для экономии места, выбрать алгоритм масштабирования и т.д.
Внедрение в шаблон
После подкручивания настроек под наши нужды, можно наконец-то сгенерировать иконки. В появившемся окне мы увидим несколько вариантов подключения иконок. Чтобы подключить иконки привычным способом в файл HTML, достаточно скачать предложенный архив и вставить специально сгенерированный код между тегами head вашего сайта.
После чего можно проверить работоспособность ваших favicon тут.
Код для таск-менеджеров Grunt и Gulp
Теперь, когда мы понимаем принципы генерации favicon, для отображения вашего сайта на различных устройствах, мы можем автоматизировать этот процесс с помощью таск-менеджеров. Достаточно после генерации посмотреть вкладки Grunt или Gulp, в зависимости от того, что вы используете, и подробно изучить предложенный код, чтобы в дальнейшем использовать его в своих проектах и автоматизировать процесс генерации без обращения к онлайн ресурсу.
В своих проектах мы используем Gulp
Установите плагин gulp-real-favicon
Вставьте код в свой gulpfile.json
Замените TODO: Path to your master picture на путь до вашего исходника из которой будут генерироваться иконки. Например, assets/images/master_picture.png
Замените TODO: Path to the directory where to store the icons на путь до директории где будут лежать ваши сгенерированые иконки. Например, dist/images/icons
Замените TODO: List of the HTML files where to inject favicon markups на путь до файлов в которые будет вставлен код внедрения favicon. Например, [‘dist/*.html’, ‘dist/misc/*.html’]
Замените TODO: Path to the directory where to store the HTML files на путь до директории, где хранятся ваши HTML файлы.
Сгенерируйте иконки командой
Интегрируйте иконки в ваш шаблон
Заключение
Такие, казалось бы обычные действия, позволят вашему сайту выглядеть на различных устройствах еще более адаптивно.
P.S. еще немного полезностей
Если вы хотите узнать как видят favicon вашего сайта поисковики Яндекс и Google, можно воспользоваться специальными сервисами:
Где mydomain.com — домен вашего сайта.
Ищете исполнителя для реализации проекта?
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.