Какой размер у фавикон

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

Это фавикон

Если дословно перевести этот термин, то получится «любимое изображение». Это слово происходит от совмещения двух английских слов favorites, что значит избранный, и icon, то есть изображение или иконка.

«>

Место размещения фавиконов – адресная строка веб-ресурса на вкладке браузера или список избранных закладок. В некоторых поисковых системах фавиконы располагаются возле ресурсов на страницах поиска. Например, в «Яндексе». Стоит также отметить, что алгоритмы поиска этой системы при поисковой выдаче сначала отдают предпочтение ресурсам, у которых есть иконка сайта.

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

Со страниц истории

Впервые такое понятие как «фавикон» появилось в 1999 году. Тогда компания «Майкрософт» выпустила новую версию браузера Explorer. В этом обновленном варианте Internet Explorer -5 стало возможным использовать фавикон. Для этого нужно было загрузить изображение с расширением .ico в основную папку сайта.

Загруженная картинка должна была иметь формат http://«название сайта» /favicon.ico. Лишь в таком случае браузер мог использовать соответствующего размера фавикон в списке закладок и возле адресной строки сайта, что расположен в закладках. Но это уже давно устаревшая техника, сейчас иконка сайта поддерживается на сайтах и без закладок. Кроме того, доступны разные форматы избранных изображений. Теперь можно использовать не только картинку с расширением .ico, подойдут также .jpg, .png, .gif и .jpeg форматы.

Особенности форматов

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

«>

Самые распространенные форматы на сегодня это .png и .ico:

• .ico— этот формат превосходно подходит для Windows. Картинки с таким расширением имеют разное разрешение и глубину цвета. То есть, битовую глубину, что характеризирует информацию о цвете для каждого пикселя и делает изображение более точным. Для браузера Internet Explorer это отличное решение, так как здесь могут использоваться фавиконы разных размеров.
• .png — файлы этого расширения более удобны в использовании. Это объясняется тем, что для создания иконки сайта не нужно никаких дополнительных инструментов. Более того, форматом поддерживается маска-канал, с помощью которой можно создать картинку самого маленького размера без потери качества изображения. Единственное, чем этот формат уступает предыдущему – невозможность отображения фавикона в Internet Explorer.

Другие расширения

Что касается остальных форматов, то у каждого есть как свои преимущества, так и недостатки. Все они проявляются в зависимости от того, в каком браузере отображаются. К примеру, картинки формата .gif не совместимы со старыми браузерами. Картинкам .jpg недостает качества и четкости изображения, однако здесь плавные переходы между цветами. Отличным качеством изображения обладают фавиконы формата .svg, вот только они доступны лишь в браузере Opera.

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

«>

Размер имеет значение

В классическом варианте размер иконки составляет приблизительно 16ˣ16 пикселей. По крайней мере, так было до недавнего времени. Но с развитием технологий размер фавикона стал увеличиваться. Сейчас максимальный размер иконки составляет 64х64 пикселя. Такая динамика расширения избранного изображения спровоцирована желанием (и, соответственно, возможностью) пользователей сохранять ярлыки сайтов в соответствующих папках или на рабочем столе, чтобы иметь быстрый доступ.

На сегодняшний день существует 5 размеров фавикона:

• 16х16;
• 24х24;
• 32х32;
• 48х48;
• 64х64;

«>

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

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

Чтобы установить фавикон на сайт, нужно всего лишь следовать несложному алгоритму:

1. Во-первых, необходимо создать фавикон. Этот процесс не должен доставить неудобств. Для начала нужно выбрать изображение, которое будет позиционировать сайт, а потом отредактировать его при помощи специального сервера, который автоматически подгоняет картинку под стандартный размер фавикона.
2. Во-вторых, нужно полученный материал загрузить в корневую папку сайта.
3. И в-третьих, вписать в тег <head> такой код:

«>

Чтобы имидж не испортить

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

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

«>

Основная задача фавикона: изображать ключевую тематику ресурса. Но никто не запрещает применять для этого всю свою креативность. К примеру, если сайт занимается продажей бытовой техники, то можно, конечно, в качестве фавикона использовать изображение стиральной машинки или холодильника. Но чем тогда ресурс будет отличаться от сотен подобных ему, и чем он тогда запомнится? Что если попробовать поэкспериментировать и с названием проекта? Например, «Яндекс» уже давно стал, узнаваем благодаря алой букве «Я». Это и есть главная особенность фавикона, как бренда – врезаться в память пользователя и характеризировать конкретный сайт, выделяя его из сотен других.

Программы для создания фавиконов

Сегодня каждый веб-мастер может воспользоваться специальными сервисами для создания фавиконов. К тому же, существуют объемные галереи, из которых можно выбрать готовую иконку сайта, сделанную на профессиональном уровне. Среди создателей сайтов особой популярностью пользуется галерея IconJ. Она является не только каталогом, но и генератором. Желающие могут выбрать иконку для своего ресурса из каталога, в котором находится более 18000 картинок или же создать свой авторский фавикон.

«>

На пространстве Рунета популярной является база фавиконов от рекламного агентства «Веб Аудит». Что касается иностранных ресурсов, то лучшим вариантом для создания и выбора иконки сайта считают Favicon.cc. Здесь можно воспользоваться специальными функциями, чтобы настроить цветовую гамму, обрезать картинку или наложить дополнительные слои.

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

www.syl.ru

Что такоe favicon для сайта?

Он прeдставляeт собой нeбольшую картинку, которая будeт отображаться во вкладкe браузeра. Размeр favicon составляeт 16×16 пиксeлeй. Такжe эта картинка отображаeтся в рeзультатах выдачи поисковых систeм, и eсли favicon на сайтe будeт отсутствовать, то рядом с сайтом в выдачe будeт пусто. Стоит отмeтить, что фавикон помогаeт пользоватeлю отыскать конкрeтно ваш сайт срeди сотни других, поэтому eго присутствиe на сайтe хоть и нe являeтся обязатeльным, но строго рeкомeндовано. И да, размeр favicon нe обязатeльно должeн быть 16×16. Нeкоторыe вeбмастeра дeлают фавикон размeром 32×32 и дажe 64×64. Но в своих рeкомeндациях поисковыe систeмы Google и «Яндeкс» пишут, что идeальный размeр favicon — 16×16. Поэтому лучшe слeдовать этим совeтам поисковых систeм.

Как создать favicon?

Есть нeсколько разных способов создания этой картинки. Самый пeрвый и простой способ создать favicon — украсть eго, напримeр, из англоязычного сайта.

Допустим, вы создали блог по бытовой тeхникe и полностью настроили eго, но остался послeдний штрих — фавикон. Пишитe в поискe Google запрос appliances и смотритe пeрвыe 10 сайтов. Фавиконы этих сайтов идeально подойдут вашeму новому блогу. Если какая-нибудь картинка вам понравилась, открывайтe исходный код страницы и ищитe запись favicon.ico. Там будeт указан адрeс расположeниях фавикона. Откройтe eго и скачайтe на компьютер, затeм загрузитe на сайт и подключитe (о подключeнии нижe).

Второй способ создания favicon размeром 16×16 пиксeлeй — использовать спeциальный сeрвис гeнeрации фавиконов. Он работаeт по слeдующeму принципу: вы загружаeтe изображeниe (любого размeра и расширeния), котороe подходит для титульной иконки сайта, и нажимаeтe на кнопку на кнопку Create Favicon. Чeрeз сeкунду получаeтe готовый фавикон, который можно скачать, загрузить на свой сайт и подключить. Самый популярный сeрвис — Favicon Generator.

Отмeтим, что данный сeрвис лишь нeмного упрощаeт процeсс создания иконок. То жe самоe можно сдeлать и самому. Просто найдитe картинку, которая вам подходит, измeнитe ee размeр до 16×16 пиксeлeй и сохранитe с расширeниeм ico. Всe это продeлываeтся в тeчeниe одной минуты в программe Paint.

Есть и другиe онлайн сeрвисы поиска фавиконов. Там нужно написать ключeвоe слово, и послe этого сeрвис отобразит различныe тeматичeскиe иконки нeобходимого размeра. В принципe, этот способ тожe прeдполагаeт воровство, как и пeрвый. Но ничeго страшного в этом нeт.

Подключeниe

Чтобы картинка отображалась в браузeрe во вкладкe и в выдачe поисковых систeм, нeобходимо ee правильно подключить. Для этого файл должeн имeть названиe favicon.ico и располагаться в корнeвом каталогe, то eсть там, гдe лeжат основныe файлы сайта.

Чащe всeго этих дeйствий достаточно для отображeния фавиконов. Поисковыe систeмы (напримeр, «Яндeкс») автоматичeски распознают наличиe фавикона в корнeвом каталогe и используют eго в своeй выдачe. Однако с «Яндeксом» иногда бывают нeдоразумeния. Многиe вeбмастeра жалуются, что фавиконки пропадают из индeкса, а затeм появляются заново. Чтобы этого нe происходило, нужно подключить eго.

Для подключeния favicon «Яндeкс» рeкомeндуeт использовать мeтатeг <link> с указаниeм конкрeтных атрибутов. Этот тeг нужно помeстить в раздeл сайта <head>.

Вeсь код подключeния должeн имeть слeдующий вид:

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>

Этот код работаeт для поисковых систeм и всeх браузeров. Могут быть проблeмы с отображeниeм в браузeрe Internet Explorer, но во всeх остальных браузeрах отображeниe будeт точным.

Обратитe вниманиe на адрeс расположeния изображeния /favicon.ico. Его можно сдeлать таким: /favicon.gif. Тогда нeобходимо в корeнь сайта помeстить изображeниe с расширeниeм .gif, иначe отображаться фавикон нe будeт. Как извeстно, картинки в форматe .gif могут прeдставлять собой слайдeры. Этим пользуются вeбмастeры и дeлают при этом анимированныe фавиконы для своих сайтов. Выглядит это интeрeсно, но нe болee того.

Фавикон как инструмeнт продвижeния сайта

Учитывая тот факт, что данная иконка будeт отображаться в рeзультатах поиска «Яндeкса», использовать ee крайнe жeлатeльно. Это один из основных инструмeнтов увeличeния кликабeльности, вeдь пользоватeли, скорee всeго, будут кликать на сайт, возлe которого стоит привлeкатeльноe изображeниe, а нe пустоe мeсто.

Поэтому важно нe просто использовать любой фавикон, а красивую иконку, на которую пользоватeлям хочeтся кликнуть. Такжe ee стоит замeнять в зависимости от ситуации. Напримeр, в прeддвeрии Нового Года жeлатeльно сдeлать свой фавикон новогодним, что обeспeчит лучшую кликабeльность.

Как поисковик «Яндeкс» понимаeт фавиконки?

У поисковой систeмы eсть спeциальный робот, который отвeчаeт за обновлeниe имeнно фавиконов. Этот робот по опрeдeлeнному расписанию посeщаeт сайты, запрашивая главную страницу и ищeт в кодe путь с указаниeм расположeния favicon.ico. Если этот путь он нe находит, то пытаeтся загрузить иконку с родитeльского каталога, поэтому чащe всeго достаточно просто файл с названиeм favicon.ico помeстить в родитeльский каталог. Затeм получeнная иконка загружаeтся на сeрвeр «Яндeкса» и отображаeтся в поискe. Если ee размeр будeт большe, то он прeдваритeльно прeобразуeтся в 16х16, а расширeниe мeняeтся на png. Робот пeриодичeски пeрeпровeряeт сайты на прeдмeт измeнeния фавиконки. Обычно он посeщаeт обновляeмыe сайты один раз в мeсяц. Это и видно экспeримeнтальным путeм: измeнитe фавикон своeго сайта, и приблизитeльно чeрeз мeсяц он появится в индeксах поисковика «Яндeкс».

Конфликт иконок

Стоит отмeтить, что иногда вeбмастeра сталкиваются с конфликтом фавиконов, из-за чeго в индeксe появляeтся то одна, то другая иконка. Такоe возможно, eсли в родитeльский каталог загрузить одно изображeниe, а в шаблонe кода страницы указать путь к другому фавикону. Поэтому слeдитe за тeм, чтобы у вас нe было конфликта мeжду адрeсами фавиконок.

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

xroom.su

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

 <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png"> <link rel="shortcut icon" href="favicon.ico"> 

Для сайта на CMS WordPress это может выглядеть так:

 <link rel="apple-touch-icon" sizes="180x180" href="<?php bloginfo('template_directory'); ?>/images/favicon/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon-32x32.png"> <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon.ico"> 

1. apple-touch-icon-180x180.png — сразу для всех современных гаджетов и больших экранов, эту иконку будет использовать и iOs, и Android
2. Для обычных браузеров, favicon-32x32.png — средних размеров, можно и больше, но устройства, которые могут использовать большего размера фавикон, возьмут первый вариант apple-touch-icon-180x180.png
3. Все же еще где-то используют IE9 и младше, поэтому приходится использовать такой устаревший формат как favicon.ico, по идее, можно сделать размер и 32х32, но оставим 100% поддерживаемый 16х16.

До этого я использовал такие фавиконки:

 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> 

Но все эти иконки успешно должна заменить одна apple-touch-icon-180x180.png.

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

На iPhone старых версий размер 180х180 просто сожмется до нужных пропорций.

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

 <link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="favicon-194x194.png" sizes="194x194"> <link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192"> <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16"> <link rel="manifest" href="manifest.json"> <meta name="apple-mobile-web-app-title" content="JoJo Productions"> <meta name="application-name" content="JoJo Productions"> <meta name="msapplication-TileColor" content="#00aba9"> <meta name="msapplication-TileImage" content="mstile-144x144.png"> <meta name="msapplication-config" content="browserconfig.xml"> <meta name="theme-color" content="#555555"> <link rel="shortcut icon" href="favicon.ico"> 

Но самый первый вариант с тремя фавиконами успешно заменяет кучу этих иконок.

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

denis-creative.com

Иконка сайта

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

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

Предназначение фавикона

Итак, картинка возле заголовка сайта служит для идентификации. Это ее первоначальное предназначение: выразить сайт, назание которого мы видим, и выделить его в глазах остальных. Делается это максимально просто за счет использования графики: мы интуитивно воспринимаем информацию в картинках гораздо быстрее и легче, чем в текстовом формате. Фавиконы способствуют нам в этом. Но не стоит забывать, что размер фавикона минимален в глазах пользователя. Это не логотип в “шапке” сайта, который может содержать дополнительные сведения в виде надписей, каких-то уточнений или контактной информации. Все, что может быть изображено в иконке возле названия, должно максимально подходить под размер фавикона. А он, как уже было обозначено, просто миниатюрный (всего 16 на 16 пикселей).

Как подобрать фавикон?

Так каким же образом вебмастер может разработать иконку для своего сайта? Следует заметить, что просто сжать логотип сайта, чаще всего, не получится. На эмблемах, которые ставят в виде лого того или иного ресурса, зачастую видны разные элементы, которые не всегда будут корректно отображаться в миниатюрном виде. Лучше сразу же отказаться от такой затеи.

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

Многие используют в виде фавикона стилизованную первую букву названия сервиса. Так поступают, например, Bing, Yahoo, Yandex, Wikipedia, Google. Есть и другой подход — если у вас короткое имя сайта, можете установить его в качестве фона своей иконки. Чтобы размер фавикона (в пикселях он достигает, повторю, 16 на 16 точек) позволял корректно показывать эту надпись, она должна быть не длиннее 3 букв. Так поступает, например, сервис Aol.

Как создать фавикон?

Сделать иконку для названия сайта можно несколькими способами. Конечно же, самый простой — это работа с разными готовыми решениями. Речь может идти о каких-нибудь сервисах или программах, которые позволяют из полноценного изображения сделать иконку путем уменьшения его. Однако, я бы рекомендовал заняться разработкой такого логотипа собственными силами. Это, во-первых, даст возможность чему-то научиться; а во-вторых, предоставит большее количество инструментов. Все, что вам нужно будет уметь для этого -что рисовать, а также знать, какого размера фавикон должен быть в конечном варианте. О размере иконки для сайта мы поговорим чуть позже, а пока отметим некоторые тонкости работы с такими изображениями. В частности, не упоминая размер фавикона для сайта, следует уточнить формат такого изображения. Как отмечают опытные дизайнеры, картинка должна быть сохранена в виде.PNG (24-битном), либо же как файл.ICO.

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

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

Итак, теперь поговорим о том, насколько большой должна быть картинка, которую мы видим рядом с названием сайта в поисковой выдаче. По умолчанию, как уже говорилось, ее размер составляет всего 16 пикселей (по каждой из сторон). Однако если вы попробуете редактировать это изображение в “Фотошопе”, сами убедитесь в том, насколько это неудобно. Поэтому рекомендуем работать с увеличенной картинкой, которую в дальнейшем можно будет просто сжать по краям и сохранить в требуемом формате.

Мультиплатформенность

Однако говоря о том, какого размера фавикон должен быть на вашем сайте, нужно помнить еще одну вещь. Не все платформы отображают картинку ресурса одинаково. Например, устройства с Retina-дисплеем “видят” ваш фавикон в размере 32 на 32 пикселя. А в Safari и на новой платформе Windows, и вовсе, эти иконки достигают размера 64 пикселей.

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

Посторонние редакторы

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

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

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

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

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

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

Установить код следует в шапку сайта.

Выводы

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

Поэтому смело экспериментируйте, придумывайте что-то новое, старайтесь — и все получится!

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

Начну с определения, вдруг кто не знает, favicon — это иконка, значок сайта (блога) или отдельной веб-страницы, которая отображается в адресной строке браузера, в закладках, в журнале, во вкладках и т.д. Стандартный, минимальный размер иконки 16×16, этот размер необходим для вышеуказанных мест, но есть пользователи, которые сохраняют адреса веб-страниц в виде ярлыков на рабочем столе или где-то в папках, в общем для таких целей предусмотрены размеры 24х24, 32х32, 48х48 и 64х64, все эти размеры включаются в один favicon.ico, но главное помнить, что размер файла от этого увеличивается, имею ввиду байты, что затрудняет загрузку сайта.

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

У яндекса для это есть специальный робот, который ищет на сайтах фавикон, мой фавикон находится здесь http://favicon.yandex.net/favicon/сайт, понимаете да, чтобы проверить свой фавикон, поменяйте адрес сайта на свой. Так вот если Вы сменили иконку, то на яндексе она сразу не появится, ну максимум через месяц.

Создать favicon можно с помощью настольных программ, например Favicon Create или Icon Cool Studio, последняя кстати очень мощная, но лучше использовать онлайн сервисы:).

Favicon генераторы

Favicon.ru

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

Сделать favicon.ico на этом сервисе можно указав путь к картинке на компьютере или в интернете, для создания ярлыков можно включить два дополнительных размера 32х32 и 48х48, также на favicon.ru можно обрезать картинку, в случае если размеры её не пропорциональны.

У меня была готовая картинка 50×50 пикселей, её я и закинул. После сервис показал мне как будет выглядеть иконка, если всё в порядке, то можно её тут же скачать, но мне не понравилось:

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

Favicon.cc

В отличие от первого подопытного на favicon.cc нам сразу предлагают воспользоваться своим графическим редактором. В центре расположен холст, состоящий из 16 горизонтальных и вертикальных квадратиков, каждый квадрат — пиксель, получается холст 16х16, т.е. favicon.ico.

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

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

Рисовать иконку в графическом онлайн редакторе? Мазахизм, не мой метод, потому слева от холста в основном меню кликаю на пункт «Import image»:

Здесь всё довольно просто, указываем путь к изображению (нажатием кнопки «Обзор») и выбираем один из двух имеющихся вариантов обработки загружаемой картинки. Первый подходит к картинке с пропорциональными размерами всех сторон, моя 50х50, второй больше подходит к картинке с разными размерами, при этом варианте изображение сплюснет. Нажимаю кнопку «Upload» и вновь попадаю в редактор, но на холсте уже моя картинка, так сказать попиксельно. Если Вас устраивает конечный результат, можно скачивать иконку, мне не понравилась:

FavIcon from Pics

На очереди FavIcon from Pics, тупой такой, лёгкий до безобразия, ничего лишнего, но на нём я сделал свою фавиконку, которая сейчас стоит на pervushin.com, лучше чем здесь, мне не удалось сделать больше нигде. Самое удивительное, что из картинки которую загружаю (здесь тоже есть такая возможность) на сервис получается такая же шняга, как и у остальных, но этот сервис пошёл дальше, он делает favicon из аватарки твиттера! Кстати, если у кого нет твиттера, рекомендую завести, и

Здравствуйте! У вас еще до сих пор нет favicon для сайта? А она важна для продвижения вашего сайта, т.к. делает его запоминающимся и уникальным. Особенно, если Ваша favicon будет оригинальная, т.е. не стоит делать ее такой, как у конкурента. Итак, если Вы хотите узнать как сделать фавикон для сайта, следуйте простым инструкциям, изложенным ниже в данной статье.

Как выглядит favicon и что это такое

Favicon (сокр. от favorite icon) – это маленькая квадратная иконка, которая отображается на вкладке страницы рядом с ее заголовком и также в закладках браузера.

Создание favicon по шагам

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

Создаем изображение

Для начала изображение нужно найти с помощью поисковой системы, например, google-картинки. Картинка должна быть с квадратными пропорциями. Скачанное изображение можно будет отредактировать в любом графическом редакторе. Например, для этого может быть использован бесплатный онлайн-редактор pixlr .

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

Создаем файл favicon.ico, c помощью онлайн-генератора

Загружаем картинку на данный сайт . Изображение должно быть размером менее 50 кб. Нажимаем кнопку «Iconify». Дожидаемся, когда сервис сформирует иконку и скачиваем файл favicon.ico.

Загрузка favicon на сайт

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

Какого размера фавикон

Фавикон может быть размером 16×16, 32×32, 48×48 пикселей. В любом случае это квадрат. Какого размера фавикон выбрать решайте сами, расскажу лишь об отличиях между ними. Разница будет заключаться в качестве отображения и объеме файла. Фавикон размером 16×16 будет весить примерно 1 кб, 32×32 — 6 кб, 48×48 — 34 кб.

Поиск favicon в интернете

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

Если фавикон не отображается

Если у вас после этих действий все еще не отображается favicon, проверьте правильно ли Вы указали папку для копирования файла. Для этого наберите в браузере http://yoursite.ru/favicon.ico. В браузере должна отобразиться ваша иконка. Также может потребоваться обновить кэш браузера. Это можно сделать, нажав комбинацию клавиш Ctrl+F5.

Если не отображается favicon в Яндексе, не спешите сильно огорчаться.

Для того, чтобы favicon появился в Яндексе, должно пройти примерно 2 месяца .

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

С уважением, Евгений Кузьменко.

droidd.ru

Часть первая. Что такое фавикон?

Лучше всего на этот вопрос отвечает Википедия:

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса.

Вот пример отображения фавиконов в браузере Google Chrome:

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

Традиционно использовались изображения размера 16?16 пикселей формата ICO, помещённые в корень сайта под именем favicon.ico.

Все современные браузеры понимают явное указание положения значка в (X)HTML-коде (внутри элемента <head>), что позволяет при условии отсутствия /favicon.ico использовать для каждой страницы свой значок: <link rel=»icon» type=»image/png» href=»/someimage.png» />, где:

• rel может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
• href содержит абсолютный или относительный URI к файлу (в Mozilla Firefox 3.0, например, поддерживаются те же URI, что и с тегом img).
• Форматом файла может быть png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета (в Mozilla Firefox, например, может быть не только этот, но и как у тега img). При этом атрибут type должен содержать MIME-тип формата (например, image/png для PNG). Если для Internet Explorer используется формат ICO, то его MIME-тип должен быть image/vnd.microsoft.icon. Тип image/x-icon устарел в 2003 году после стандартизации типа для ICO.

Можно указать несколько изображений в разных форматах — например, строку с shortcut icon и значком в формате ICO для Internet Explorer, и строку с icon и значком в формате GIF или PNG для альтернативных браузеров.

Часть вторая. Каким должен быть фавикон?

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

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

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

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

4. Очень желательно делать фавиконы запоминающимися, поэтому будет лучше использовать знакомые пользователю образы, которые он может назвать каким-то словом (фавиконом ЖЖ, к примеру, является «Карандашик»).

www.yanajy.com

favicon.ico

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

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

ICO файл может содержать несколько изображений и Корпорация Майкрософт рекомендует размещать 16×16, 32×32 и 48×48 версии значка в favicon.ico. Например, IE будет использовать версию 16×16 для адресной строки, а 32×32 — для ярлыка панели задач.

Объявите значок с помощью:

<link rel="icon" href="/path/to/icons/favicon.ico"> 

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

Значки PNG

Современные настольные браузеры (IE11, последние версии Chrome, Firefox…) предпочитают использовать значки PNG. Обычно ожидаемые размеры 16×16, 32×32 и «как можно больше» . Например, MacOS/Safari использует значок 196×196, если он самый большой, который он может найти.

Каковы рекомендуемые размеры? Выберите свои любимые платформы:

• Большинство настольных браузеров: 16×16, 32×32, «как можно больше»
• Android Chrome: 192×192
• Google TV: 96×96
• … и другие, которые более или менее документированы.

Значки PNG объявляются с помощью:

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

Остерегайтесь: Firefox не поддерживает атрибут sizes и использует последний значок PNG, который он находит. Обязательно объявите 32×32-картинку последней: она достаточно хороша для Firefox, и это предотвратит ее загрузку большого изображения, которое не нужно.

Также обратите внимание, что Chrome не поддерживает атрибут sizes и имеет тенденцию загружать все объявленные значки. Лучше не объявлять слишком много значков.

Мобильные платформы

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

Apple определяет значок касания для платформы iOS. iOS не поддерживает значок без квадрата. Он просто перетаскивает изображения без квадратов, чтобы сделать их квадратными (ищите пример Kioskea).

Android Chrome использует значок Apple touch, а также определяет значок 192×192 PNG.

Microsoft определяет изображение плитки и browserconfig.xml.

Заключение

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

qaru.site

В каком формате сохранить favicon?

Все зависит от браузера. Для Microsoft Explorer подходит формат иконки ICO. C этим форматом мы уже сталкивались, когда делали курсор. Для остальных браузеров от Google Chrome до Apple Safari подойдет обычный GIF или PNG. Favicon может быть полупрозрачным. Для этого его нужно сохранить в полупрозрачный PNG, а далее преобразовать в формат ICO. Сделать это можно в неплохой программе IcoFX. Однако для генерации фавикона существует масса сторонних сайтов и самый очевидный из их www.favicon.ru

Как поместить favicon на сайт?

Как быть уверенным в том что favicon сработает? Нужно соблюсти 4 условия.

• Фаил должен называться — favicon.
• Размер фавикона 16 на 16 px
• Оптимальное место для фавикона — корневая папка сайта.
• Адрес иконки прописать в мета-тегах heder-а в индексе сайта.

В HTML выражении это выглядит так:

<head>

<link rel=»icon» type=»image/png» href=»/someimage.png» />

</head>

Можно создать несколько иконок для разных браузеров, например одну в формате ICO, а другую в PNG и все это указать через тег link. Современные браузеры чаще всего сами ищут в корневом сайта фаил под названием favicon, однако для уверенности не помешает указать и точные линки.

Создаем favicon в Фотошопе

Создать favicon очень просто. Хотите сделать такой же favicon как у Вконтакте или Однокласников? Хороший favicon не сделать, уменьшая большие картинки во всяких «генераторах» фавиконов, которых полным полно в интернете. Фавикон очень маленький. Фактически мы это своего рода пиксель-арт, который имеет свои особенности. Нельзя написать букву и просто уменьшить её до 16px.

Подобный favicon будет размыт и нечеток, так как края буквы при изменении размера будут заходить на несколько пикселей. Получится своего рода anti-alias, который обычно является добром, но в случае с пиксель-арт подобные переходы как раз не нужны. С другой стороны стоит избегать и излишней «ободранности» на округлостях иначе получится привет гифки 1999 год.

Создайте фаил размером 16 х 16px. Мы создадим очень простой полупрозрачный favicon с в виде буквы, с толикой глубины. Глубина будет создана за счет тени и градиента.

Рисуем фон

Почему в заставке этого урока вы видите огромный гладкий и вылизанный favicon? Потому что я его увеличил для заставки к уроку. Как у меня вышло качественно увеличить изображение 16px? Очень просто, я всегда работаю в векторе, если его возможно использовать и если в этом есть смысл. А вектор легко переносит любую трансформацию и не теряет в качестве.

Выберите инструмент Rounded Rectangle Tool. На панели настроек выберите режим Shape Layer, что позволит рисовать в векторе. В выпадающем меню панели галочка — Snap To Pixels. Это необходимо для того, чтобы векторные контуры привязывались к пикселям и не рисовали «между» ними.

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

Применим стили для поверхности faviconа. Подробнее о стилях можно почитать в статье Стили в Фотошопе. На панели слоев выберите нашу форму и выберите Layer > Layer Styles > Gradient Overlay В появившемся окне кликните по градиенткой полоске. Это вызовет Окно настройки градиента. Задайте градиент с цветами 0059c6 и 0085d1. Нажмите ОК. Остальные параметры на картинке ниже.

Рисуем букву

Буква «Н», которая изображена на фавиконе сайте хронофаг.ру слишком проста, чтобы впутывать в это дело шрифты, поэтому я просто нарисовал её инструментом Rectangle Tool. Но давайте сделаем нечто посложнее. Выберите инструмент Type Tool и поставьте любую буквы. Для нашего урока лучше всего подойдет буква без округлостей. Я выбрал шрифт и поставил букву H.

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

Сделайте вот что. На панели настроек шрифта отключите режимы растрирования — none. Теперь трансформируйте шрифт Edit > Free Transform Немного растяните его. Отлично.

Если в вашем случае получилась ерунда, а оно может произойти в случае с режимом растрирования none, так как отсутствие сглаживания порой искажает шрифт при маленьких размерах, сделайте вот что. Переведите букву в кривые Layer > Type > Convent to Layer Shape Воспользуйтесь инструментом Direct Selection Tool.

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

Надеюсь вы уловили смысл работы. Конечно нет никакого смысла тратить столько времени если ваша буква — две палочки и крестик. Но в случае буквы «В» или «D» эту работу стоит проделать с её ровными сторонами. Мы практически приблизились к созданию favicon-а.

Добавляем тень

Конец близок, осталось добавить стили для нарисованной буквы. На панели слоев выберите слой с буквой и зайдите в Layer > Layer Styles > Drop Shadow Мне нужна легкая тень с Opasity 50% и очень четкими краями Distance 1, Spread 0, Size 2

Сохранение favicon

Чтобы сохранить полупрозрачный фавикон откройте File > Save for Web & Devices В появившемся диалоговом окне выберите PNG-24 и галочку на Transparensy. Это сделает наш фавикон полупрозначным. Осталось поместить иконку на сайт вышеперечисленными способами, или преобразовать её в формат ICO. Favicon создан.

Скачать файл:

Скачать исходники

hronofag.ru

Что такое favicon?

Favicon (англ. Favorite Icon) — это небольшая иконка (изображение, картинка) в специальном формате, которая отображается в адресной строке браузера при просмотре сайта, вкладке браузера или в его закладках (“Избранном”).

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

Зачем нужен favicon для сайта?

favicon – товарный знак Вашего сайта. У многих компаний на сегодняшний день есть отличительный favicon значок, который выделяет их среди конкурентов. Чтобы иконка лучше запоминалась пользователями, компаниям следует отображать в ней свой логотип, который также должен быть одним из эллементов шапки сайта. Ещё одна положительная особенность использования favicon в том, что при просмотре большого количества сайтов в браузере, Вы не видите заголовка страниц полностью, а видите только иконку и вы сразу с легкостью можете определить ту вкладку, куда Вы хотели перейти.

Что лучше изобразить на фавикон?

• Иконка должна соответствовать тематике сайта.
• бренд, если у Вас сайт связан с этим брендом. При этом для разных страниц можно отображать разные бренды;
• Применяйте фавикон, на который хочется кликнуть, это повысит кликабельность при просмотре в поиске Яндекса, Гугла;
• Сделайте несколько дизайнов фавиконок для различных разделов Вашего сайта.
• Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, :).

Разместите полученный файл в корне вашего сайта, там где находится основной индексный файл(index.php). Для указания браузеру местонахождения иконки сайта(favicon) в секции заголовка страницы (head) вставьте следующую строку:

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

Как сделать анимированный favicon?

Формат ICO не поддерживает анимацию. Но современные браузеры позволяют использовать формат GIF для миниатюр. Возможно указать для современных браузеров один анимированный файл(favicon.gif), а для древних, типа Intertet Explorer, другой(favicon.ico). Для этого в секцию head внесите следующие две строчки:

 <link rel="icon" type="image/png" href="/favicon.png" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> 

Естественно предварительно нужно поместить оба файла в корневую папку сайта.

Здесь можно сделать анимированнй gif.

Как быть, если запрещен показ изображений в браузере?

Если сделать favicon c внедренным изображением в код старницы:

 <link rel="icon" type="image/gif" href="data:image/gif;base64,R0l...куча_символов...gCADs=" /> 

То иконка будет показываться в браузере даже тогда, когда картинки будут отключены. Как сделать внедренное изображение описано здесь.

Как получить favicon с сайта

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

<? $url='http://htmlweb.ru'; $html=file_get_contents($url); if (preg_match('/<([^>]*)link([^>]*)(rel="icon"|rel="shortcut icon")([^>]*)>/iU', $html, $out)) {  $link_tag = $out[0];  if (preg_match('/href([s]*)=([s]*)"([^"]*)"/iU', $link_tag, $out))  {  $favicon = trim($out[3]);  if (strpos($favicon, '://')===false)  $favicon = $url. '/' . ltrim($favicon, '/');  } } ?>

Поисковые системы Google, Яндекс и favicon

Робот поисковых систем кешируют иконки сайтов. Закешированные иконки доступны по следующим запросам:

http://favicon.yandex.net/favicon/htmlweb.ru

http://www.google.com/s2/favicons?domain=htmlweb.ru

Кроме этого, Яндекс может сделать Вам «спрайт» из иконок разных сайтов:

http://favicon.yandex.net/favicon/google.com/yandex.ru/htmlweb.ru

Иконки для iPhone и iPad

<!-- For iPhone 4 Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon- 114x114-precomposed.png" /> <!-- For iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon- 72x72-precomposed.png" />

Даже если Вы не указываете link-ссылку на картинку iphone все равно будет искать в корневой папке сайта файл с именем apple-touch-icon.png и если найдет, то Возьмет из него картинку, закруглит по углам и на нее будет наложен блик автоматически самоим устройством. Для избежания этого вместо apple-touch-icon.png следует написать apple-touch-icon-precomposed.png владельцы айфонов и точей, т.к. для них мы делаем красивую иконюшку размером 57×57 (можно кстати и больше, но это стандартный размер иконки на ланч-скрине), подключая ее так:

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

Правильно опубликовать и объявить иконки для старых и новых Retina iPad:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

Как динамически менять favicon?

Если Вы попробуете поменять значение свойства тега через DOM, то Вы не пролучите желаемый результат. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:

// Ссылка на файл новой иконки  var icon='new_favicon.ico';  var head = document.getElementsByTagName('head')[0];   // Найти и удалить старую иконку из тега HEAD  var links = head.getElementsByTagName('link');  for (var i = 0; i < links.length; i++) {  var lnk = links[i];  if (lnk.rel=='shortcut icon') {  head.removeChild(lnk);  }  }   // Добавить новую иконку  var link = document.createElement('link');  link.setAttribute('href',icon);  link.setAttribute('type','image/x-icon');  link.setAttribute('rel','shortcut icon');  head.appendChild(link);

HTML5 и favicon

В HTML5 был добавлен атрибут sizes, позволяющий объявить несколько различных версии одной и той же иконки, и это могут быть PNG файлы:

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

Как объявить плитку для планшетов на Windows 8?

Объявление для Windows 8.0 выглядит как-то так:

<meta name="msapplication-TileColor" content="#2b5797"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 и IE 11 ожидают несколько версии изображения, объявленных в browserconfig.xml. Например:

Можно не объявлять, если имя файла не менять:

<meta name="msapplication-config" content="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>#2b5797</TileColor>  </tile>  </msapplication> </browserconfig>

htmlweb.ru