Иконки и favicon.ico для сайта в несколько кликов (+ конкурс)

Издревле повелось, что нормальный сайт должен иметь favicon. Сейчас у человеков множество различных девайсов, посему придумали еще кучку иконок, чтобы на девайсах этих тоже были красивые фавиконы. В итоге приходится нарезать как минимум 4 квадратика разных размеров. В попытках сэкономить время хотя бы на этом я написал простенький action для Photoshop. Он конечно не избавит верстальщика от всей работы, но сократит ее как минимум в двое. Итак, погнали.

Готовим код

Иконки будем делать следующих размеров:
512х512 — большая иконка на всякий случай
256х256 — аналогично верхнему варианту, пусть будет
200х200 — иконка для Speed deal (например, для Оперы)
114х114 — она же touch-icon-iphone4.png, телефон 4 от фирмы, которая занимается яблоками, подхватит эту иконку
72х72 — apple-touch-icon-ipad.png — ну вы поняли, да?
64х64 — размер иконок на десктопе, вдруг пригодится )
57х57 — apple-touch-icon.png — первые модели айфонов, эти же иконки подхватывает андроид
48х48 — тот самый favicon, который обычно делают 16х16, рекомендуется перевести в формат .ico

Если кто-то не знает почему именно такие размеры, но очень хочет узнать:
iOS Developer Library
Dev.Opera
Favicon Generator — а этим инструментом я перевожу png в ico.

Режем иконки

Для начала вам придется подготовить увеличенную копию иконки, размер документа 512х512, этот же размер сразу будет сохранен в виде иконки после старта экшна. Я для примера взял произвольную букву t в квадратике.

Качаем action, загружаем его в фотошоп и запускаем. Наглядно каждый шаг показан в видео (лучше сразу в HD):

Прописываем иконки на странице

<head>
	<link rel="icon" href="./ico-200x200.png" type="image/png">
	<link rel="apple-touch-icon" href="./apple-touch-icon.png" type="image/png">
	<link rel="apple-touch-icon" sizes="72x72" href="./apple-touch-icon-ipad.png" type="image/png">
	<link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon-iphone4.png" type="image/png">
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>

Вот в общем то и всё, надеюсь action поможет вам экономить 5 минут в каждом новом проекте.

Пожалуй продолжу своё начинание с безобидными конкурсами, уже разыгрывался плеер и стакан-череп. Через несколько дней у нас намечается пасха, поэтому победитель конкурса получит ЯЙЦО с таймером 🙂

Яйцо достанется тому, кто максимально восполнит пробелы в статье, уверен, что они есть. Итоги поведем 15 апреля. Успехов и скорости в верстке! 😉

UPD: В очередной раз мои поздравления Alekkson, яйцо достается именно ему!

Размещено в HTML, photoshop.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Alekkson

    Пока предлагаю дополнить статью ссылкой на не большой plugin, для PhotoShop-а «ICO (Windows Icon) Format»:
    http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat 
    Не сложно догадаться из названия, что с его помощью можно сохранять изображения в формат .ico, прямо из PhotoShop-а.

    • Ух ты, не знал, обязательно попробую!
      Это заявка на победу 😉

    • Ну поздравляю победителя, приз вышел в пункт назначения )

      • Alekkson

        Спасибо! Тоже из Китая? И кстати, с какого сайта заказываешь, если не секрет? ))

        • У картинки ссылка на товар )
          Вот где покупаю: https://www.facebook.com/techmeat/posts/408587789154086
          Кстати, через несколько минут новый пост, опять с конкурсом 🙂

  • Alekkson

    «48х48 – тот самый favicon, который обычно делают 16х16, рекомендуется перевести в формат .ico»
    А чем объясняется размер 
    48х48 для обычной? http://techmeat.net/favicon.ico — 16х16 😉

    • favicon.ico делают в одном из 3х размеров: 16*16, 32*32, 48*48. Браузер во вкладку всё равно ужмет до 16*16, яндекс в поисковой выдаче сделает тоже самое. Размеры 32 и 48 нужны для десктопов, врядли отвечу подробнее :)В моем бложике иконка 16*16 пришла еще со старой шкуркой для WP, она мне подошла, вот и решил оставить )

      • Alekkson

        Я встречал favicon-ы размеров и побольше, такие как 64×64, 128×128 и даже 256×256. ))) Но я считаю что это не целесообразно, может от старого отвыкнуть не могу, когда был интернет по dial-up )), а может из-за того что последние время приходится работать серверами/хостингами где чаше трафик не unlimited. Вообщем я стараюсь экономить каждый килобайт и не передавать пользователям лишней информации. Так что я считаю, пока браузеры favicon ни при каких условиях в большом варианте не показывают, лучше его делать 16×16. А людей которые делают ссылки сайта на desktop я не встречал. ))

        • В общем то всё правильно написано, я тоже не встречал случаев, когда требуется 32*32 или 48*48. Возможно это актуально, когда речь идет не о сайте, а о html-приложении, которое можно запустить на десктопе, например загнав его в AIR. Скоро у нас Win8 выходит, я думаю там актуальна будет тема с иконками, по сути тоже html/css/js приложение.

  • disqusashto

    Теперь ещё есть Табло Яндекс-браузера: http://help.yandex.ru/yabrowser/webmaster/tableau-api.xml 150×60.