Color picker

Добавление фавикона

Д

»Ã Ã´Ã¾Ã±Ã°Ã²Ã»ÃµÃ½Ã¸Ã ÃÂðòøúþýð ýð òõñ-ÃÂÃÂÃÂðýøÃÂàò ýðÃÂðûþ HTML-ôþúÃÂüõýÃÂð ÿþÃÂÃÂõñÃÂõÃÂÃÂàòÿøÃÂðÃÂàòÃÂõóþ þôýàÃÂÃÂÃÂþúààÃÂõóþü , ò úþÃÂþÃÂþü ýÃÂöýþ ÃÂúð÷ðÃÂàðÃÂÃÂøñÃÂàrel, ÃÂúð÷ÃÂòðÃÂÃÂøù ñÃÂðÃÂ÷õÃÂàÃÂÃÂþ üàôþñðòûÃÂõü øúþýúÃÂ, ðÃÂÃÂøñÃÂàhref, ÃÂþôõÃÂöðÃÂøù ðôÃÂõàýðÃÂõóþ ø÷þñÃÂðöõýøÃÂ, ø ðÃÂÃÂøñÃÂàtype, ÿþúð÷ÃÂòðÃÂÃÂøù úðúþù ÃÂþÃÂüðàø÷þñÃÂðöõýøàüàøÃÂÿþûÃÂ÷ÃÂõü:

ÃÂÃÂøüõÃÂðýøõ: þñÃÂðÃÂøÃÂõ òýøüðýøõ, ÃÂÃÂþ ôûàúðöôþù òõñ-ÃÂÃÂÃÂðýøÃÂàøûø ôûàúðöôþóþ ÃÂð÷ôõûð ÃÂðùÃÂð üþöýþ ÃÂúð÷ðÃÂàÃÂòþù ÃÂþñÃÂÃÂòõýýÃÂù ÃÂðòøúþý.

àÃÂðñûøÃÂõ ÿþúð÷ðýàÃÂð÷ûøÃÂýÃÂõ òðÃÂøðýÃÂàôþñðòûõýøàÃÂðòøúþýð ø ÿÃÂøòõôõýð ÿþôôõÃÂöúð ñÃÂðÃÂ÷õÃÂþò:

Google Chrome Internet Explorer Firefox Opera Safari
href=»httÃÂ://mysite.ru/myicon.ico»> ÃÂð ÃÂð ÃÂð ÃÂð ÃÂð
ÃÂð ÃÂð (àIE 11) ÃÂð ÃÂð ÃÂð
ÃÂð ÃÂð (àIE 9) ÃÂð ÃÂð ÃÂð
ÃÂð ÃÂð (àIE 11) ÃÂð ÃÂð ÃÂð
ÃÂð ÃÂð (àIE 11) ÃÂð ÃÂð ÃÂð
ÃÂð ÃÂð (àIE 9) ÃÂð ÃÂð ÃÂð

ÃÂõ ÃÂÃÂþøàýõôþþÃÂõýøòðÃÂà÷ýðÃÂõýøõ ÃÂðòøúþýð, þÃÂþñõýýþ ÃÂõóþôýÃÂ, úþóôð ò ÃÂõÃÂø ÃÂýÃÂõÃÂýõàýðÃÂþôÃÂÃÂÃÂàüøûûøðÃÂôàÃÂðùÃÂþò ø ÃÂÃÂÃÂðýøÃÂ, ÃÂðÃÂÃÂàø÷ úþÃÂþÃÂÃÂàÃÂòûÃÂÃÂÃÂÃÂàòðÃÂøüø úþýúÃÂÃÂõýÃÂðüø. ÃÂúþýúð ÃÂðùÃÂð, úðú ø ûþóþÃÂøÿ, ÃÂÿþÃÂþñÃÂÃÂòÃÂõàõóþ ÷ðÿþüøýðõüþÃÂÃÂø ø ÃÂ÷ýðòðõüþÃÂÃÂø. ÃÂõ ÃÂûõôÃÂõàÃÂÿÃÂÃÂúðÃÂàôþÿþûýøÃÂõûÃÂýÃÂàòþ÷üþöýþÃÂÃÂÃÂ, ÃÂûÃÂÃÂÃÂøÃÂàÃÂòþù ÃÂõÃÂÃÂÃÂÃÂ.

Как сделать фавикон

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

  • ассоциироваться с сайтом и/или тематикой. Часто фавиконку создают на основе логотипа, чтобы она работала на брендинг организации, или подбирают что-то, связанное с темой, чтобы подчеркнуть релевантность, визуализировать концепцию, вызвать эмоцию и т. д.;
  • быть простым и понятным. Значок имеет скромные размеры и воспринимается при быстром просмотре, поэтому стоит избегать сложных форм, слишком мелких деталей, неоднозначных смыслов и пр.;
  • по возможности быть оригинальным. В интернете можно найти базы готовых иконок, но если выбрать ту, которая используется многими, особенно конкурентами, можно потерять в узнаваемости.

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида .

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel=»shortcut icon».

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel=»apple-touch-icon».

Дополнительное использование файлов больших размеров, например 120 × 120, способствует тому, чтобы возможность отображения фавиконки в разных местах, устройствах, браузерах была максимальной. Например, в устройствах на iOS иконки большого формата могут использоваться как значки приложений.

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

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

Дизайн фавикона — когда проще не значит хуже

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

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

Если вы хотите использовать двигающийся фавикон в формате gif, будет ли он отличать вас от других иконок? Или же он будет просто отвлекать и даже раздражать пользователей, создавая эффект не до конца подгруженного сайта (что более вероятно).

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

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

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

Теперь, когда вы знаете, как создать красивый фавикон и добавить его на сайт, а будет ли он отображаться в поисковиках? Давайте проверим!

Почему фавикон нужен каждому сайту

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

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

Если фавикон есть, а аудит его не видит — значит, проблема с индексацией или адресом иконки. Проверьте все еще раз. 

Наши англоязычные коллеги говорят: «Дьявол — в мелочах». И фавикон — та самая маленькая деталь, которая может влиять на восприятие вашего сайта и бренда, на их узнаваемость и даже количество переходов из поиска. 

Хороший фавикон — неотъемлемая часть бренда и технический стандарт каждого сайта, и точно стоит потраченного на него времени.   

Просмотры:
3 832

macOS Safari

Can I define a theme color without an icon for the Safari pinned tab?

No. Even the doubtful (a markup without its attribute) is ignored by Safari.

When using the W3C Validator, I get the error «Attribute not allowed on element at this point». What to do about this?

Apple specifications for the Mask Icon are not compliant with W3C. It’s that simple.
This issue is completely harmless. Browers simply ignore this declaration.
By the way it is only supported by macOS Safari.

If W3C validation is a concern, the only workaround is to
remove the whole Mask Icon declaration (ie. ).
Simply removing the attribute does not work. If the
attribute is not present, macOS Safari ignores the Mask Icon entirely,
making it completely useless.

Другие графические форматы фавикон

Впрочем, сейчас активно стала набирать обороты интеграция и других графических форматов: PNG, GIF, JPEG, APNG и SVG. Лучше всего дело обстоит со статическими форматами PNG и GIF, их поддерживают все новые версии популярных браузеров. Анимированный APNG работает только в Firefox (начиная с версии 3.0) и Opera (начиная с версии 9.5), а вот анимированный GIF не понимают лишь IE и Safari. JPEG не поддерживает только Internet Explorer.

Приведу несколько корректных примеров вставки favicon в соответствующих форматах на сайт:

Обращаю внимание на то, что для APNG использует MIME-тип , а для GIF (даже анимированного) –. Также интересен здесь и MIME-тип для SVG формата, это

Desktop, classic browsers

Why is not declared in the HTML code?

Looking for some sample favicon code, you’ve probably encountered:

When your favicon is in the root directory, RealFaviconGenerator does not generate this code.
This is because it somehow confuses some other browsers like Chrome.
And since IE looks for a file named anyway,
the best solution is to not even talk about it.
This is described by Jonathan T. Neal and
Mathias Bynens.

Really? But W3C says this is a bad thing!

Yes, W3C discourages the usage of a predefined URI.
If you follow this recommandation, you will get into troubles with browsers which wrongly choose
instead of the nice PNG versions gently prepared just for them.
It is way better and pragmatic to trick them with this little hack.

Why is about 10KB?

Usually, is about 1KB or 2KB. RealFaviconGenerator creates a 10KB file.
This is because this file is supposed to contain
several versions of the favicon:

  • 16×16 picture
  • 32×32 picture
  • 48×48 picture

Note that is only used by IE (as long as you use the code returned by RealFaviconGenerator).
So the other browsers and platforms, such as Chrome on Windows or Safari on iOS, are not affected by this overweight icon.

Does contain all the necessary sizes?

The generated .
You may wonder what happens in extreme cases, like a 300% zoom in Windows 8.1 in HiDPI. It appears that 32×32 is enough.

Arnaud Lefort created a file which contains «all sizes», from 16×16 to 256×256
and checked the effects on his Windows 8.1 tablet. The results:

  • Classic style
    • 100% zoom
      • Favicon: 16×16
      • Toolbar: 24×24
      • Snap: 32×32
    • 125% zoom
      • Favicon: 24×24
      • Toolbar: 32×32
      • Snap: 32×32
    • 150% zoom
      • Favicon: 24×24
      • Toolbar: 32×32
      • Snap: 32×32
    • 200% zoom
      • Favicon: 24×24
      • Toolbar: 32×32
      • Snap: 32×32
    • 300% zoom
      • Favicon: 16×16
      • Toolbar: 24×24
      • Snap: 32×32
  • Modern / Metro syle

    • 100% zoom: 32×32
    • 150% zoom: 32×32

He also tried high resolution on MacOS with Chrome, Opera 15+, Opera 12.16, Safari, OmniWeb and iCab:
none of them used a resolution higher than 32×32.

Зачем apple-touch-icon.png ?

Как и все – нашел кучу сообщений в логах сайта о том что нет такого файла:  apple-touch-icon-precomposed.png и  apple-touch-icon.png   Оказалось это iOS хочет показать иконку для сайта и пытается ее найти в корневом директории на хостинге в разных вариантах имени файла:

  • apple-touch-icon-57×57-precomposed.png
  • apple-touch-icon-57×57.png
  •  apple-touch-icon-precomposed . png 
  • apple-touch-icon.png

Что же, сделаем ее самостоятельно.

У вас должен получиться целый архив со всевозможными форматами иконок. Итак создаем значок. Чтобы указать значок для всего веб-сайта, нужно поместить созданный файл значка в формате png в корень сайта под названием apple-touch-icon.png. Я подстраховался и положил копии значка в корень сайта с названиями apple-touch-icon-precomposed.png  и apple-touch-icon.png

  • Значок в формате PNG с именем apple-touch-icon.png нужно разместить в корневой папке сайта
  • Если вы хотите указать значок для одной веб-страницы или заменить значок веб-сайта с веб-страницы конкретной иконкой, добавьте элемент ссылки на веб-страницу:
    В приведенном выше примере, замените custom_icon.png файлом иконки.
  • Чтобы указать несколько значков для устройств с разным разрешением, например, для поддержки устройств iPhone и iPad, нужно добавить атрибут sizes к каждому элементу link следующим образом:
  • Наиболее подходящим для устройства, если не указан sizes, является размер элемента до 60 х 60.

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

В случае если иконка должна лежать в другом месте (например в специальной папке) то необходимо добавить тег следующего вида, например:

Желающим подробнее вникнуть в тему, могу предложить статью на английском языке: https://mathiasbynens.be/notes/touch-icons

Пример тегов в странице сайта )какой то сайт попался под руку ):

head>
		meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
		meta name="MobileOptimized" content=""/>
		meta name="HandheldFriendly" content="true"/>

		link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-touch-icon-57x57.png">
		link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-touch-icon-60x60.png">
		link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-touch-icon-72x72.png">
		link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-touch-icon-76x76.png">
		link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-touch-icon-114x114.png">
		link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-touch-icon-120x120.png">
		link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-touch-icon-144x144.png">
		link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-touch-icon-152x152.png">
		link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon-180x180.png">
		link rel="icon" type="image/png" href="/favicon/favicon-32x32.png" sizes="32x32">
		link rel="icon" type="image/png" href="/favicon/favicon-194x194.png" sizes="194x194">
		link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96">
		link rel="icon" type="image/png" href="/favicon/favicon-16x16.png" sizes="16x16">
		link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#ef5a24">
		link rel="manifest" href="/favicon/manifest.json">
		link rel="shortcut icon" href="/favicon/favicon.ico">
		meta name="apple-mobile-web-app-title" content="VideoClub">
		meta name="application-name" content="VideoClub">
		meta name="msapplication-TileColor" content="#da532c">
		meta name="msapplication-TileImage" content="/favicon/mstile-144x144.png">
		meta name="msapplication-config" content="/favicon/browserconfig.xml">
		meta name="theme-color" content="#022441">

		style id="page-height">body, #page, #background-color, #background-dots{min-height: 100vh;}style>

Запомните

  1. Самым распространенным форматом фавиконов является ico, но он устаревший. Лучше использовать формат png и svg. Проверяйте, какие форматы поддерживают браузеры с помощью сервиса caniuse.com. 

  2. Раньше было достаточно создать один размер фавикона 16х16 пикселей. Сейчас делайте иконки во всех размерах. Если создали фавикон одного размера, то многие браузеры смогут перевести его нужный размер, но не исключены ошибки и некорректное отображение. Если в коде будут прописаны все размеры, то браузер подтянет нужный. 

  3. Чтобы сделать favicon, воспользуйтесь специальным сервисами: realfavicongenerator.net, favicon.cc и другими. Генерируйте иконки online сразу для всех видов браузеров и мобильных платформ. 

  4. Положите фавикон в корневой каталог сайта или пропишите ссылку в теге . Если вам нужны разные иконки для каждого раздела сайта, прописывайте их через на каждой странице. 

  5. Проверьте корректность индексации. Ответ сервера должен быть HTTP 200. Посмотрите видимость фавикона в Яндексе и Google через сервисы поисковиков.

Материал подготовила Светлана Сирвида-Льорентэ.

Android Chrome

What is ?

This is the Web application manifest, defined by the W3C and
supported by Google.
At the time of writing, it is only used by
to declare the «Add to home screen» icon and other settings.

used to have descriptors, but they disappeared. Why?

The descriptos were initially documented by Google,
thus introducted in RFG. However,

these descriptors were wrongly used and actually not necessary.
This is why they are not created starting from
.

Why is the 192×192 PNG icon not declared in the HTML code?

.
However, .

This declaration is useless in modern Android Chrome instances.
Even on Android 4.1.1 Jelly Bean, the most recent version of Chrome is available,

making the manifest compatible with 95% of the Android devices around.
Plus Chrome is not available on Android 2.x (Froyo and Gingerbread) anyway.
This is why RealFaviconGenerator does not generate it by default since .

Краткая техинструкция по фавиконам

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

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

Самый известный, хоть уже и устаревший формат фавиконов — ICO. Его основное преимущество в том, что один файл может хранить в себе несколько вариантов размеров фавикона. 

Раньше Internet Explorer поддерживал только этот формат, сегодня же практически все известные браузеры распознают иконки в PNG, некоторые — в GIF, JPEG, SVG. Исключение — Internet Explorer 10 и более ранние версии браузера, которые принимают только ICO-файлы.

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

У фавиконов в формате SVG, GIF, JPEG проблемы именно в отсутствии такой широкой поддержки. Но пару слов в защиту SVG формата все-таки хочется сказать — иконки в SVG масштабируются без потери качества, что в будущем может стать отличным решением всех проблем с отображением фавиконов. Дело за браузерами, которые уже постепенно начали внедрять поддержку этого формата свободной векторной графики. 

Узнать, какие именно форматы фавиконов поддерживают разные браузеры, можно с помощью онлайн-сервиса . Например, вы сможете увидеть, какие браузеры поддерживают или не поддерживают фавиконки в формате PNG и SVG.

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

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

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

Не так давно некоторые веб-мастера получили от Google письмо с рекомендацией увеличить разрешение фавикона до 192×192. 

В письме речь шла о том, что более качественные фавиконы могут принести в 2 раза больше кликов по новым вкладкам в Chrome и на главной странице Android. Согласитесь,  на расплывчатый фавикон вряд ли захотят кликать — значит, низкое разрешение иконки не вариант для хорошего пользовательского опыта.

Несколько общих правил, которых стоит придерживаться:

  • Использовать квадратный значок сайта.
  • Не использовать фавикон чужой компании или неприемлемого характера (например, свастика) — иначе поисковик будет отображать картинку по умолчанию – бесцветную планетку.
  • Фавикон должен быть доступным для сканирования поисковыми роботами.

Пять лет назад с релизом HTML5 появился атрибут sizes, который значительно облегчает работу с фавиконами. Этот атрибут нужно указывать в формате ширина х высота без единиц измерения (если их несколько, используйте пробел). Например:

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

Что такое фавикон

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

Как установить

>Задайте правильное имя – favicon.ico или другой тип расширения. Однако помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе. 

Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net. 

Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/favicon.ico” для файлов формата ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку. 

Пропишите адрес в коде на главной странице в теге

Десктоп (ico) —

Декстоп (png) —

Apple —

Safari —

Андроид —
Иконки в гаджетах Apple всегда закругляются по углам, чтобы этого избежать используйте apple-touch-icon-precomposed вместо apple-touch-icon. 

Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200. 

Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта: 

Windows 8 and 10 with Internet Explorer and Edge

What are the sizes of the Windows 8 tile pictures?

There are two cases to distinguish:

  • Windows 8.0 / Internet Explorer 10: A single 144×144 picture. Easy.
  • Windows 8.1 / Internet Explorer 11: There are 4 pictures, named ,
    , and
    . They should be 70×70, 150×150, 310×310 and 310×150 right?
    Almost. In fact Microsoft recommends to use larger pictures.
    This is to present high resolution pictures to the user even when the desktop is scaled up.
    Therefore the recommended sizes are 128×128, 270×270, 558×558 and 558×270.

What is ?

Internet Explorer 11 uses
to find the tile pictures and color. It is possible to indicate these information in the HTML code, but having this file has two benefits:

  • Whatever you put in the HTML pages, IE11 will look for .
    This generates 404 errors in your logs if the file is not present.
  • Putting the settings in saves a few bytes in the HTML pages. Only IE11 will load these extra data.

Since all tiles are declared in , why not ?

was defined for Windows 8.0,
whereas was introduced by Windows 8.1.
is somehow deprecated.

You suggest Windows 8 tile colors. Where do they come from?

These are some of the colors listed by Colorlib.
I was able to check that these colors match Windows 8 well.
However, the only official reference from Microsoft is apparently for
Windows Phone (see slide 55) and
do not match Windows 8.

RFG used to generate 5 tile icons for Windows. Now there is only one. Why?

RFG still generate 5 icons. However, there are optional.
You can get them all when creating your favicon by checking the right
checkboxes.

is for Windows 8.0 and IE 10 only,
which account for only 3% of the desktop market (compared to 25% for
Windows 8.1 and Windows 10 combined). So this icon is not really useful and
somehow deprecated.

Windows 8.1 and 10 with IE 11 and Edge support 4 icons:

  • A small, square icon.
  • A medium, square icon. This icon is always generated by RFG.
  • A big, square icon.
  • A rectangular, wide icon.

When they add your site to their homescreen, your visitors are presented
all the available icons, letting them pick the one that fit their device
best. Although this is a nice feature, the Metro interface is probably not
widespread enough to justify the systematic creation of 4 icons. A single
one is a good default.

Что такое фавикон и где он используется

Фавикон (favicon) — это в дословном переводе с англ. «значок для избранного» (FAVoritesICON). Именно так называются закладки в браузере Internet Explorer, где впервые стали использоваться визуальные иконки для быстрого поиска нужного сайта. 

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

Где же можно увидеть фавикон?

1. На открытых вкладках перед названием сайта. Если вы не загрузили фавикон, у вашего сайта будет стандартный значок в виде черно-белой планеты.

2. В истории просмотров браузера.

3. На панели закладок.

4. В избранном, куда вы сохраняете все интересные страницы.

5. В десктопной и мобильной выдаче Яндекса — как в органике, так и в рекламных объявлениях.

6. В мобильной и десктопной выдаче Google. Фавиконы на мобильных экранах появились еще весной 2019 года, а вот в десктопной выдаче — буквально в первые недели 2020 года.  

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

Как же создать собственный фавикон для сайта? Можно ли просто уменьшить существующее лого бренда и загрузить его на сайт? Какого размера фавикон лучше использовать? Давайте разбираться.

Как установить фавикон иконку на сайт?

Ну, а теперь попробуем сформировать обобщённый вариант вставки фавикон сайт, у меня он получился таким:

Попробую внести ясность в предложенную конструкцию. В начале идёт фавикон для Internet Explorer, который среагирует на . Далее оптимальным будет статичная PNG иконка с прозрачностью, а анимацию иконки я отдал GIF формату. Для мобильных устройств создадим иконки стандартного размера 57×57 пикселей, одну без эффектов, а другую со своими эффектами ( – отключит эффекты браузера). Для того чтобы избежать проблем с HTTP и HTTPS я указал относительный путь, начиная от корня сайта ( – в начале адреса), но для IE, наверное, лучше будет использовать абсолютный путь.

На этом у меня всё. Надеюсь, что статья была Вам полезна. Если сможете внести какие-то правки, дополнения, уточнения и т.д. – пишите

Спасибо за внимание. Удачи!

Короткая ссылка: http://goo.gl/LVkHdk

Как поменять иконку кодом

Ввиду разнообразия тем, бывает что способы описанные выше не срабатывают. Тогда прибегнем к методу, прописываем favicon напрямую в тему.

Для начала нужно установить FTP соединение и в корень, обычно папка public_html, загружаем изображение, с каким расширением решайте сами, главное чтобы он был квадратным.

favicon.png в корне сайта

Даю код, который нужно добавить в раздел head в активной теме.

Идем в админпанели Внешний вид > Редактор и выбираем файл header.php то есть заголовок, и перед закрывающим тегом /head вставляем данный код.

Правильно устанавливаем фавикон в раздел head

  1. Редактор тем
  2. Заголовок header.php
  3. Закрывающий тег
  4. Код для вставки
  5. Обновляем файл

В примере разобран файл в формате png, но если в другом, например, jpg, то в код меняем таким образом.

Видим что изменился атрибут type он стал со значением jpg, а так же расширение картинки изменилось на другое. Обновляем и смотрим на работу кода.

Favicon в браузере

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла.
Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API.
То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше.
Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают
JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16×16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру,
но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

Буду рад любым отзывам и либо уберу эту функцию, если она никому не нужна, либо
доработаю, если обнаружатся какие-то ошибки. Спасибо.

Что такое favicon.ico

favicon — это небольшая картинка, являющаяся логотипом сайта.
Она появляется в шапках вкладок, в адресной строке
(кроме новейших версий Chrome и Firefox
†),
в закладках.

В одном файле favicon.ico может быть несколько изображений разного
размера. Чаще всего используется изображение 16×16. Бо́льшие размеры
используются, например, в Windows, при создании закладки прямо на
рабочем столе. В этом случае размер зависит от версии операционной
системы и настроек рабочего стола.

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

Как разместить favicon.ico на своём сайте

Проще всего просто положить иконку в корень сайта. Она должна
стать доступна по адресу . Именно
тут её будут искать браузеры.

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

Вы так же можете явно указать браузерам, что у вас есть favicon.

Для этого надо включить в секцию код такого вида:

Что касается , тут есть неоднозначность. Стандартным типом
является . Я бы советовал использовать его. Однако,
особо древние версии IE предпочитают тип
. Подозреваю, что все современные
браузеры поддерживают этот тип, но кто знает. Каждые пару месяцев
появляется новый современный браузер и поручиться за все современные
браузеры я не могу.

Возможно вас так же заинтересует
конвертер PNG в ICO и
онлайн генератор обоев, фонов и заливок.

Отправить

General

Why do you call it «Real»?

There are a lot of favicon generators around. They all generate a single file and leave you there.

In order to support most browsers and platforms, you need more than a dozen pictures.
That’s right.
And the HTML code is not straightforward. In fact, most code snipets you can find on the Web are wrong.

You are a web designer or a developer. You have spent countless hours on your brand new web project.
Now you need a favicon. It must support majors browers and, in fact, as many browsers as possible.
But you don’t have time to waste on such mundane task. RealFaviconGenerator help you do just that:
submit your high definition picture and get your numerous favicons and HTML code that works.

Why so many files?
Most of the time, favicon is considered to be just one file (), and sometimes two ( and ).
The real answer is «a lot of»:

Used by IE, and also by some other browsers if we are not careful.
The classic favicon, displayed in the tabs.
For Safari on Mac OS.
For Android Chrome M39+ with 0.75 screen density.
For Android Chrome M39+ with 1.0 screen density.
For Android Chrome M39+ with 1.5 screen density.
For Android Chrome M39+ with 2.0 screen density.
For Android Chrome M39+ with 3.0 screen density.
For Android Chrome M39+ with 4.0 screen density.
For Android Chrome M47+ Splash screen with 1.5 screen density.
For Android Chrome M47+ Splash screen with 3.0 screen density.
For Android Chrome M47+ Splash screen with 4.0 screen density.
For .
For Windows 8 / IE10.
For .
For .
For .
iPhone and iPad users can turn web pages into icons on their home screen.
Such link appears as a regular iOS native application.
When this happens, the device looks for a specific picture.
The 57×57 resolution is convenient for non-retina iPhone with iOS6 or prior.
Learn more in Apple docs.
Same as , for non-retina iPhone with iOS7.
Same as , for non-retina iPad with iOS6 or prior.
Same as , for non-retina iPad with iOS7.
Same as , for retina iPhone with iOS6 or prior.
Same as , for retina iPhone with iOS7.
Same as , for retina iPad with iOS6 or prior.
Same as , for retina iPad with iOS7.
Same as ,
for .
Same as , for «default» requests, as some devices may look for this specific file.
This picture may save some 404 errors in your HTTP logs.
See Apple docs
Same as , expect that is already have rounded corners (but neither drop shadow nor gloss effect).

Why do you recommend to put all files at the root of the web site?

When generating a favicon with RealFaviconGenerator, the instructions ask you to place all files at the root of your web site.
You may want to place them in a sub-directory, for example in , just to make things clearer.
However, there are three drawbacks with this approach:

  • Internet Explorer looks for at the root of the web site. Granted: this is because we
    ask you to .
  • iOS devices look for files such as at the root of the web site,
    as described by Apple.
    This issue can be mitigated by declaring the icons in the HTML code (this is necessary for Android anyway),
    but following Apple conventions is probably the best move.
  • By default, Internet Explorer 11 looks for at the root of the web site.
  • Several services, such as ,
    look for in the root directory.

What is the extra 194×194 icon in the generated package?

Sometimes, RealFaviconGenerator creates a 194×194 PNG icon.

Some browsers, such as Android Firefox, tend to load the largest PNG icon they find. This behavior is arguable and it has at least a drawback:
it can conflict with the 192×192 icon dedicated to Android Chrome. Suppose you designed the Android Chrome icon with a drop shadow.
You don’t expect to see this picture in other browsers. The workaround to this issue is to generate an «even larger icon».

Note: when the Android Chrome icon is the original master picture, this extra icon is not needed, thus not generated.

Ссылка на основную публикацию