{"id":1972,"date":"2013-04-06T12:17:20","date_gmt":"2013-04-06T10:17:20","guid":{"rendered":"http:\/\/bluekea.com\/blog\/?p=1972"},"modified":"2021-03-01T17:19:46","modified_gmt":"2021-03-01T16:19:46","slug":"crear-un-favicon-con-fondo-transparente-en-photoshop","status":"publish","type":"post","link":"https:\/\/bluekea.com\/blog\/tecnica-digital\/crear-un-favicon-con-fondo-transparente-en-photoshop","title":{"rendered":"Crear un favicon con fondo transparente en Photoshop"},"content":{"rendered":"<p>El favicon es ese peque\u00f1o icono que aparece en la pesta\u00f1a y los favoritos de casi todos los navegadores y que sirve para identificar y dar un toque m\u00e1s profesional a una web:<\/p>\n<div id=\"attachment_1973\" style=\"width: 646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1973\" class=\"size-full wp-image-1973\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot5.jpg\" alt=\"Favicon de Bluekea.com\" width=\"636\" height=\"217\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot5.jpg 636w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot5-300x102.jpg 300w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><p id=\"caption-attachment-1973\" class=\"wp-caption-text\">El favicon de Bluekea.com en Google Chrome<\/p><\/div>\n<p>El ejemplo anterior es un favicon cuadrado, pero en este art\u00edculo vamos a ver c\u00f3mo crear un favicon con fondo transparente en Photoshop que se adapte a cualquier navegador.<\/p>\n<h2>Requisitos previos<\/h2>\n<p>Para que el favicon funcione es necesario insertarlo en el c\u00f3digo de nuestra web. Si tenemos una web en <a title=\"Bluekea, web para fot\u00f3grafos\" href=\"https:\/\/bluekea.com\" target=\"_blank\" rel=\"noopener\"><strong>Bluekea<\/strong><\/a> solo hay que subir un archivo, es muy f\u00e1cil. Si tenemos la web con otro sistema es necesario asegurarnos de que podemos usar un favicon personalizado; si nos han creado una web a medida contactaremos con nuestro webmaster.<\/p>\n<h2>Creando el favicon<\/h2>\n<ul>\n<li>Creamos un nuevo archivo en Photoshop, de unas dimensiones de <strong>200&#215;200 p\u00edxeles<\/strong>. Indicaremos <strong>Fondo transparente<\/strong>. La resoluci\u00f3n en este caso no es relevante.<\/li>\n<li>Seleccionamos la herramienta <strong>Forma Personalizada<\/strong>. De entrada tenemos pocas formas, al final del art\u00edculo <strong>te contamos c\u00f3mo disponer de muchas m\u00e1s<\/strong>. Si no encuentras la herramienta de <em>forma personalizada<\/em>, mant\u00e9n pulsado el rat\u00f3n sobre la herramienta de <em>forma rectangular<\/em>:<\/li>\n<\/ul>\n<p><strong style=\"font-size: 16px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1977\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot7.jpg\" alt=\"screenshot7\" width=\"97\" height=\"88\" \/><\/strong><\/p>\n<ul style=\"font-size: 16px;\">\n<li>\u00a0En la parte superior, en el panel de <strong>Opciones<\/strong> podemos escoger una forma y un color. El resto de opciones deben quedar as\u00ed:<\/li>\n<\/ul>\n<p><span style=\"font-size: medium;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1979\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot13.jpg\" alt=\"screenshot13\" width=\"650\" height=\"199\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot13.jpg 650w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot13-300x92.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/span><\/p>\n<ul>\n<li><span style=\"font-size: medium;\">Ya podemos dibujar la forma dentro de la imagen pulsando y arrastrando el rat\u00f3n desde la esquina superior izquierda. Para mantener las proporciones, es interesante pulsar antes y mantener la tecla may\u00fasculas:<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: medium;\"><span style=\"line-height: 24px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1980\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot14.jpg\" alt=\"screenshot14\" width=\"260\" height=\"276\" \/><\/span><\/span><\/p>\n<ul>\n<li><span style=\"line-height: 16px;\">Guardamos la imagen usando el comando <strong>Archivo -&gt; Guardar para web<\/strong>. Escogemos el formato <strong>PNG 24 con transparencia<\/strong>:<br \/>\n<\/span><\/li>\n<\/ul>\n<p><span style=\"font-size: medium;\"><span style=\"line-height: 24px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1981\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot15.jpg\" alt=\"screenshot15\" width=\"648\" height=\"427\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot15.jpg 648w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot15-300x198.jpg 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/span><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>Listo. Ahora podemos hacer dos cosas:<\/p>\n<ul>\n<li>Si tienes <a title=\"Bluekea, webs para fot\u00f3grafos\" href=\"https:\/\/bluekea.com\"><strong>tu web de fotograf\u00eda en Bluekea<\/strong><\/a>, puedes subir directamente esta imagen en la secci\u00f3n <strong>Dise\u00f1o de la web<\/strong> de tu cuenta Bluekea, y autom\u00e1ticamente se convertir\u00e1 en el favicon de tu web.<\/li>\n<li>Si necesitas el favicon para otra web o proyecto y te piden el formato <em>.ico<\/em>, puedes usar un servicio online de conversi\u00f3n de im\u00e1genes en formato favicon, como <a href=\"http:\/\/www.convertico.com\/\" target=\"_blank\" rel=\"noopener\">ConvertICO.com<\/a>\u00a0o\u00a0<a href=\"http:\/\/favicon-generator.org\/\" target=\"_blank\" rel=\"noopener\">Favicon Generator<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Este es el resultado, as\u00ed queda nuestro favicon en una web real. Al tener el fondo transparente, se integra perfectamente en el navegador:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1987\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot16.jpg\" alt=\"As\u00ed queda nuestro favicon en una web real. Al tener el fondo transparente, se integra perfectamente en el navegador.\" width=\"463\" height=\"99\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot16.jpg 463w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot16-300x64.jpg 300w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/p>\n<h2>Conseguir m\u00e1s formas personalizadas<\/h2>\n<p>Photoshop incluye por defecto un conjunto de formas personalizadas, pero podemos utilizar m\u00e1s formas import\u00e1ndolas desde un fichero. Este tipo de ficheros tienen extensi\u00f3n <em>csh<\/em> y pueden encontrarse f\u00e1cilmente en Internet con todo tipo de formas. Es muy importante, antes de usar estas formas, leer las condiciones de uso que ha establecido el autor de las mismas.<\/p>\n<p><a href=\"http:\/\/www.smashingmagazine.com\/2008\/12\/11\/the-ultimate-collection-of-photoshop-custom-shapes\/\" target=\"_blank\" rel=\"noopener\">Aqu\u00ed tienes<\/a>\u00a0una buena colecci\u00f3n de formas de todo tipo.<\/p>\n<p>Una vez descargado un fichero de formas, lo importamos a Photoshop pulsando la flechita de la parte derecha en el panel de formas y a continuaci\u00f3n seleccionando\u00a0<strong>Cargar formas<\/strong>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1986\" src=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot131.jpg\" alt=\"screenshot13\" width=\"650\" height=\"199\" srcset=\"https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot131.jpg 650w, https:\/\/bluekea.com\/blog\/wp-content\/uploads\/2013\/04\/screenshot131-300x92.jpg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><em id=\"__mceDel\">\u00a0<\/em><\/p>\n<h2>M\u00e1s ideas<\/h2>\n<p>En este art\u00edculo te hemos contado c\u00f3mo usar formas personalizadas, pero para crear un favicon puedes usar cualquier imagen siempre que sea sencilla y bien definida: letras, siluetas, tu logotipo si lo tienes, etc. La clave es, siempre que nuestro favicon no sea totalmente cuadrado, usar un fondo transparente tal como explicamos aqu\u00ed.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>El favicon es ese peque\u00f1o icono que aparece en la pesta\u00f1a y los favoritos de casi todos los navegadores y que sirve para identificar y dar un toque m\u00e1s profesional a una web: El ejemplo anterior es un favicon cuadrado, &hellip; <a href=\"https:\/\/bluekea.com\/blog\/tecnica-digital\/crear-un-favicon-con-fondo-transparente-en-photoshop\">Sigue leyendo <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1980,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tecnica-digital"],"_links":{"self":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/1972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/comments?post=1972"}],"version-history":[{"count":2,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/1972\/revisions"}],"predecessor-version":[{"id":5437,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/posts\/1972\/revisions\/5437"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media\/1980"}],"wp:attachment":[{"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/media?parent=1972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/categories?post=1972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluekea.com\/blog\/wp-json\/wp\/v2\/tags?post=1972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}