Http favicon png: How to Add a Favicon to your Site

О favicon и не только

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

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

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

<link href="/favicon.png" rel="icon" type="image/png" />

Favicon.svg

Формат SVG — новый открытый формат векторной графики.

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно здесь.

Favicon – устройства, ОС, технологии

С приходом HTML 5 появилась возможность указывать размеры favicon. Теперь различные мобильные устройства или браузеры могут выбрать необходимый размер значка и использовать его, например, как изображение для ярлыка на рабочем столе. За указание размеров отвечает атрибут size. Делается это так:

<link href="/favicon-32x32.png" rel="icon" type="image/png" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" />

Для favicon.svg можно сделать так:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

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

Windows

Начиная с версии Windows 8.1, появилась возможность закреплять сайты с помощью т. н. живых плиток. Для изображений на плитках малого размера будет использоваться favicon. Для средних и больших плиток лучше задать изображения подходящих размеров. Сделать это можно двумя способами: разместить в заголовке сайта специальные метатеги или создать файл конфигурации браузера. Второй способ более предпочтителен т. к. размещение лишних тегов метаданных увеличивает заголовок страницы, что не лучшим образом сказывается на скорости загрузки. И так, создаётся файл browserconfig.xml следующего содержания:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square70x70logo src="/mstile-70x70.png"/>
            <square150x150logo src="/mstile-150x150.

 png"/>
            <square310x310logo src="/mstile-310x310.png"/>
            <wide310x150logo src="/mstile-310x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Он описывает четыре изображения для различных размеров живых плиток: три квадратные и одно прямоугольное. В теге TileColor указывается фоновый цвет плитки. Сами изображения следует брать большего размера, примерно в 1,8-2 раза. Например, для плитки 70×70 лучше взять изображение размером 128×128. Делается это с целью поддержки экранов с высокой плотностью пикселов. Подключение файла конфигурации браузера на сайте производится с помощью следующего кода: 

<meta name="msapplication-config" content="browserconfig.xml" />

Mac OS и Safari

Версии Safari под Mac OS поддерживают формат SVG. Такое изображение нужно для закладок в этом браузере. Но есть один момент – элементы изображения должны быть или чёрными или белыми. В коде подключения используется атрибут color. Так вот, после подключения все элементы чёрного цвета будут отображаться тем цветом, который указан в этом атрибуте. Подключение для Safari в Mac OS производится с помощью следующего кода:

<link href="/safari-pinned-tab.svg" rel="mask-icon" color="#598473" />

Обратите внимание на то, что имя файла и значение rel должны быть такими, как в примере.

Apple (iOS)

Safari в устройствах Apple, на базе операционной системы iOS тоже использует иконку сайта для закладок. Но favicon может использоваться и как значок на рабочем столе. Для того, чтобы на устройствах Apple значок сайта смотрелся прилично, понадобятся изображения в формате PNG и несколько строк кода. Устройств на базе iOS довольно много и они имеют различные размеры экранов. Для каждого размера нужен свой значок. Размеры этих значков следующие: 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 144×144, 152×152, и 180×180.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

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

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Затем добавим строку кода из предыдущего примера:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Т. е. по крайней мере, основная иконка должна быть 180×180. Остальные устройства могут уменьшить изображение. Есть ещё одна тонкость, иконки в iOS оформляются в определённом стиле, т. е. используются скругленные уголки, тень, блики. Когда загружается значок сайта, устройство начинает приводить его к этому стилю. Если это не нужно, то добавляем следующий код:

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

А ещё можно указать заголовок:

<meta name="apple-mobile-web-app-title" content="Aitishnik.RU" />

Android

К сожалению, изображения в формате SVG пока не поддерживаются ОС Android. Поэтому используются изображения в формате PNG. Для настроек используется файл manifest.json. Он может быть следующего содержания:

{
    "name": "Aitishnik.RU",
    "icons": [
        {
            "src": "android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "http://www.

 aitishnik.ru",
    "display": "standalone"
}

Файл – манифест описывает настройки отображения сайта на домашнем экране, как веб-приложения. В примере:

name – подпись к приложению. Если ключ name не указан, то для подписи будет использоваться содержимое тега title из заголовка сайта. Если значение name длинное, то можно добавить ключ short_name для короткой подписи.

icons – этот ключ определяет набор иконок. Внутри него ключи src, sizes и type определяют источник изображения, размер и тип изображения соответственно.

theme_color – передаёт цветовое значение строки состояния.

background_color – фоновый цвет для иконки на домашнем экране.

display – режим отображения веб-приложения.

Файл manifest.json подключается в заголовке сайта следующим кодом:

<link rel="manifest" href="/manifest.json" />

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

Ещё о сайтостроении

• • Основы юзабилити

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

  • Зачем вебмастеру VPN?

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

  • Что лучше хостинг или VPS

    Сказать, то VPS лучше виртуального хостинга (или наоборот) некорректно, поскольку они предназначены для разных аудиторий.ВПС актуален в том случае, когда виртуальный хостинг не в силах поддерживать web-проект, или же пользователю нужно…

  • Landing page: сам себе режиссер

    Уже невозможно представить жизнь без интернета, он коснулся всех сфер нашей жизнедеятельности, бизнес тому не исключение. И для увеличения своей прибыли в условиях жесткой конкуренции у вас должна быть эффективно работающая landing page….

  • Основная цель выделенного сервера

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

  • Сайт.

    С чего начать?

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

Favicon (иконка сайта) | SEO-портал

Иконка Favicon (фавиконка) — маленький, но очень важный атрибут сайта. Из материала вы узнаете о том, зачем нужна фавиконка, какое значение она имеет в SEO, а также о том, как создать и подключить Favicon в формате ICO и других форматах к своему сайту.

Зачем нужна иконка Favicon для сайта?

Иконка сайта Favicon (от англ. Favorite Icon — иконка для избранного; также: фавиконка, пиктограмма сайта, значок сайта) — небольшая (16×16 px) картинка (как правило в формате ICO), отображаемая во вкладках и закладках браузера, а также имеющая значение в SEO-оптимизации.

Иконка сайта в браузере

Главное назначение иконок Иконка сайта во вкладках браузера

Все современные интернет-обозреватели отображают иконку сайта во вкладках:

Обратите внимание на вкладки вашего браузера, в котором открыта данная страница: если их много, то на мгновение представьте их без favicon. Согласитесь, без них пользоваться вкладками стало бы явно неудобно: при большом количестве вкладок в окне браузера ориентироваться в них позволяют только иконки Favicon.

Иконка сайта в закладках браузера

Кроме отображения во вкладках, иконка сайта отображается в закладках браузеров (в Иконка сайта перед адресной строкой браузера

Некоторые браузеры отображают пиктограмму сайта перед адресной строкой, а также в выпадающем списке URL-адресов выпадающей строки:

Значение иконки сайта в SEO

Favicon является SEO-фактором, т. к. она отображается в сниппетах поисковой выдачи Яндекса и Google (в мобильной поисковой выдаче фавиконки стали отображаться с мая 2019-го, а в десктопной — с начала 2020-го года), в некоторой мере влияя на их кликабельность (вероятность перехода на сайт из поисковой выдачи), которая является положительным поведенческим фактором ранжирования.

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

Из всего вышесказанного следует, что сниппета,

Иконка сайта и ПС Яндекс

Favicon отображается в поисковой выдаче Яндекса и может непосредственно влиять на внешние поведенческие факторы.

Favicon в сниппетах Яндекса

Фавиконка сайта отображается напротив заголовков сниппетов:

Наличие (отсутствие) и привлекательность фавиконки может отражаться на кликабельности сниппета поисковой выдачи Яндекса, косвенно влияя на ранжирование.

У Яндекса существует отдельный поисковой робот, индексирующий файлы favicon в формате ICO и в других форматах. Обновление фавиконок в выдаче Яндекса – явление достаточно редкое, занимающее около месяца.

Предупреждение об отсутствии файла

Если иконка сайта не отображается в Яндексе, то обратите внимание на наличие предупреждения «Отсутствует файл favicon на сайте» в разделе «Диагностика сайта» сервиса Яндекс.Вебмастер:

Проверка наличия Favicon в индексе

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

http://favicon.yandex.net/favicon/[абсолютный URL-адрес]

Например: http://favicon.yandex.net/favicon/https://seoportal.net

Если фавиконка проиндексирована, то она отобразится на странице в формате PNG.

Проверка Favicon на соответствие требованиям

Если иконка сайта не проиндексирована, и (или) в Яндекс. Вебмастере присутствует указанное выше предупреждение об её отсутствии на сайте, то проверьте файл на соответствие требованиям.

Чтобы фавиконка отображалась в результатах поиска, необходимо разместить картинку (файл favicon.ico) размером 16×16 пикселей в корневом каталоге сайта. Предпочтительный формат пиктограммы сайта — ICO, но возможны и другие форматы: GIF, JPEG, PNG и BMP.

Яндекс.Помощь

Требования к иконке сайта

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

Для фавиконок существуют требования:

• к названию файла,
• к геометрическому размеру,
• к формату файла,
• к размещению,
• к HTML-разметке.

Теперь детально рассмотрим перечисленные требования к файлу фавиконки.

Название файла

Традиционно файл иконки сайта принято называть favicon, но фактически он может называться как угодно, если в HTML-коде указан явный путь к иконке сайта. Иначе говоря: если в корне сайта размещена иконка favicon.ico (именно в формате ICO), а в HTML-коде нет ссылки на неё, то браузер всё равно обнаружит иконку по её названию и будет отображать по назначению. Если же фавиконка сайта будет называться иначе, чем favicon.ico, или иметь расширение, отличное от ICO, при этом в HTML-коде не будет явной ссылки на неё, то браузер не сможет её обнаружить.

Во избежание проблем с отображением иконки сайта в браузере и сниппетах поисковой выдачи Яндекса, файл иконки следует называть «favicon.ico».

Геометрический размер

В Справке Google сказано, что геометрический размер фавиконки должен быть кратным 48 и составлять не меньше 48×48 px. Во вкладках, закладках и перед адресной строкой браузеров, а также в сниппетах поисковой выдачи значок Favicon отображается в размере 16×16 пикселей, поэтому делать картинку более 48×48 px не имеет смысла.

Значок сайта должен быть квадратным и иметь размеры, кратные 48 пикселям, например 48 x 48, 96 x 96, 144 x 144. Файлы SVG конкретного размера не имеют. Поддерживаются значки всех допустимых форматов. Убедитесь, что значок сайта хорошо выглядит при разрешении 16 x 16 пикселей, так как для показа в результатах поиска масштаб значка будет изменен. Учтите, что добавлять значок размером 16 x 16 пикселей не следует.

Справка Google

Формат файла

Традиционным форматом Favicon является ICO, однако современные браузеры могут отображать фавиконки и в других форматах:

Как отмечалось ранее, если пиктограмма сайта будет создана не в формате ICO, то в HTML-коде необходимо явно указывать путь к файлу, иначе браузер (а также робот Яндекса) не сможет определить иконку для отображения.

Иконка сайта Favicon в формате ICO поддерживается всеми современными браузерами.

Размещение на сайте

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

Если на сайте применяется одна фавиконка, то её следует размещать в корневом каталоге сайта.

HTML-код иконки для сайта

Прописывать Favicon в HTML-коде не обязательно, если фавиконка соответствует следующим требованиям:

• имя файла: favicon,
• формат файла: ICO,
• размер значка сайта должен быть кратным 48, т. е. не менее 48×48 px,
• размещение файла: корневой каталог сайта.

В иных случаях (например, если для отдельных страниц применяются отдельные иконки) необходимо указывать тег <link> для Favicon в HTML-коде.

Какой должна быть иконка сайта?

Несмотря на свой скромный размер, Favicon является отличительным символом сайта в глазах как пользователей, так и поисковых систем, а её наличие и привлекательность играют не последнюю роль в кликабельности сниппетов поисковой выдачи Яндекса.

Привлекательность

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

Используйте уникальную фавиконку

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

Фавиконка должна быть контрастной

Иконка сайта, несмотря на свой скромный размер, должна быть четкой: пользователь должен ясно видеть, что изображено на картинке, иначе он её не запомнит и не оценит.

Подумайте об использовании анимации

Браузеры Firefox и Opera отображают анимацию в иконках сайта форматов ICO и GIF. Однако не следует злоупотреблять этой возможностью. Слишком навязчивая анимация в иконке сайта может отвлекать внимание пользователей.

Учитывайте возможность применения прозрачности

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

Уникальность

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

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

Контрастность

Иконка сайта должна быть четкой и контрастной, но не слишком резкой. Не используйте Favicon с размытым нечетким изображением или со слишком резким выделением пикселей:

Исходное изображение

Анимация в Favicon

Некоторые браузеры могут отображать анимацию фавиконок с расширениями ico и gif:

Статичная иконка

Анимированная иконка

Создать анимированный Favicon можно с помощью графических редакторов или специализированных онлайн-сервисов.

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

При создании анимированного Favicon руководствуйтесь следующими правилами:

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

Эффект прозрачности

Прозрачный и полупрозрачный фон фавиконок становится заметен в неактивных вкладках браузера, а в остальных случаях (в активных вкладках, закладках и даже в сниппетах Яндекса) фавиконка отображается на белом или светло-сером фоне:

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

При определении прозрачности фона для иконки сайта руководствуйтесь следующими принципами:

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

Как сделать Favicon для сайта?

Существует несколько способов создания фавиконок в формате ICO и в других форматах: с помощью онлайн-генераторов, узконаправленных программ или графических редакторов. Мы рассмотрим процесс создания в онлайн-генераторе и в программе Photoshop.

Онлайн-генератор favicon.cc

В сервисе favicon.cc можно создавать фавиконки только в размере 16×16 px, поэтому рекомендуем использовать другой способ для создания значка 48×48 px (согласно информации в Справке Google).

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

Возможности сервиса

Favicon.cc позволяет:

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

К условным недостаткам генератора можно отнести:

• отсутствие русской версии,
• экспорт файлов только в формате ICO.

Создание новой фавиконки онлайн

Чтобы сделать пиктограмму сайта в режиме онлайн, перейдите в сервис favicon.cc и следуйте инструкциям:

1. кликните Create New Favicon,
2. в области «Color Picker» в правой части окна размещены инструменты для рисования:
   • палитра цветов — для определения цвета карандаша,
   • Transparency — ползунок определения степени прозрачности,
   • Last Used Colors — панель быстрого выбора из последних применяемых цветов,
   • transparent — устанавливает прозрачный цвет («стирка»),
   • move — позволяет переместить все пиксели в редакторе.
3. разобравшись с инструментами, приступайте к рисованию иконки для сайта в редакторе,
4. все изменения будут сразу отображаться в натуральную величину (16×16 px) в области «Preview»,
5. скачать готовую фавиконку можно по клику на Download Favicon.

Создание анимированной фавиконки

Генератор favicon.cc позволяет легко сделать анимированную иконку favicon.ico для сайта в режиме онлайн:

1. кликните Use Animation под окном редактора,
2. раскроются дополнительные инструменты для работы с кадрами:
   • номер кадра указан прямо под редактором Favicon,
   • в выпадающем списке напротив номера можно выбрать частоту смены кадра,
   • Clear Frame — очистка окна редактора (текущего кадра),
   • Append New Frame — добавление нового чистого кадра (откроется в редакторе),
   • Copy Previous Frame — позволяет скопировать пиксели предыдущего кадра в текущий,
   • Delete Frame — удаление текущего кадра,
   • animate preview — активация демонстрации анимации в области «Preview»,
   • в выпадающем списке напротив чекбокса можно выбрать количество циклов анимации.

Онлайн-конвертер Favicon

Функционал favicon.cc позволяет конвертировать изображения из форматов JPG, JPEG, GIF, PNG, BMP, ICO, CUR в формат ICO с преобразованием их размера:

1. кликните Import Image,
2. выберите файл для преобразования размером не более 5 Мб,
3. определите способ преобразования размера изображения до квадратных пропорций:
   • Keep Dimensions — с сохранением пропорций исходного изображения,
   • Shrink to square icon — сжимая или растягивая изображение.
4. кликните Upload для конвертации.

Готовые бесплатные фавиконки

Сервис favicon.cc позволяет бесплатно просматривать, редактировать и скачивать созданные с помощью данного генератора фавиконки:

1. чтобы перейти к списку готовых фавиконок кликните:
   • Latest Favicons — последние созданные иконки,
   • Top Rated Favicons — самые популярные иконки,
2. кликните по названию понравившейся фавиконки,
3. кликните:
   • Download Favicon чтобы скачать копию фавиконки,
   • Edit Copy of Icon чтобы приступить к редактированию копии фавиконки.

Создание Favicon в Photoshop

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

Особенности программы

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

Не будем перечислять возможности фотошопа при работе с изображениями (это другая тематика и слишком большой объём информации), но разберём условные недостатки программы, с которыми можно столкнуться при создании Favicon:

• Сложный многофункциональный интерфейс

  Программа Photoshop предназначена для качественной обработки изображений (в частности фотографий). Для быстрого освоения подойдут другие узконаправленные программы по созданию фавиконок.

• Нет возможности сохранять файлы в формате ICO

  Но можно сохранять иконку в формате BMP и заменять расширение на ICO.

• Нет возможности создавать анимационные Favicon в формате ICO

  Но можно создавать анимационные фавиконки в формате GIF.

Для изображений и инструкций данного материала применялась русифицированная версия Adobe Photoshop CC 2015.

Рисование Favicon

Нарисуем иконку для сайта в программе Adobe Photoshop CC:

1. открываем программу,
2. кликаем Файл → Создать,
3. в появившемся окне устанавливаем высоту и ширину 16 px и жмем ОК,
4. для удобства рисования:
   • масштабируем изображение (клавиши CTRL + + и CTRL + -),
   • включаем сетку: (клавиши CTRL + '),
   • настраиваем сетку: (Редактирование → Настройки → Направляющие, сетка и фрагменты. ..),
   • используем инструменты для рисования в зависимости от необходимости (карандаш, кисть и др.).

Сохранение фавиконки

Стандартный функционал Photoshop не позволяет сохранять файлы в формате ICO. Для этого можно воспользоваться простым трюком смены формата BMP на ICO:

1. кликаем Файл → Сохранить как,
2. в окне сохранения в соответствующем текстовом поле указываем имя файла favicon, а в поле «Тип файла» из выпадающего списка выбираем BMP и сохраняем,
3. открываем Total Commander и меняем расширение файла на ICO.

Создание Favicon из изображения

Если у вас есть готовое изображение (например, полноразмерный логотип), вы можете сделать из него фавиконку с помощью Photoshop:

1. откройте исходное изображение в Photoshop,
2. измените пропорции изображения в соотношении 1×1 (форма квадрата) с помощью:
   • кадрирования (клавиша C),
   • изменения размера изображения (клавиши ALT + CTRL + I),
   • изменения размера холста (клавиши ALT + CTRL + C),
3. перейдите в режим изменения размера изображения (клавиши ALT + CTRL + I):
   • уменьшите изображение до 16×16 px,
   • в выпадающем списке «Ресамплинг» для оптимальной четкости выберите «Бикубическая (с уменьшением)»,
   • вы можете поэкспериментировать с другими вариантами ресамплинга, оценивая результат в том же окне,
4. сохраните файл как указано выше (клавиши ALT + S), или в другом веб-формате (клавиши ALT + CTRL + SHIFT + S).

Создание анимированной Favicon

Для создания анимированной пиктограммы сайта в формате GIF:

1. открываем статичную фавиконку в программе,
2. кликаем Окно → Шкала времени,
3. кликаем Создать анимацию кадра,
4. выбираем кадры и:
   • дублируем слои для новых кадров,
   • редактируем слои для новых кадров,
   • настраиваем отображение слоёв в кадрах,
   • устанавливаем частоту смены кадров.
5. переходим в «Сохранить для Web» (клавиши ALT + CTRL + SHIFT + S):
   • выбираем тип файла GIF,
   • в разеле «Анимация» выбираем число повторов «Постоянно»,
   • сохраняем картинку.

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

Перед подключением фавиконки в HTML-коде необходимо правильно создать и установить файл Favicon на сайте: по умолчанию браузеры ищут фавиконку по названию favicon.ico в корневой папке сайта. Если иконка не соответствует какому-то из требований (название, расширение и размещение файла), то следует указывать на неё в HTML-коде.

HTML-код для Favicon

Чтобы прописать иконку сайта в HTML-коде применяется тег link с атрибутами rel, type и href, размещаемый в разделе head:

<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">

Возможные значения атрибутов тега <link> для Favicon

Атрибут	Значение	Пояснение
rel	icon	Указывает, что тег link определяет Favicon для страницы. Указанные значения равнозначны.
	shortcut icon
type	image/x-icon	Атрибут должен содержать MIME-тип файла Favicon. Данные значение применяются для иконок формата ICO.
	image/vnd.microsoft.icon
	image/gif	Для фавиконок в формате GIF.
	image/jpeg	Для фавиконок в формате JPEG.
	image/png	Для фавиконок в формате PNG.
	image/bmp	Для фавиконок в формате BMP.
	image/svg	Для фавиконок в формате SVG.
	image/apng	Для Favicon формата APNG.
href	[относительный URL]	Например: /favicon.ico
	[абсолютный URL]	Например: http://site.net/favicon.ico
	[Код base64]	Например: data:image/x-icon;base64,AAABAA…

Примеры подключения

Рассмотрим примеры указания на иконку сайта в HTML-коде.

HTML-тег для favicon.ico

Если иконка не подключена в HTML-коде, браузеры пытаются обнаружить её по следующему правилу:

<!-- равносильный HTML-код тега link для favicon.ico, размещенного в корне сайта: -->
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/x-icon" href="http://site.net/favicon.ico">
<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- данным указаниям браузеры следуют по умолчанию даже при их отсутствии в HTML-коде -->

В остальных случаях необходимо включать тег link для Favicon c соответствующими значениями атрибутов.

HTML-тег для Favicon других форматов

Для подключения фавиконки в формате, отличном от ICO, указывайте соответствующий MIME-тип фавиконки в атрибуте type. Например:

<!-- HTML-код для иконки в PNG-формате: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/favicon.png">

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

HTML-тег для Favicon вне корневого каталога

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

<!-- HTML-код для фавиконки, расположенной не в корневой папке: -->
<link rel="shortcut icon" type="image/png" href="http://site.net/template/favicon.png">

Такой код HTML-тега link целесообразно применять на отдельных страницах сайта со своими уникальными (отличными от главной иконки сайта) фавиконками.

Отдельные страницы сайта могут иметь свою фавиконку, доступную по указанным в HTML-коде URL-адресам.

HTML-тег для фавиконок с нестандартным названием

Для подключения иконки сайта, имеющей название, отличное от favicon, не забудьте указать это в атрибуте href. Например:

<!-- HTML-код для иконки с нестандартным названием файла: -->
<link rel="shortcut icon" type="image/x-icon" href="http://site.net/ikonka.ico">

Во избежание возможных проблем с отображением используйте фавиконки с именем favicon.

HTML-тег для фавиконок в base64

Чтобы не подключать файл фавиконки к веб-странице, можно вставить в атрибут href тега link код Base64:

<!-- HTML-код для иконки в base64 -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAI1nsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREQAAABERERERAAAAEREREBEAAAARARAAEQAAABEBEAARAAAAEQEQABEAAAARARAAEQAAABEBERERAAAAEQEREREAAAARAREQAAAAABEBERAAAAAAEQEREAAAAAARAREQAAAAABEBERARAAAAEQEREREAAAAREREREQAAABEREEIAAABCAAACTkAADk5AAA5OQAAOTkAADk5AAABCQAAAQkAAA85AAAPOQAADzkAAA85AAAJOQAAAQgAAAEIAAA">

Такой способ HTML-подключения Favicon работает во всех браузерах, кроме Internet Explorer. Чтобы получить код изображения, воспользуйтесь любым декодером Base64.

БЕСПЛАТНЫЙ генератор иконок для сайтов — выберите иконку из галереи или воспользуйтесь своей

Что такое фавикон (favicon)?

Термин “favicons” является сложением слов “favorite icon”; это основная иконка веб-сайта. Обычно это очень маленькая по размеру иконка (16×16 или 32×32), которая отображается рядом с URL-адресом вашего веб-сайта во вкладках и закладках веб-браузера. Благодаря этой иконке пользователям проще узнать ваш веб-сайт, если они открывают его из закладок.

Почему стоит использовать генератор фавикон?

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

Как загрузить фавикон на свой веб-сайт?

Если вы хотите вручную вставить код своей иконки, нужно будет загрузить на сайт этот файл. Чтобы проверить, правильно ли завершился процесс, введите строку http://websitename.com/favicon.png в веб-браузер. 

Вам нужно будет добавить этот HTML-код для загрузки фавикона в хедер страниц и на главную страницу индексов вашего веб-сайта:

 <link rel=”shortcut icon” href=”http://example.com/favicon.png” />

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

Будет ли фавикон отображаться во всех веб-браузерах?

Простой ответ на этот вопрос – да. Более старые браузеры типа Internet Explorer работали с форматом файлов ICO, но теперь все браузеры поддерживают файлы PNG, включая Firefox, Chrome и Safari.

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

Статус этого документа

Проект в разработке; может кардинально измениться в любой момент.

Значок — это графический изображение (значок), связанное с определенной веб-страницей и / или веб- сайт. Многие недавние пользовательские агенты (например, графические браузеры и программы чтения новостей) отображают их как визуальное напоминание о веб-сайте идентичность в адресной строке или во вкладках. Википедия включает статья о favicons [FAVICON-WIKIPEDIA].

Чтобы добавить значок на свой веб-сайт, вам понадобится как изображение, так и для указания того, что изображение будет использоваться в качестве значка. Этот документ объясняет метод, предпочитаемый W3C для указания значок. Существует еще один распространенный метод, который проиллюстрирован ниже. с объяснением того, почему этот метод несовместим с некоторыми принципы веб-архитектуры. Оба метода применимы только к HTML и XHTML, одно из обсуждаемых ограничений ниже.

В этом документе не обсуждается подробно, как создать значок. изображение.Однако формат изображения, который вы выбрали, должен быть 16×16. пикселей или 32×32 пикселя, используя 8-битные или 24-битные цвета. В формат изображения должен быть одним из PNG ( Стандарт W3C), GIF или ICO.

Метод 1 (предпочтительный): использование значения атрибута

Первый подход к указанию значка — использовать rel значение атрибута «icon» и определить, что это значение означает через профиль; профили обсуждаются более подробно ниже.В этом примере HTML 4.01 значок, идентифицированный через URI http://example.com/myicon.png как значок:

  

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]
  

XHTML 1.0 выглядит очень похоже:

   w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 profile = "http://www.w3.org/2005/10/profile" >
   
[…]

[…]
  

Метод 2 (не рекомендуется): размещение значка по заранее определенному URI

Второй метод указания значка основан на использовании предопределенный URI для идентификации изображения: «/ favicon», относящийся к корень сервера.Этот метод работает, потому что некоторые браузеры были запрограммирован на поиск значков с использованием этого URI. Такой подход несовместимы с некоторыми принципами веб-архитектуры и в настоящее время обсуждается группой технической архитектуры W3C (TAG) как их сайт проблемы Data-36. Подводя итог проблемы: веб-архитектура разрешает администраторам сайтов для управления своим пространством URI (для данного доменного имени), как они видят поместиться. Соглашения, которые не представляют собой согласия сообщества и которые уменьшить параметры, доступные менеджеру сайта, не масштабируются и могут привести к конфликту (так как нет общеизвестного списка этих предопределенные URI).Одно практическое соображение иллюстрирует проблему: у многих пользователей есть веб-сайты, хотя у них нет собственных доменное имя. Эти пользователи не могут указывать значки, используя второй метод, если они не могут писать в корень сервера. Однако они могут использовать метод один для указания значка, поскольку он более гибкий и не запретить менеджеру сайта использовать один значок в одном месте на сайте.

Есть несколько других хорошо известных посягательств на пространство URI, в том числе «robots.txt «и расположение конфиденциальной информации P3P. политика. Группа технической архитектуры изучает альтернативы которые не вторгаются в пространство URI без лицензии.

Использование профилей для определения терминов, таких как «значок»

Грубо говоря, профиль — это определение набора термины. В идеале профиль включает в себя как машиночитаемую информацию и удобочитаемую информацию. В HTML 4.01 и XHTML 1.0 несколько атрибуты, такие как атрибут rel , не имеют предопределенного набора значения.Вместо этого автор может предоставить значения в соответствии с потребностями и затем используйте профиль, чтобы объяснить, что означают значения. В нашем случае мы рекомендуют авторам использовать значение «icon» и профиль, который объясняет, что «когда мы говорим« значок », мы имеем в виду« это значок »».

В методе 1 выше мы используем атрибут rel с СВЯЗЬ элемент и выберите профиль с атрибутом profile на элементе HEAD.

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

Ограничения

Есть несколько ограничений для описанных выше подходов, включая предпочтительный метод (поэтому TAG продолжает работать по вопросу):

• Подходы работают только в HTML или XHTML
• Предпочтительный подход связывает значок с HTML-документом, не набор документов (т.е. сайт)
• Предлагаемый профиль для определения значения «значка» не является признанный стандарт, что означает, что могут возникнуть проблемы с совместимостью на практике.
• Нет стандарта (по крайней мере, определено HTML 4.01) для машиночитаемых профилей, которые позволить браузеру знать, что «это означает, что изображение является значком». Таким образом, браузер должен быть запрограммирован заранее, чтобы распознавать этот конкретный значение отн. . Для получения дополнительной информации об использовании профилей в HTML и XHTML см. GRDDL [GRDDL].

Список литературы

FAVICON-WIKIPEDIA

Favicon , Википедия, доступно на http: // ru.wikipedia.org/wiki/Favicon.

ГРДДЛ

Собирать Ресурсные описания диалектов языков , D. Хазаэль-Массиё, Д. Коннолли, редакторы, материалы, представленные командой W3C, 16 мая 2005 г., http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/. Последняя версия доступно по адресу http://www.w3.org/TeamSubmission/grddl/.

HTML401

HTML 4.01 Спецификация , Д. Рэггетт, А. Ле Хорс, И. Якобс, Редакторы, Рекомендация W3C, 24 декабря 1999 г., http: // www.w3.org/TR/1999/REC-html401-19991224. Последняя версия доступно по адресу http://www.w3.org/TR/html401.

СИТЕДАТА-36

Улучшение метаданных веб-сайта в robots.txt, w3c / p3p и favicon и т. д. , TAG, доступно по адресу http://www.w3.org/2001/tag/issues.html#siteData-36.

XHTML1

XHTML ™ 1.0 The Расширяемый язык разметки гипертекста (второе издание) , S. Пембертон, редактор, Рекомендация W3C, 1 августа 2002 г., http: // www.w3.org/TR/2002/REC-xhtml1-20020801. Последний версия доступна по адресу http://www.w3.org/TR/xhtml1.

Благодарности

Следующие участники QA Interest Group и сотрудники W3C имеют внесли значительный вклад в содержание этого документа: Доминик Хазаэль-Массье (W3C), Крис Лилли (W3C) и Оливье Теро (W3C).

Руководств — favicon.io

Используйте это руководство, если у вас есть значок в формате PNG. PNG отформатированный значок заканчивается на.PNG расширение файла Если у тебя есть использование значка в формате ICO этот учебник вместо.

Шаг 1. Назовите свой Favicon

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

Шаг 2. Загрузите свой Favicon

Хотя это и не обязательно, мы рекомендуем вам загрузить свой значок в основной или корневой каталог вашего сайта.Файл должен быть доступный на yourwebsite.com/favicon.ico . Если вы хотите использовать пользовательское местоположение, затем перейдите к этому расширенному руководству.

Шаг 3. Ссылка на ваш Favicon

Вам нужно будет сообщить веб-браузеру, где находится ваш значок. Это требует размещения ссылка тег внутри тега head вашего Веб-сайт. Пример тега ссылки показан ниже.Ты сможешь необходимо заменить значение атрибута href с местоположением вашего значка в формате PNG. <ссылка rel = "icon" href = "http://www.yourwebsite.com/favicon.png">

Шаг 4. Тестирование

После того, как вы загрузили значок, вы сможете проверить эта установка работала при просмотре значка на вкладке браузер. Добавьте свою веб-страницу в закладки, чтобы убедиться, что значок также отображается на панели закладок.

Шаг 5. Отладка

Почему не отображается мой значок?

Скорее всего, ваш значок неправильно назван или был установлен в неправильный каталог. Убедитесь, что ваш значок доступный на yourwebsite.com/favicon.ico

Почему не отображается последняя версия?

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

favicon.png vs favicon.ico — почему я должен использовать PNG вместо ICO?

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил 11 лет, 7 мес назад

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

Помимо того факта, что PNG является более распространенным форматом изображений, есть ли какие-либо технические причины для предпочтения favicon.png против favicon.ico?

Я поддерживаю современные браузеры, которые поддерживают избранные значки PNG.

13.6k1616 золотых знаков8383 серебряных знака128128 бронзовых знаков

Создан 27 авг.

2,151 11 золотой знак1120 серебряных знаков192192 бронзовых знака

Ответ заменен (и превратился в вики сообщества) из-за многочисленных обновлений и заметок от других в этой ветке:

• ICO и PNG допускают полную прозрачность на основе альфа-канала
• ICO обеспечивает обратную совместимость со старыми браузерами (например,грамм. IE6)
• PNG, вероятно, имеет более широкую поддержку инструментов для прозрачности, но вы также можете найти инструменты для создания ICO с альфа-каналом, такие как инструмент Dynamic Drive и плагин Photoshop, упомянутые @mercator.

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

Все современные браузеры (протестированные с Chrome 4, Firefox 3.5, IE8, Opera 10 и Safari 4) всегда будут запрашивать значок .ico , если вы не указали ярлык через . Поэтому, если вы не указываете его явно, лучше всегда иметь файл favicon.ico , чтобы избежать 404. Yahoo! предлагает сделать его маленьким и кешируемым.

И вам не обязательно выбирать PNG только для альфа-прозрачности. Файлы ICO прекрасно поддерживают альфа-прозрачность (т.е. 32-битный цвет), хотя вряд ли какие-либо инструменты позволяют их создавать. Я регулярно использую FavIcon Generator от Dynamic Drive для создания значка .ico файлы с альфа-прозрачностью. Это единственный известный мне онлайн-инструмент, который может это сделать.

Существует также бесплатный плагин Photoshop, который может их создавать.